CMS conditional rendering?

default discord avatar
4 weeks ago

I'd like to get an understanding of how layout of CMS items is typically rendered/displayed.

Do you add custom logic to render the block's layout based on the items present?

For example, I have a block for a portfolio item. There's differeing sized frames for images for the portfolio.

Frame 1 is a square, frame 2 lines up with that square and is rectangular in shape, frame 3 is a larger rectangle etc etc. Let's say these shapes span 2 rows. What happens if the client only inserts 3 images for the portfolio, spanning 1 row.

Is it reccommended to add conditional logic for all frames that have no content to be deleted and therefore shift the content below up (for example there's text below the images frames).

If that isn't the case, there'll be white blank frames that will occupy space and make the overall design off-balance.

What do you suggest and do you have any links to learning resources to share?

This is what I'm refering to -

CMS conditional rendering?

  • default discord avatar
    4 weeks ago

    well, thats the thing with custom code;

    whats amazing about it, is that you can make it work however you want.

    what's difficult about it is that there isn't really a


    way to do it, there are just opinions about what the best user experience is.

    You could create a block rendering component that renders all of your blocks and inside of your block components on your frontend, you can choose to not return any component until certain fields are present; thats up to you.

    Personally, I think it's better to encode placeholder data in your frontend; I like to put something like "x field missing...", while putting a gray rectangle with an image icon inside of a missing image. If I intend a component to say... work with only 3 images, I will have 3 image placeholders and I will have the field set to




    to enforce that. If it is intended to work with any set number of images, you'd simply need to account for that.

    Looking at other block based builders like webflow might give you a good idea about how


    want to create your blocks

  • default discord avatar
    4 weeks ago

    Cool, thanks. Yea, as a beginner I'd love to get away with creating strict placeholders and not have to create conditional logic that updates the layout and ensures it's always looking beautiful. It seems like getting that right will take a lot of time and skill.

    For any other noobs interested to learn more:

    Any other links to resources to learn conditional rendering will be much appreciated.

    I agree, Webflow looks great for prototyping - you can also export your HTML, CSS, JS code 😄

  • default discord avatar
    4 weeks ago

    You can always start simple as well and as you experiment, or continue building with Payload, you'll start to see over time, which sort of reusable blocks give the most value and you'll know what's worth investing more time in and optimizing. Just get comfortable building. There's a lot of value that comes from building the same project, or similar things more than once when you're learning.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.