有没有办法我可以在博客文章中找到第一张图片并将其作为标题放在博客文章中?

时间:2014-09-29 07:52:46

标签: javascript html blogger

所以我要做的就是将博客中的第一张图片看作每个博客帖子页面的标题....

这是我到目前为止所做的:

<b:if cond='data:post.firstImageUrl'>
<img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>
</b:if>

但那时它并没有真正起作用。有人可以帮帮我吗?有关示例,请参阅this。我希望帖子中的第一张图片看起来像页面上的标题....

1 个答案:

答案 0 :(得分:2)

我也遇到了麻烦。我想你想用图像作为背景图像。 我使用一些jquery来解决这个问题。 你的目标与我的目标有点不同,所以我建议你实际在你的第一张图片中添加一个类(可能想要手动执行,或使用javascript),获取源代码,将其作为背景图像添加到标题中,隐藏图像标记(如果打算重复,请不要这样做)

Markup将会是这样的:

<header class="imgbg"></header>
<div class="post">
  <h1>Title</h1>
  <p>Text</p>
  <img src="#" class="first-img">
</div>

和jquery:

function getimgsrc(){
    $('.post').find('.first-img').each(function(n, image){
        var image = $(image);
        var thisurl = $(this).attr('src');
        $('.imgbg').css('background-image', 'url(' + thisurl + ')');      
        $('.first-img').remove();
    });
}

我构建了一个codepen来更好地说明这一点:http://codepen.io/bekreatief/pen/BaFnx