How to get the blogger first image URL in the post

问题

I want the URL of the FIrst image in the post and then use it as background image of a DIV

回答1:

To get the URL of the first image in the post you can use the following data tag inside the Blogger template

<data:blog.postImageUrl/>

For setting it as the background , you would do something like

<div class="newphoto" ></div>
<script>
document.getElementsByClassName('newphoto')[0].style.backgroundImage = "url('<data:blog.postImageUrl/>')" ;
</script>

or via jQuery

$('.newphoto').css("background-image", "url('<data:blog.postImageUrl/>')");

In case you want it work on pages like Homepage , Label page (The above data tag is available on all pages of the blog and will return empty on homepage and label pages as these don't have any particular images related to them but will work on the post pages correctly) then instead use the tag <data:post.firstImageUrl/> and include it inside the following block of code

<b:includable id='post' var='post'>

</b:includable>

Also just a reminder , these tags won't work if you include them in HTML/Javascript widgets from the Layout tab or inside the post content directly. Include them in the Blogger Template only

回答2:

help

<div class="newphoto" ></div>
    <script>
    document.getElementsByClassName('newphoto')[0].style.backgroundImage = "url('<data:blog.postImageUrl/>')" ;
    </script>

Add the else line to javascipt

document.getElementsByClassName('newphoto')[0].style.backgroundImage = "url('https://1.bp.blogspot.com/-aAjLvDndDIo/WH2DcqOeX9I/AAAAAAAAI9Y/W3_fmq0uGXseb_A1XWhaj5ZyL3DzKJD9ACLcB/s1600/bgplaydefault_djhayhay247.jpg')" ;

来源：https://stackoverflow.com/questions/27134094/how-to-get-the-blogger-first-image-url-in-the-post

标签

image

blogger