Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Implement a list / grid / carousel toggle
So I know the principle behind this. Toggle a CSS class via JS and store it as a cookie so the visitor sees the same layout next time.
But I’m not clear on the best / most efficient way to structure the html since the three layouts are rather different:
- The list view has article data and a fair few custom fields, plus hyperlinks to popup/view media. No images.
- The grid view has images as the primary content, with a couple of salient bits of custom field/article data, possibly beneath the pic, possibly overlaid on it (undecided as yet).
- The carousel view will be similar to the grid content (same image + CF data) but arranged as ‘cards’ with overflow-x to side swipe to the next item in the set. It only on mobile. On desktop, it’ll still render the grid because the carousel looks a bit pants there.
So do I output the same/similar content 3x in 3 container divs and just add the ‘active’ class to the one I want to see? Or is there a better way to be cleverer and toggle parts of each article / field / image data plus change the container class to alter the behaviour?
Any ideas welcome.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: Implement a list / grid / carousel toggle
Or is there a better way to be cleverer and toggle parts of each article / field / image data plus change the container class to alter the behaviour?
If your articles don’t have wildly different content in the various layouts, I’d be tempted to make a standard markup for each article, providing sub-classes on the elements you’ll want to switch on and off in the different configurations. Then, like you say, apply your class toggle – or alternatively a data-attribute – to the containing element.
You can then use a combination of media-queries and the css cascade to vary the layout of your articles for each situation, and don’t need to repeat content:
/* mobile view - horizontal carousel */
.wrapper {
display: flex;
flex-direction: row;
gap: 2rem;
}
/* larger viewports */
@media screen and (width > 600px) {
/* list-view – vertical spaced list */
.wrapper[data-layout="list"] {
flex-direction: column;
}
/* items to hide in list view */
.wrapper[data-layout="list"] .card-img {
display: none;
}
/* grid-view – regular grid layout */
.wrapper[data-layout="grid"] {
display: grid;
gap: 2rem;
grid-template-columns: repeat(3, 1fr);
}
/* items to hide in grid view */
.wrapper[data-layout="grid"] .card-desc,
.wrapper[data-layout="grid"] .card-field-name {
display: none;
}
}TXP Builders – finely-crafted code, design and txp
Offline
Re: Implement a list / grid / carousel toggle
That’s a clever approach. I think I’ll try that first, by tagging each item and then using CSS rulesets to turn them on or off at varying device sizes and toggle values.
The key thing for me is to try to avoid duplicating the content because there are upwards of 50 articles to display on a page, and that could get heavy.
The layouts are currently slightly different and handled by two separate shortcodes, but I may be able to merge them into one if I wrap the list variant in a fake extra div, which is needed for the carousel. I’ll see what I can do with the markup.
Thank you for the tips.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: Implement a list / grid / carousel toggle
You should be able to keep the extra div for the carousel-container wrapper in your overall markup and just not style it for the other layouts. In that case you might want to limit its css to a media query < your breakpoint. That way it has no styling by default, and acts as the outer (constrained) carousel container for the card wrapper at narrower viewports. In such cases, I’d depart from the mobile-first principle as it saves you from having to revert css for larger viewports.
But if you need to override it, there is also the new-ish css display: contents; which essentially makes a dom element disappear from the cascade making its children belong to its parents.
EDIT: you probably know this, but you can also rejig your item (card) layout quite extensively if you want using the order on grid and flex items and grid-area on grid items. It can produce weird tab orders if you get trigger-happy with those, but it does mean you can vary output more easily with the same basic markup.
TXP Builders – finely-crafted code, design and txp
Offline