如何在帖子中获取博主第一张图片网址

时间:2014-11-25 18:30:18

标签: image blogger

我想要帖子中的第一张图片的网址,然后将其用作DIV的背景图片

2 个答案:

答案 0 :(得分:8)

要获取帖子中第一张图片的网址,您可以在Blogger模板中使用以下数据标记

<data:blog.postImageUrl/>

要将其设置为背景,您可以执行类似

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

或通过jQuery

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

如果您希望它在主页,标签页面等页面上工作(上述数据标签在博客的所有页面上都可用,并且在主页和标签页面上将返回空白,因为它们没有任何与它们相关的特定图像但是会正确地在帖子页面上工作)然后使用标签<data:post.firstImageUrl/>并将其包含在下面的代码块中

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

</b:includable>

另外只是提醒一下,如果您将这些标记包含在“布局”标签中的HTML / Javascript小部件中或直接位于帖子内容中,则这些标记将无效。仅将它们包含在Blogger模板中

答案 1 :(得分:1)

帮助

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

将else行添加到javascipt

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