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.
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.
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.
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.