Streaming live at 10am (PST)

CMS list of articles with different positioning


#1

Hi guys.

I am working on a site, where they are going to post some articles or blogposts once in a while.
I was thinking about positioning the articles in two columns (only in desktop view probably) and all the articles in the second column are about 120-150px lower than the articles in the first one.

My only solution was to put there two dynamic lists, give the right column some top padding and limit the number of blogposts in left and right columns so the articles are not repeating. Is there a nicer way to do it?

I don´t know if my english is clear enough so here´s a screenshot. I´d just like to have one dynamic list there but same design and listed from newest to oldest posts like zigzag, left to right.

Thanks a lot.


#2

A way to do it with only one dynamic list, and providing you know how many elements fits in a vertical column, is to learn about CSS pseudo elements.

https://www.w3schools.com/cSS/css_pseudo_elements.asp

With a bit of CSS custom code, you'll be able to define a rule like "Put a top margin on the 5th child of that element" which will achieve your vertical shift.

The one pseudo element you're looking for is the nth-child, and the rule will look like:

.w-dyn-item.the-class-of-your-dyn-item:nth-child(5) {margin-top:50px}

.w-dyn-item.the-class-of-your-dyn-item is how to make sure you target exactly the branch of elements you need

:nth-child(5) means it's going to affect the 5th child of its parent


#3

Wow. That is a well written answer. Thanks for that :slight_smile:

My "two dynamic lists" made the same thing. This first one is limited to show first four articles, second one shows 5th and 4 more, so the result equal.

What I was wishing for is more like this:

My Second issue. To make a button to "show more articles", when it´s clicked. But will look at some tutorials and read this forum, maybe it´s there. :slight_smile:


#4

Didn't my answer explain exactly how to do it? Maybe I'm missing something...

A button to another page that shows a list of n articles in a list, starting at the 11th of the collection?


#5

No, sorry I missed it. I thought you are saying that the articles will be sorted vertically but with one dynamic list and limited items, ... I get it now!
Thanks

Yes. I was thinking the same way, but maybe in a hidden div that show up when the button is pushed and reveal another few articles on the same page or soething... the website i am working on is about a specific movie for a production company that is about to being shot so there are not going to be that many articles. Thanks Vincent.


#6

Oh I see no sorry it can be horizontally. ignore the numbers and replace 5 by 2 :slight_smile:

Yes :slight_smile: I'm sure an official solution is on its way too.