Mautic Community Forums

Dynamic content styling

I guess this thread is two-fold:



Firstly, the practical issue - I have an email design which has up to 5 content blocks, each with an image on one side and some text on the other. The layout of these blocks (image left/text right and image right/text left) switches for even-indexed blocks using CSS. I have proven this works with raw HTML in an email for the vast majority of modern email clients, having tested it in Litmus. If the email client doesn’t support the CSS properties used, it defaults to image left/text right.



I need these blocks to be dynamic within Mautic, so some blocks may be removed if there aren’t enough news stories, that sort of thing, and the way the CSS works, the blocks will still alternate with the image left/right correctly when a block in the middle is removed. I have set up the blocks as separate dynamic content items within the email in Mautic.



However, embedding the dynamic content in the email itself produces issues. Firstly, when I try to use the shortcode to embed a dynamic content block, e.g. {dynamiccontent=“FirstBlock”}, the Builder automatically wraps a tag around it. Because the CSS uses the :nth-child pseudo-class to determine whether to flip the positioning of the columns in the block, they always end up with the image on the left because there is only one child each time because of the intervening tag.



To get around this, having saved the email, I then went into the database and forcibly removed those offending tags from around the {dynamiccontent} includes, but it seems that wherever the email is put together by Mautic to include the dynamic content, tags are also added around the outside of the dynamic content before the final email is delivered.



How do I get around this? It is vital that Mautic respects the HTML template that has been built, it shouldn’t be throwing in arbitrary tags around elements because of the inherent likelihood that it will break something that has been specifically designed.



Secondly, the theory issue - why on earth has this been developed into the system in the first place??

I guess this thread is two-fold:

Firstly, the practical issue - I have an email design which has up to 5 content blocks, each with an image on one side and some text on the other. The layout of these blocks (image left/text right and image right/text left) switches for even-indexed blocks using CSS. I have proven this works with raw HTML in an email for the vast majority of modern email clients, having tested it in Litmus. If the email client doesn’t support the CSS properties used, it defaults to image left/text right.

I need these blocks to be dynamic within Mautic, so some blocks may be removed if there aren’t enough news stories, that sort of thing, and the way the CSS works, the blocks will still alternate with the image left/right correctly when a block in the middle is removed. I have set up the blocks as separate dynamic content items within the email in Mautic.

However, embedding the dynamic content in the email itself produces issues. Firstly, when I try to use the shortcode to embed a dynamic content block, e.g. {dynamiccontent=“FirstBlock”}, the Builder automatically wraps a tag around it. Because the CSS uses the :nth-child pseudo-class to determine whether to flip the positioning of the columns in the block, they always end up with the image on the left because there is only one child each time because of the intervening tag.

To get around this, having saved the email, I then went into the database and forcibly removed those offending tags from around the {dynamiccontent} includes, but it seems that wherever the email is put together by Mautic to include the dynamic content, tags are also added around the outside of the dynamic content before the final email is delivered.

How do I get around this? It is vital that Mautic respects the HTML template that has been built, it shouldn’t be throwing in arbitrary tags around elements because of the inherent likelihood that it will break something that has been specifically designed.

Secondly, the theory issue - why on earth has this been developed into the system in the first place??