I have a dynamic image source with a dynamic caption in a content sample.
If the caption text is long, it enlarges the picture.
How can I prevent this?
The caption text should be broken when it reaches the width of the image.
Hello and thank you for contacting the Toolset support.
Can you share a URL where we can see this issue?
Does this issue happen with a default theme such as TwentyTwenty?
I suppose that you are building a content template with blocks, right? If not, please give more details on how you are building this page.
Hello, thank you for your anther.
Yes, I use content templates with blocks.
The image is in an "Image" block (alignment left) and the text in an "Fields and Text" block
The URL is still under construction and I am currently testing all the futures I need.
I have therefore attached three hardcopys in the appendix that represent my problem.
I'm using the GeneratePress theme.
Can I possibly solve the problem using the advancet CSS of the image block?
Thank you for these details, I can understand the issue better, but I'll still need to check how is the content template is built and how are the used blocks aligned. To make that quicker a bit, I created a new installation on our platform and I would like you to reproduce this issue on it.
You can log in with the credentials on my previous private reply(July 9, 2020 at 11:17 am). Once it is reproduced, I'll find out a solution or I'll escalate the issue to our 2nd Tier if I can confirm it is a styling bug.
Toolset Types and Blocks are activated. If you need to install another Toolset plugin, you can do it automatically here versteckter Link
You are right, the Advanced CSS section can help fix this issue. Once reproduced, I'll give it a shot and see how to fix it.
I created the template in the test environment. However, it is presented differently with this team.
I installed and activated the "GeneratePress" theme and I was not able to reproduce the issue. With this theme, the image takes the whole width and the text comes below it. Check this screenshot versteckter Link
Would you like to give it another try?
Would it be possible to allow us access to your development server to check this issue on it? We may find out why and suggest a fix.
Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
I deactivated the sidebar in your test system. So there is now space for the flowing text to the right of the image.
Your test system now has the same problem as mine.
Thank you for your feedback. I can see the issue when there is a short or long caption below the image.
As a quick fix, I suggest:
- Add the following code to your theme's functions.php file to load jQuery.
add_action( 'wp_enqueue_scripts', 'tu_load_jquery' );
function tu_load_jquery() {
wp_enqueue_script( 'jquery' );
}
- Add the following code to your content template to force the caption to have the same width as the image:
jQuery('figure.alignleft').each(function(){
var figure = jQuery(this);
var img = figure.find('>img');
var caption = figure.find('>div');
caption.width(img.width())
})
Maybe this can be fixed by CSS, but I find it hard to get, because the parent element(figure) takes the width of its elements(img and caption), I did not find a way to fix the figure width based on img width only.
Please let me know if this is a viable solution for you. Otherwise, I'll escalate it to our 2nd Tier for a better solution, unless it is something that should be fixed by the GeneratePress team.
Hello,
It is also not a problem with gernerate press. If I use it purely (without blocks or templates) then it also works with long capture.
So please report this problem internally as a bug.
But now to your solution:
Functions-php is clear.
But where and how should the code be inserted in the content template?
Hello!
Check this screenshot, it explains how to add custom Javascript code to a content template built with Blocks versteckter Link
I'll need your help before I can be able to escalate this issue to our 2nd Tier. Can you make an example on the test site where the issue is not reproduced without block, especially what you said here It is also not a problem with gernerate press. If I use it purely (without blocks or templates) then it also works with long capture.
I saw that it works in your sample installation, although I can't find the code in funcktions.php in the sample installation.
Unfortunately it still doesn't work for me.
See attached hard copies
On the test site, I added the code to "Toolset->Settings->Custom code" instead of adding it to the functions.php file. That's almost the same thing. Check this screenshot versteckter Link
If your server is available online, I would like to log into it and check why is this custom code not working. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
And another similar problem:
In a grid cell I have an immage (block alignment left).
Next to it a single field.
It is also displayed correctly in the editor. Not in the front end!
See attachments.
The custom Javascript code was not working on your website, because the image is inside a <a> tag. And the code expects it to not be wrapped by a <a> tag.
I updated the code to:
jQuery('figure.alignleft').each(function(){
var figure = jQuery(this);
var img = figure.find('img');
var caption = figure.find('>div');
caption.width(img.width())
})
However, for support rules, we are able to handle only one issue at the time. This helps us to bring you a better service and also helps other users to find all the information here exposed. For that reason, I have created another ticket for your last message. Please reply to that newly created ticket with more details about the issue.
Thank you. Now it's working.
I inserted the image via toolset. The a-tag comes from the Toolset code.
In the hard copy you will find the test page for your second level (see 14. Juli 2020 um 17:36 Uhr)
