How to make Portfolio Project collection template with variable Image / Text number

Design help General
1

Hey, just want to make sure this is possible, and see if anyone has good tips on how to achieve it.

So I’m making a portfolio site, and for each project page I need to have a ranging number of associated images and text descriptions. This site is a good example of a typical project page I’d want to make.

Notice how it alternates from image to text headline throughout.

So one project might be:

  • Headline
  • Image
  • Headline
  • Image
  • Image
  • Image
  • Headline

And another might only call for:

  • Headline
  • Image
  • Image
  • Headline
  • Image

Is there a way to make the collection so it allows me to have a variable number and order of images and headlines on each project page?

Any tips are greatly appreciated! Thanks!!

2

Hey yeah this is possible, i’ve just done it with my portfolio. You just need to style the blank state of that cms element as nothing. i.e you can put a bunch of inputs in the cms backend, but just make sure its empty state is basically invisible. So then only the text/images you input through the cms will show up. That way you can have them in any order basically.

3

Hi @helmsmith, another way this could be accomplished is by first creating a collection with the maximum number of images and rich text that a page would have. Lets say for example, 5 images and 5 texts.

You could then add a switch for each field, and using conditional visiblity, either show or hide the text/image, based whether the switch for that item was turned on or off.

This way, you or the CMS editor, can add text and images, and only switch “on” those text and images that should show in the article.

You could then apply interactions to the image and text, to have those animate on scroll into view.

See more about using conditional visiblity here: Conditional visibility | Webflow University

If you have a working Webflow site project, send the read-only link and we can take a look further and help :slight_smile: Share a read-only link | Webflow University

I hope this helps to give you some ideas!

1 Like
4

This is great! Thanks for tip. If I have any trouble I’ll update with a link to the project.

5

Cyberdave, quick question. What you’re saying makes sense I think, but I’m unsure how to “add a switch for each field”. When I add a field to a collection in the back-end, I don’t see an option to associate a switch to a field. I of course see the option to add a switch, but I can’t figure out how it will define which text/image element is shown or not.

1784×1115 148 KB

Screenshot of my Project Page collection for reference. Any help on what I’m doing wrong is greatly appreciated!

6

Do you need the switch? Can’t you just set it to be conditional on the text field or image being present?

7

Yep! Got that to work. I think I understand how Dave’s suggestion works now, but I think it’s a little more clean to hide if the field is empty. Thanks for the tip!

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.