How to get collection image url?

Design help CMS
1

Not sure if I’m missing something or if this is not possible. How do I get the urls for my cms images? I want to make my images open in a new tab on click but can’t seem to figure out how to get the dynamically generated cdn urls for the images.

2

@dapitts08 - I normally inspect the code in my browser on the published site, or use the API to fetch the collection item fields with data.

3

thanks! it’s on a collection template page so the image is going to be dynamic so inspecting and getting the static url won’t work. i actually haven’t used the webflow api but am about to look into it now. i just figured since it is on a collection template page it would be easily available. i’m so use to working with shopify liquid and being able to pull in so much data about an item pretty easily, i assumed the webflow cms would be similar.

4

You can go into a collection item via the designer and right click on an image and “copy image address” in chrome.

5

thanks but i’m not sure how that is a solution for my issue. the images will be added to the cms by my client which requires a dynamic solution. either being able to add a link block that in the settings i can link to the generated image url (which it can’t) or being able to include the image as an html embed, pull the image from the cms, wrap in <a> tag and being able to add a field for the image url (which i can’t).

6

By JS - in my example also the <a> tag added by js (For another trick/idea - add more details)

HTML

On webflow set class for the image (“get-my-src”) in this example:

<div>
  <h5>list item 1</h5>
  <img class="get-my-src" src="https://picsum.photos/200/200">
</div>
<div>
  <h5>list item 2</h5>
  <img class="get-my-src" src="https://picsum.photos/201/200">
</div>
<div>
  <h5>list item 3</h5>
  <img class="get-my-src" src="https://picsum.photos/201/201">
</div>

Javascript

Before body (After jquery load) -

loop throw all images (each docs | jquery Class selector docs)

$(".get-my-src").each(function() {

For each item get image src

var src = $(this).attr("src");

Put this var inside “wrap” var (target='_blank` open in "new window)

var customHrefWrapper = "<a href='"+ src +"' target='_blank'></a>";

Use this var to “wrap” the image

   $(this).wrap(customHrefWrapper);

Full code (copy => paste - before-body)

<script>
  $(".get-my-src").each(function() {
    var src = $(this).attr("src");
    var customHrefWrapper = "<a href='" + src + "' target='_blank'></a>";
    $(this).wrap(customHrefWrapper);
  });
</script>

Codepen:

2 Likes
7

omg! thank you. this is a perfect solution. i’m traveling today and tomorrow so won’t get to implement it for a bit but it absolutely makes sense. you rock!

1 Like