How can I show collection image url in collection list page?

I have a collection of teachers. Each collection item is a profile, with a name and photo attached.
I created a form on webflow where people add their details and photo.
I then have have a zapier action which creates a new collection item whenever somebody completes this form.

My issue is this: how do I display the profile picture on the directory list page?

When users complete the form, they upload their picture as a file.
Then Webflow send the form to zapier, and zapier sends the form back to Webflow.
Zapier turns the images into a url, so it arrives back as a link, not an image file.

On the collection template page (when you are looking at 1 person’s profile) I have successfully used the code injector to change the background image url by using the collection variable.

However, I do not have the option “+add field” on the code injection for the listing page, so it does not seem like I can use the same solution.

What can I do here?
Is there a better way to automatically add items from the form to my collection without using Zapier?

Here is my public share link:
(how to access public share link)

Hi @vexalist Monique, welcome to the Webflow community.

Could you please add your share link as well?

The “+add field” option is only available on template pages. Meaning it is available for CMS occupied pages only. If your information is not related to that template it will not show up.

I’ve updated the original post with the read-only link.

If the “+add field” option is only available from the template page for a single collection item, is there any way I can access these variables from a listing page (where several collection items appear)?

If not, is there another way I can display the profile pictures from the url?
Or another way I can add pictures to a collection item where they are stored as an image file and not as a url?

Yes, you can download the images from the form submission and manually add them to each profile. That is a long way about doing it, but will also allow you to review the submissions too.

We do not need to review submissions, thank you. Uploading them manually is not practical at all. I can’t believe something so simple is not possible.

We’re paying $45/month to have CMS and file upload, it’s incredibly disappointing that my only option is to manually upload each image.

@vexalist Monique, there is probably a way, I am just not versed in it.

@jorn, @Waldo, @cyberdave, @Brando, @Meg, @PixelGeek, do you guys have any idea how to get an image to populate into a CMS field from a form submission?

I am at a loss here.

The “+add field” option is only available on template pages. Meaning it is available for CMS occupied pages only

This is true at the page level. You can, however, use embeds inside collection lists to possibly achieve the desired result:

1 Like

Perfect, that was exactly what I needed!

For future reference, I added a HTML embed element inside each collection item card. In that element I have the “+add field” option. I added some custom code to set the background image to be the image url field from my collection.

Thanks everyone for the help.


Happy to hear it @vexalist :tada:

Unfortunately I celebrated too soon. The images do not display to anyone else, only to me. Firefox inspect element tells me I need to be logged in to see the images, which of course is not practical as I need other people to see the images, not just me.

I have no idea how to fix this. Is there anywhere on the site where I can change the settings for all uploaded images to be publicly accessible?

Anything else I can investigate? @Brando

Hi @vexalist

Thanks for letting me know! I think it’s because of the type of links currently being used for the images. Can you please try the following?

  1. Upload profile image to Asset Manager
  2. Open image in a new tab
  3. Copy URL
  4. Paste URL into the collection
  5. Publish and test in FF

This should work as the URLs for images uploaded to the asset manager are publicly accessible.

Here’s a GIF showing an example of steps 2-4: