CMS variable width thumbnails

Design help Custom code
1

Hi Folks,

For SEO reason i’m trying to recreate our Medium blog using Webflow’s CMS. On the overview/thumbnail page the desire is to breakaway from the classic column style and have a more tiled effect. The aim is for something like this:

2092×1844 547 KB

I can’t seem to work it out using the CMS. Any pointers would be much appreciated.

Thanks. Jak

2

To achieve such grids I usually use several dynamic lists.

The first list 2 posts from 1st post, the second 2 posts from 3rd post, etc.

This way I can do that for example:

http://vincent.polenordstudio.fr/snap/fydit.jpg

3

That’s a good suggestion @vincent. Thanks

Have you ever tried different widths on the same line, like Medium?

Thanks!

4

Oh, no, I think my answer was covering that part too but it doesn’t… let me think…

5

I don’t see a solution right now… I already wanted to do that and I tought I could just use more dynamic lists. i mean, it’s easy to maintain so don’t hesitate. Where I use 1 list per line, use 2.

I don’t see a way to affect CSS with CMS data.

6

That’s my sense too. I think i’ll try your suggestion unless anyone else has an alternative. thanks @vincent

7

We just passed a moment with @zbrah to think about many possible tricks but none are working :slight_smile: One trick was to control the width of the boxes with a string of invisible text :smiley: but the maintenance of that…

In the end go for one cell = one list ! there is no problem doing so.

Your goal with CMS is to keep the INPUT of data simple. That’s OK if the layout is complex, but you want it to work automatically and to keep the creation of content as simple as possible.

8

That’s an interesting workaround. I’d almost be tempted to skip the CMS altogether and just go manual with it.

I’m still not sure which i’ll go with, but having the right balance of good design and simplicity has to be the key.

Thanks again

9

Don’t ditch the CMS, use 4 lists, that’s more than OK :slight_smile: I don’t even call this complex.

10

The last time I started to play with custom code to make something like that!

http://five-star-site-64d290.webflow.io/
https://webflow.com/website/Blog-Layout

11

We can do this in custom code using CSS nth-child selectors. It would be easier if Webflow could provide support for this.

12

Thanks @samliew however the nth-child selectors just don’t seem to work with Webflow’s CMS. I have created a demo site showing the same custom CSS working as desired on one page but not on the page with a dynamic list. It just seems to override the custom code.

Here is the published version:
http://nthcmstest.webflow.io

editable version:
https://preview.webflow.com/preview/nthcmstest?preview=8b403c7f7d40d590389148949bf25030

It is a shame, it would have been a great solution.

13

You cannot apply it to the .repeating class. Do it on .w-dyn-item instead.

.w-dyn-item:nth-child(4n+1)
14

Thanks @samliew & @vincent.

I went with nth-child selectors and it’s working great. Whats quite nice about it is that the webflow preview is actually pretty similar to the published site.

Here’s the result: More than a desk | Managing Coworking Spaces Should Be Simple

Here’s the code used:

.w-dyn-item:nth-child(4n+1){ width: 66%; } .w-dyn-item:nth-child(4n+2){ width: 34%; } .w-dyn-item:nth-child(4n+3){ width: 34%; } .w-dyn-item:nth-child(4n+4){ width: 66%; }

Also, I had to manually add media queries so that we could stretch the blog post to 100% width on mobile devices.