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.
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 hidden 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 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 hidden 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.
- 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.
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?
Check this screenshot, it explains how to add custom Javascript code to a content template built with Blocks hidden 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.
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 hidden 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.
New threads created by Jamal and linked to this one are listed below:
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.
