Approach to download data from cms and alternate displa...

At a glance

The community members are discussing how to approach alternating the display of graphics downloaded from a CMS without having to add separate graphics for the right and left versions. The suggested approaches include:

1. Using custom CSS to reverse the flex-direction of every other collection item, as suggested by one community member.

2. Adding a switch in the CMS to control the layout, as suggested by another community member.

The community members also discuss how to handle the case where the images and content stack on smaller breakpoints.

There is no explicitly marked answer, but the community members seem to favor the CSS-based approach using nth-child over the CMS-based switch approach.

GGromek

Hey Guys, How would you approach this? I want to download data from the cms and alternate the display of graphics. I don’t want to have to add separate graphics for the right and left versions.

4 comments

TTom Declat

I've used some custom code in the past to achieve this, so you'd set up your CMS with Image/Title/Blurb/Link and then add a separate Code Embed to the page (or sitewide) and have it something along the lines of below;

.collection-item:nth-child(even) { flex-direction: row-reverse; }

AAndrei Constantin

Add a switch in the CMS (for example “its left”) and then you call that with custom class in the layout

AAlex Bache

how would you make this work if the images & content stack on a smaller breakpoint?

SSamir T

the best way is to use the nth-child and change the css just as Tom suggested above. Using a switch in CMS is another way but not optimal as you will have to manually change that and you can't really sort or move things around without having to go back to the CMS and altering the switch

Add a reply

Community forum for knowledge and support

Approach to download data from cms and alternate display of graphics