Add a featured image as hero on top of a blog post

Hey, I’m trying to add an image as a hero on top of a single blog post on the post page. I want this image to be dragged from the database, so it shows the featured image of the blog post as a hero. I managed to get an image from the database, but it takes the dame image for each and every blog post, so i guess i need to create a special dataset or something? Any ideas?

Hi Bjorn,

Im Ido from the Editor X team,
I have a solution for what you are trying to achieve, it involves a bit of code, using wix-data and wix-location api and also the getPost function that can get you data from the current post.

Im attaching a video of how I achieved this and also the code snippet:

and here is the code that I used:

import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(function () {
    imageRefresh();
    wixLocation.onChange(() => {
        imageRefresh();
    });

});

function imageRefresh() {
    $w('#post1').getPost()
        .then((post) => {
 let postId = post._id;
            console.log(postId)

            wixData.query("Images")
                .eq('post', postId)
                .find()
                .then((results) => {
 if (results.items.length > 0) {
                        $w('#imageX1').src = results.items[0].img;
                        $w('#imageX1').expand().then(()=>{
                            $w('#imageX1').show();
                        })
                    } else {
 // handle case where no matching items found
                    }

                })

                .catch((err) => {
 let errorMsg = err;
                });
        })

        .catch((error) => {
            console.log(error);
        });
}

Hope this helps,
Ido

Thank you. I just tried to put this to action, but it doesn’t seem to work for me. I checked for the correct image id to use on my page and did, but there’s no image being displayed at all. :confused:

Ido, do you have any idea why this won’t work for me? Also on top of that, is there a code solution to use this feature and fetch a random image from a dataset to be included in a hero section as well? Thinking of doing this for the main landing page. Thank you.

If you pasted the code exactly you have to make sure that the collection name, the field and the item Id are all matching.

I did, but all I get is a blank hero section with the text above that i set.

@contact3961 Can you send the url for your published site?

@idoh www.ridepunkride.com

@contact3961 I was curious how your blog layout turned out after @idoh / @hershido suggestion. Looks great! I’m wondering, did you use a repeater for your blog posts? It looks like you have more control over how categories, tags and dates appear. Any info would be helpful. Thanks!

@idoh I tried to do this and it didn’t work, are you able to help?

I don’t know about the code aspect but similar to Ido’s video above, you should be able to use Multi-Reference fields to display the information.