How to correctly scale the featured image in Jekyll blog excerpt?

Question

I am using Jekyll to collect blog excerpts on one page. One problem is that the featured images in the excerpt are usually stretched from the original ones. I think it is due to the default setting of the featured image in the excerpt is always fixed to 300px * 100px size. How to scale the featured images in stead of using a fixed size in the excerpt while making sure the size of the image is not larger than the default size?

In details, I use the following code to generate the blog excerpt in my post.html template:

<header><h4><a href="{{ post.url }}">{{ post.title }}</a></h4></header>
<p><span>{{ post.subtitle }}</span></p>
<p style="font-style:italic"> {{ post.date | date_to_string }}</p>
{% if site.pageviews %}
<p style="font-style:italic"> pageviews: {{ post.pageviews }} </p>
{% endif %}
<article>
<div class="excerpt">
{{ post.content | strip_html | truncate:400  }}
</article>

This function automatically grabs the first image in the blog as the featured image and shows it in the excerpt paragraphs. I cannot find where the size of featured images are controlled in Liquid... Thanks.

Update on May 31st : The repo is here . See the most recent post for the image and excerpt of image at http://iciq.github.io . I fixed this problem by defining the "scale" property in stead of the width property in the css style of the image in the post. But still open to more elegant solutions.

Answer 1

As said above the problem is likely a css problem.

You can style images in several ways in a markdown file. Firstly by using HTML syntax or kramdown syntax and there is probably more...

If you choose to use kramdown you need to configure this in the _config.yml file.

markdown: kramdown

// then on the markdown file just use:

  Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}

Answer 2

Let's refactor how you write and display your posts.

Use Jekyll's excerpt functionality

{{ post.content | truncate: 200 }} {{ post.content | truncate: 200 }} is, sometimes not accurate. We can define a more precise excerpt for every post with Jekyll's excerpt functionality .

In _config.yml :

excerpt_separator: "<!--more-->"

In _posts/yyyy-mm-dd-post-title.md :

---
... front matter variables
---
Post excerpt here

<!--more-->

Post content here

You can now print exactly what your need in your posts listing :

Example file noteblog.html

[...]
---

{% include header.html %}
  <div class="row">
    <div class="col-sm-12">
      {% for post in site.posts limit:4 %}
        {% include postsummary.html %}
      {% endfor %}
[...]

_includes/postsummary.html

<div id="postsum">
  <time>{{ post.date | date_to_string }}</time>
  <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
  {% if post.subtitle %}<h4><span>{{ post.subtitle }}</span></h4>{% endif %}
  {{ post.excerpt }}
  <a href="{{ post.url }}"><em>Read more</em></a>
</div>

About our feature image

There is two kind of images :

• feature image : used in article display for general illustration. They are sometimes printed or not, in different size, in different places. In order to use them, we need to decouple them from content. Usually, we reference them in the front matter.
• topic image : used in your text to illustrate a specific topic. They need to be at a specific place in our text. They are part of the content.

What you're trying to do is managing a feature image, and you're already referencing it in your front matter :

_posts/2016-05-27-group-study-on-advanced-topics-in-quantum-optics-II.md

image:
  feature: /assets/img/opticallypumpedatoms_featured.jpg

In _includes/postsummary.html , using twitter bootstrap classes, you can then do :

{% if post.image.feature and post.image.feature != "" %}
  {% assign hasImage = true %}
  {% assign excerptClass = "col-xs-10" %}
{% else %}
  {% assign hasImage = false %}
  {% assign excerptClass = "col-xs-12" %}
{% endif %}

<div class="row postsum">
  <div class="col-xs-12">
    <time>{{ post.date | date_to_string }}</time>
    <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
    {% if post.subtitle %}<h4><span>{{ post.subtitle }}</span></h4>{% endif %}
  </div>
  <div class="{{ excerptClass }}">
    {{ post.excerpt }}
    <a href="{{ post.url }}"><em>Read more</em></a>
  </div>
  {% if hasImage %}
  <div class="col-xs-2">
    <img src="{{ site.baseurl }}{{ post.image.feature }}" alt="{{ post.title }}" class="img-responsive">
  </div>
  {% endif %}
</div>

This will print your feature image only if it exists.

And, as your stylesheet is targeting #postsum which has several occurrences, you can target a .postsum class instead.

In assets/css/style.css , delete all references to #postsum and add :

.postsum{
    position: relative;
    padding: 10px;
    margin: 0 auto;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.postsum time {
    font-style: italic;
    text-align:right;
    float:right;
    line-height:1.8em;
}
.postsum h3 { line-height:1.2em; }
.postsum h4 { font-style: italic; }
.postsum img { float: right; } 

You can also refactor _includes/postexcerpt.html in the same way.

Answer 3

FYI, your question is really a CSS question and not a Jekyll question.

The code you provide does not even reference an image, so can't help much there.

But what I suspect you are currently doing is importing the article's image into your blog list with the class you use to display the image in your post's page template.

You need to create and use a special class for when the post's images are displaying in the blog list format.

Also, on a side note:

1. you do not need to use a header tag if the contents are only an h tag; and

2. the opening article tag (if that is what you want to use) should be before the heading.

Here is an example of a structure you may want to use:

<!-- for each post in post loop, express something like: -->

<article>

<h4><a href="{{ post.url }}">{{ post.title }}</a></h4>

<p><span>{{ post.subtitle }}</span></p> 

<p style="font-style:italic"> {{ post.date | date_to_string }}</p> 

<img class="special-blog-image-class" src="{{ post.image.path }}" alt="{{ post.image.alt }}" title="{{ post.image.title }}"/>

{% if site.pageviews %}

<p style="font-style:italic"> pageviews: {{ post.pageviews }}</p>

{% endif %}

<p class="excerpt"> {{ post.content | strip_html | truncate:400  }}</p>

</article>

Answer 4

静态站点的一个非常酷的解决方案是不使用 CSS 解决这个问题，而是使用像http://images.weserv.nl这样的图像大小调整服务。