Take the url of the first image of each post (div), store this url in a variable

Asked

Viewed 734 times

2

I have a blog, and for each post is automatically created a div. On the home page only the first image of the post and the title (with link) referring to the post should be displayed. Only here, I’d like the image to be defined as background-image of your father’s div.

For this, I use a blogger tag that returns the unique id for that post, generated by the blogger himself.

With the id of the div, I use the selector :first-child to take the first image, and successively its url, storing in a variable, and then use in the css definition background-image. Just like it shows in the code:

$(window).load(
    $(function pegaId(id){
            var idDoPost = $("#"+id).attr("id");
                console.log(idDoPost);

            var imagemUrl = document.querySelector("#" + idDoPost + " img").src;
            console.log(imagemUrl);

            $(".post-outer").css("background-image", "url("+imagemUrl+")");

            pegaId("ident<data:post.id/>"); /*chama a função pegaId e passa como parametro o id
                                            que será utilizado para identificar a div*/

}));

The problem is I’ve changed the code several times, I’ve used other selectors, added more functions, changed the position code on the page and nothing.

I search for solutions but also can not find.

In the console it says that the url of the images are "Undefined", I think it is because the images are only loaded later, even using the $(document).ready() or $(window).load().

I wanted someone to help me, because I want to make a code that automatically picks up these images.

jquery css image div blogger

  • If you wrote url instead of src wrong correct pf on the question... where do you get "ident<data:post.id/>"?

  • Then, within the Blogger the system’s own tags that return a distinct id for each post... so there are 2 posts with a same id. This way the first image will also be different. Here is an example of how the tag generates a number <div class="posts" id="ident696899985754861576">. You can see that "ident" remains the same, but "<data:post.id/>" will come a unique number code.

  • Could you take id by id, and for each one, take the url of each image and apply it as your parent div background, instead of using these blogger tags? And how to do?

  • You’re calling the pegaId function inside itself, why?

  • I don’t know... I’ve tried everything... I put the call inside of her because she was the only one who kept calling me back during the changes. If I put the call before it says that the 'pegaId' function is not declared, if I put 'Function(id)' then no.

  • Hi Italo, don’t work with trial and error, things end up getting more difficult ;) Come on, separate the blocks, first, write the $(window) block. load, out of it create your function and go back to $(window). load and make the call, something like this: $(window).load (&#xA; suaFuncao();&#xA;)&#xA;&#xA;function suaFuncao() {&#xA; return 'foo';&#xA;}

Show 1 more comment

2 answers

1

assuming that each div of a post has the "post class":

$(function() {
    var urlsImagens = $(".post img:nth-child(1)").map(function() {
       return this.getAttribute("src");
    });
});

0

$(window).load(
    $(function pegaId(id){

            var imagemUrl = document.querySelector(".post-body img:nth-child(1)").src;
            console.log(imagemUrl);

            $("body").css("background-image", "url("+imagemUrl+")");

}));

Browser other questions tagged jquery css image div blogger

You are not signed in. Login or sign up in order to post.