Collection image from URL

Design help CMS
1

Hey folks, is there a way to use a URL as an image? I’ve generated a CSV from the current website and imported the image URL as text but couldn’t find a way to make it an image. Wasn’t able to any solution yet, sorry if I missed something.

Thanks!

2

I think you can import images directly from URLs but you have to use the CMS API and Zapier.

But as you already have your URL in the database, you can use a bit of Custom code to show it.

  • Drag a Custom code box inside of your page, where you want to image to be. It has to be in a Template page or inside of an item of a Collection List
  • type in the HTML code for an image, type it like this:
    <img src="URL">
  • select the URL part
  • click on the top right of the Custom Code box, on the purple link Add field
  • select the field of the URL of your image

Now your image should show up, as you have used a CMS variable inside of a html img code.

6 Likes
3

For anyone doing this and wondering how to add a radius to the image: set overflow for your block to hidden.

1 Like
4

How is this not a feature yet?

5

This was super helpful! I’ve recently encountered a project with a similar need, but I only wanted to render the image element if the CMS item has an associated image or URL in your case. The “conditional visibility“ functionality still dumps the <img> element into the DOM, even if the src isn’t set, which isn’t ideal for web accessibility.

I opted to make a cute little web component that will conditionally add the image to page.

All you need to do is this:
Add site-wide custom element code

class CmsImage extends HTMLElement {
  static observedAttributes = ["source", "alt"];

  constructor() {
    super();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "source" && newValue) {
      const image = new Image();
      image.src = newValue;
      this.appendChild(image);
    }
    if (name === "alt" && newValue) {
      const image = this.querySelector("img");
      if (image) {
        image.alt = newValue;
      }
    }
  }
}

customElements.define("cms-image", CmsImage);

Then, anywhere you need to conditionally render and image you can use that <cms-image> web component, you just drop a Code Embed element on the page with the necessary attributes:

<cms-image source="" alt=""></cms-image>

Then you can click the little “+ Add Field“ button to put the CMS data in those two attributes. It should look something like this:

cms-image-component
cms-image-component1598×524 24.7 KB

The nice parts about this approach is:

  1. The image doesn’t end up in the markup unless the CMS has the data.
  2. It works with both text url fields and CMS image fields.

The drawbacks are:

  1. You don’t get the image optimization functionality that comes out of the box with Webflows image element. I didn’t need that in this case.

So far, JavaScript web components are the most elegant way I’ve found to actually conditionally render pieces of markup from a CMS. It works pretty well in conjunction with Webflow’s components.

6

Cool javascript hack, hadn’t thought of using custom tags like that and code embeds like that! Though it would definitely be nice just to be able to refer to external images directly.

I struggled a lot with these types of code embeds when trying to do programmatic content in Webflow, to inject text snippets within paragraphs of text. Custom code embeds are nice until you’ve got someone on the team who isn’t so savvy with adjusting these scripts and styling becomes a bit more challenging. Started building Inbind to do it easier, I think we’ll add the image URL reference as a feature since it’s not addressed by Webflow :slight_smile: