Kevin Powell - Community•3mo ago

Is this a good tutorial to learn masonary layouts ?

For a site I need a masonary layout. and I found this one which is very good looking : https://piccalil.li/blog/a-simple-masonry-like-composable-layout/ But I wonder if it is a good tutorial or do I learn something which is not good ? The images comes from a api

Piccalilli

A simple masonry-like composable layout

It’s going to be a long time until CSS masonry is ready for us to use in our projects so I’ve got a nice stop-gap here for you that uses composable layouts.

18 Replies

13eck•3mo ago

As a general rule, Piccalilli is gonna be good.

roelofOP•3mo ago

oke Then I have to follow it and look how I can make it work when the images url come from a api Do you know it is easy to change the html and css to this ? And also when the vieuwport is smaller the number of images get from 3 to 2 and then 1

13eck•3mo ago

I haven't read the artcile yet so I'm not sure. But DM me a reminder and when I get home from work in 10hrs I'll have a look

roelofOP•3mo ago

thanks a lot chips. I cannot send you a DM so I first ask you to be a friend

13eck•3mo ago

Ok, finally had a chance to read through it and it's…brilliant in it's simplicity! As a long-time believer in Every Layout, seeing two of the "layout primitives" from EL being used makes me really happy. There's not much to change in the HTML/CSS unless you want a different number of columns, but 3 is a good number. The biggest downside to this layout is that it's pretty much "set" at 3 columns that then breaks to 1 column when the viewport is small enough—the EL primitives don't have enough "oomph" to allow for dynamic columnar layouts unless you get some JS in there. The Switcher primitive that they're using is designed for "1 or X columns" and they're hardcoding 3 into it (as shown with the 3 .flow divs):

<div class="wrapper switcher">
  <!-- Column 1 -->
  <div class="flow">
    <!-- Images redacted for brevity -->
  </div>

  <!-- Column 2 -->
  <div class="flow">
    <!-- Images redacted for brevity -->
  </div>

  <!-- Column 3 -->
  <div class="flow">
    <!-- Images redacted for brevity -->
  </div>
</div>

<div class="wrapper switcher">
  <!-- Column 1 -->
  <div class="flow">
    <!-- Images redacted for brevity -->
  </div>

  <!-- Column 2 -->
  <div class="flow">
    <!-- Images redacted for brevity -->
  </div>

  <!-- Column 3 -->
  <div class="flow">
    <!-- Images redacted for brevity -->
  </div>
</div>

So if you want a different number of columns you'll need to either make a custom element (my suggestion) or do a lot of repeating code so you have 1, 2, and 3 columns and switch based on a breakpoint (not suggested, as that's a lot of repeat code! The more code you repeat the more likely you are to break things). But honestly, the defaults they give you are gonna be really good for most use cases so you won't need to do too much fiddling.

roelofOP•3mo ago

oke I asked because the api gives me this : https://api.imgflip.com/get_memes and then I have to make code to divide it all in 3 columns

13eck•3mo ago

I see Ok, so here's a quick way to get an array of arrays with the images:

const getSplit = (jsonString) => {
  const result = JSON.parse(jsonString);

  const newImg = () => document.createElement("img");

  return result.data.memes.reduce( (arr, {url, name}, idx) => {
     const img = newImg();
     img.src = url;
     img.alt = name;
    if (idx % 3 === 0) { arr[2].push(img) }
    else if (idx % 2 === 0) { arr[1].push(img) }
    else { arr[0].push(img)}
    return arr;
  },[[],[],[]]);
}

const getSplit = (jsonString) => {
  const result = JSON.parse(jsonString);

  const newImg = () => document.createElement("img");

  return result.data.memes.reduce( (arr, {url, name}, idx) => {
     const img = newImg();
     img.src = url;
     img.alt = name;
    if (idx % 3 === 0) { arr[2].push(img) }
    else if (idx % 2 === 0) { arr[1].push(img) }
    else { arr[0].push(img)}
    return arr;
  },[[],[],[]]);
}

This will give you an array of 3 arrays, each array containing roughly 1/3 of the total images in an img tag using the URL property of the data as the img src and alt text set to the name property of the provided data. You'd then need to either create the div.wrapper.switcher or querySelect it and set the contents of each sub-array as the content of each div.flow. I'm assuming you're going to be making the imgflip API call on your server, so you can do all this logic server-side and send down an HTML string to the client (or if it's SSR then just render it in-place and do what you normally do).

roelofOP•3mo ago

Thanks

13eck•3mo ago

What are you using for your server?

roelofOP•3mo ago

at this moment, it is a wordpress site

13eck•3mo ago

Ok, so PHP. Well, the JS code won't do anything for you server-side, but I hope it's a good enough example that you can re-implement it in PHP

roelofOP•3mo ago

or in react as a block template 🙂

13eck•3mo ago

🤢 -# but yes, as a [redacted] template would work, too

roelofOP•3mo ago

I cannot help that wordpress has chosen react for thier new theme ideas

13eck•3mo ago

Time to roll-your-own using Nodejs lolol

roelofOP•3mo ago

there I have to learn a lot more and I doubt if I ever going learn that far

13eck•3mo ago

What? Sticking to what you know? lol

roelofOP•3mo ago

that is not very much

Gaming

Programming

Is this a good tutorial to learn masonary layouts ?

Did you find this page helpful?