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

So what I'm trying to do is to get the first image in a blogpost to look like a header for every blog post page....

所以我要做的是让博客中的第一张图片看起来像每个博客帖子页面的标题....

This is what I have so far:

这是我到目前为止：

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

But then it's not really working. Can someone please help me out? Please see this for an example. I want the first image in my post to look like that header on the page....

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

1 个解决方案

#1

I have had trouble with that too. I suppose you want to use the image as a background image. I worked around that using some jquery. Your aim is a little bit different than mine, so I would suggest you actually add a class to your first image (may want to do that manually, or use javascript), get the source, add it as a background image to your header and hide the image tag (don't do that if repetition is intended)

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

Markup would then be something like:

标记将是这样的：

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

and jquery:

和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();
    });
}

I built a codepen to illustrate this a bit better: http://codepen.io/bekreatief/pen/BaFnx

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

#1