Streaming live at 10am (PST)

Get image from next collection item

Hello everybody!

Hope you’re having a great day in the world of Webflow.
Well, let me get to the point.

I’m trying to get the image from the next item in a collection. I’m already using this code to get the URL from the next item, but i have no idea how get a image as well:

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () { 
    
    var next_href = $('#post_list .w--current').parent().next().find('a').attr('href');
    var previous_href = $('#post_list .w--current').parent().prev().find('a').attr('href');
    
    //if last post in list
    if(next_href == undefined) {
      next_href = $('#post_list').children().children().first().find('a').attr('href');
    }
    
    //if first post in list
    if(previous_href == undefined) {
      previous_href = $('#post_list').children().children().last().find('a').attr('href');
    }
    
    //apply hrefs to next / previous buttons
    $('#next_button').attr('href', next_href);
    $('#previous_button').attr('href', previous_href);
    
  });
</script>

I made this amazing illustration of what it want (don’t be jealous of my drawing skills):

So if anyone have any idea how to do that with custom code, then it will make my day.

Thanks for your time!

Hello,

Thanks for reaching out! :smiley:

I would love to help out here, would it be possible for you to send the most up-to-date share link for the specific site?

This will help give some context to how this page is functioning that we can look into.

Looking forward to hearing back from you!

Hey Riley,

Thanks for your reply!

Here is the share link: https://preview.webflow.com/preview/hvasshannibal?utm_medium=preview_link&utm_source=designer&utm_content=hvasshannibal&preview=609914a1c0c29138c98cf5ac9cf8b1bb&pageId=5dce74236467910ff29e73c5&itemId=5dce742364679171339e73f5&mode=preview

You will find what you are looking for on the “Works Template” collection page, then scroll to the bottom.

So again, i want to show the next “Thumbnail Image” of the next collection item, under the “Next” text. But i want to see if there is a way to do this with custom code.

Thanks for your help. :smiley:

Hello,

You’re welcome, I’m glad I can bring some assistance here.

I’m curious about experimenting with something like this:

  • Add a div element to the next/prev link wrapper that will reference the image as a background image

  • Add an image element to the collection list where the next/previous links are in

  • Connect the image element to the thumbnail field

  • Target the src of the image element referencing the thumbnail field similar to how you target the href for the links

  • Use that src of the image and include it in the background style attribute to use for the background image.

Let me know if this helps, and I would be happy to further explore some ways to do this.

Hey yo!

Sorry, but i have no idea how to code this kind of thing. :sweat_smile:

I appreciate you taking time to help still.