Minimal-mistakes: Usage of thumbnail picture for posts

[simdevmon]

• [x] This is a question about using the theme.
• [ ] I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
• [x] This is a feature request.
• [ ] I have updated all gems with bundle update.
• [ ] I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version: 4.3.0
• github-pages or jekyll gem version: 2.5.2
• Operating system: Windows 10 Pro

---

Expected behavior

I would like to have a thumbnail picture of a fixed size (e.g. 200 x 200px) left to each post in the list, which is specified for each post with thumbnail: /assets/images/xyz.png and would fall back to a default image if nothing is specified.
For mobile devices the image should be above the actual post.

Steps to reproduce the behavior

I experimented a bit with archive-single.html, but I due to my lack of HTML / CSS knowledge, I was not too successful.

        <div style="float: left; padding-right: 15px;">
            <img src="https://farm5.staticflickr.com/4140/4939863887_84705982fd_b.jpg" style="width: 200px; height: 200px; background-color: red;"></img>
        </div>
        <h2 class="archive__item-title" itemprop="headline">
            {% if post.link %}
            <a href="{{ post.link }}">{{ title }}</a> <a href="{{ post.url | absolute_url }}" rel="permalink"><i class="fa fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a>
            {% else %}
            <a href="{{ post.url | absolute_url }}" rel="permalink">{{ post.title | escape }}</a>
            {% endif %}
        </h2>
        {% if post.read_time %}
        <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
        {% endif %}
        {% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html }}</p>{% endif %}
        <div style="clear: both;"></div>

It would be really great to get some help how to integrate this properly or even include such an option as a new feature.

[mmistakes]

Not exactly the same as a list view of posts with teaser images, but have you looked at the grid view? It's used to create the "related posts" module and the portfolio demo page.

If you add type="grid" to the include it'll spit out HTML markup to do a grid layout (4 x 4) with title, teaser image, post excerpt, and meta info.

{% include archive-single.html type="grid" %}

[mmistakes]

And to assign a teaser image to a post/page/document you add the following YAML Front Matter to references the image's path:

header:
  teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"

[simdevmon]

Thank you, I had a look at the grid layout, but I am really just looking for a list view with an additional teaser image. I will have a closer look at the grid view and see if I can integrate the teaser image from there into the list view somehow.

[anhluong]

I want something similar to what simdevmon is describing. I am using the grid layout but still have a problem of either the title is on top of the previous gallery or indented like this:
http://www.anhnluong.com/research/
Here's the current source:
https://github.com/anhluong/anhluong.github.io/blob/master/_pages/research.html

I tried various ways. But I have no clue how to fix this.
Any hints?

[mmistakes]

@anhluong You could try removing the <div class="archive"></div> wrappers as they have CSS that contains the width and floats to the right... which is why the alignment is off.

[anhluong]

@mmistakes, but then the section title alignment is off even if i wrap it in another grid__wrapper. Thank you very much for your suggestion.

[mmistakes]

@anhluong You'll likely need some custom CSS to override that then. The grid view was designed for a listing with a single heading as shown here (source).

By adding additional headings like "Current Projects" and "Previous Projects" are causing the alignment to be off. If you clear the floats you can get it to work. I forget what issue, but if you look through the closed ones you'll likely find a solution with sample code. This has come up numerous times before by others wanting to do the same thing.

[anhluong]

@mmistakes: I found it. Thank you for your help.

[mmistakes]

This issue has been marked as stale. Please feel free to reopen if:

1. This is a bug and you can still reproduce using the latest version of the theme. Please reply with any additional information you have to keep the issue open.

2. This is a feature request and can elaborate on why you feel more than 80% of users would find it beneficial.

Thanks for your contribution :smile:.

[DannieBGoode]

I also think this lists view with the image on the side would enrich the theme quite a lot. I would use it for sure.