Hi TagDiv Team,
I’m using the Flex Block Builder in Newspaper with a layout where the image is on the left (5/12) and the content is on the right (7/12).
What I would like to achieve is the following behavior:
If a post has a featured image → layout stays 5/12 (image) + 7/12 (content)
If a post does not have a featured image → the content should automatically expand to 12/12 width, filling the entire block
At the moment, when there is no featured image, the layout still keeps the 5/12 + 7/12 structure and leaves empty space where the image would normally be.
Is there a built-in option in the Flex Block Builder to handle this automatically?
Or is there a recommended theme-based solution (without duplicating templates)?
Thank you in advance for your help.
Hi,
To achieve what you want, use a row with one 12/12 column, and in that column set the featured image to the one you want. After that, set a inner row that will have the width auto (those shousld be inline), inside the innerow set the rest of the elements you want to display on the module, like title, excerpt …
Hello, I tried your suggestion, thank you. Where can I set inline and width auto.
I am sorry, I need some more help and tips.
Thank you.
Hi,
On each element, check in the CSS tab for the display option – https://prnt.sc/nLpQPh-1SKsX. Doing this on all elements will align them.
Thank you for all your help. I am sorry, I am still not successfull.
Find the attached video to make sure we do understand each other correctly.
Same link – not html
Hi,
I understand. What I propose is to provide a link to your website where the created module (the one you already have) is used, and, if possible, another link where the results appear without the featured image. I will then create a JS code that will apply to the Flex Builder. This approach will be better because, right now, the featured image element has a placeholder thumbnail that is used if no image is set. As a result, this placeholder is displayed even when there is no featured image for the article.
https://filderanzeiger.de/tagdiv-support/
I have created a special page for our support case and your assistance. The link is provided above.
In the upper module, which I built using the tagdiv builder, the row is set to a 5/12 to 7/12 split. The featured image is located on the left side.
In the second module, the layout is shown without the image. This is how it should look when an article does not have a featured image. In this case, the row is set to 12/12 and the featured image is not included.
The mobile version of the site works similarly, though the images and text are stacked on top of each other. Because the spacing is slightly different, there is a separate mobile version for each module.
If you create a JavaScript for me, the question is whether I can then copy or duplicate it multiple times across other pages. This layout will be used several more times on the site later on.
Thank you for your help. How can I support you?
Hi,
Thanks for creating this testing page, now I will need one more thing, I need to have on the block with featured images and articles that do not have a featured image, so I can compare the structure you created and how it is with an image and without the image.
Thank you!
Hello, the provided link had the module with feature image at the top and a module underneath with the module without picture.
https://filderanzeiger.de/tagdiv-support/
do you need two seperate pages?
Hi,
I checked all articles from the page https://filderanzeiger.de/tagdiv-support/ and all of them have a featured image set 🙁 Normally, one of those 2 articles should not have an image because different classes will apply to the featured image – https://i.imgur.com/JzckjCw.png – https://i.imgur.com/6SwPurl.png, only then can I see what code can be used.
