How to get image from CMS collection using its URL

Design help CMS
1

Hi,

I am trying to get an image into CMS Collection page without upload the image to Webflow as the size of the image is larger than the limitation.

I have tried few different ways.

  1. Insert ‘Link block’ - link the URL to my CMS Collection (imageURL)
  2. Insert ‘Link block’ - link the URL to my CMS Collection (imageURL) - Insert ‘Image block’ in to the Link block
  3. Insert ‘Code block’ - HTML code - but not sure how to link the custom CMS input into src
  4. The ‘Image block’ doesn’t allow to link to custom URL field. It only accepts Image field.

If anyone have solution for this, please help me D: D:

Thank you.

1 Like
2

What’s your readonly link and the location you’re setting this up on your page?

For #3 you can just create an image tag;

<img src="...">

Where I’ve put the … is where you’d embed your URL using +add field.

Another way is to create a custom element, give it a tag of img, and an attribute of src. You can bind the value of src to your URL field as well. That’s a nice way to control styling, since you’ll have an element rather than a code block.

3

Hi Micahel,

Thank you for applying.

I would like to add an image in a CMS Collection page.

I do not want to link the image directly copy paste the link. (e.g.

I am trying to link the Custom field ‘CoverImgLink’ to tag. But I am not quite sure how to I get the value of Custom Field ‘CoverImgLink’ and send it to tag.

image
image1067×491 45.2 KB

Thank you.

4

What’s your readonly link and the location you’re setting this up on your page?

5

Here.

https://preview.webflow.com/preview/hannas-portfolio-db256a?utm_medium=preview_link&utm_source=designer&utm_content=hannas-portfolio-db256a&preview=25eb6de67538f208e6b0ada01f74f99b&workflow=preview

I am setting this up in CMS Collection Pages / Projects_HKim37570s Template.

Thank you.

6

The custom element approach I mentioned is;

  1. Add a custom element where you want it
  2. Set the tag to img
  3. Create a src attribute
  4. Click the little purple button to bind it to the CMS field which contains your image URL

image
image2304×1604 397 KB

Keep in mind if you’re trying to host your image on Google Drive, you may have some issues, but at the least you’ll need to form the link properly and to ensure it’s shared settings include “accessible to anyone with the link.”

1 Like