I take a lot of photos at coffee shops. For some reason this morning I thought it would be fun to create a page on my blog that just shows coffee photos. I already use Micro.blog filters so that whenever I include the ☕️ emoji in a microblog post, it assigns the Coffee category:
The next step was to create a template layouts/_default/coffee.html in my custom theme that would pull posts from this category. It grabs the latest 100 posts, then also checks if the post has a photo (“photos not equal nil”):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{ define "main" }} | |
| <style> | |
| #wrapper { | |
| max-width: 100%; | |
| padding-top: 20px; | |
| margin-right: 40px; | |
| } | |
| </style> | |
| <div class="photos-grid-container" style="display: grid; grid-column-gap: 15px; grid-row-gap: 15px; grid-template-columns: 25% 25% 25% 25%;"> | |
| {{ range first 100 .Site.Taxonomies.categories.coffee }} | |
| {{ if ne .Params.photos nil }} | |
| <a href="{{ .Permalink }}"> | |
| {{ range first 1 .Params.photos }} | |
| <img src="{{ . }}" width="200" height="200" style="border-radius: 5px; max-width: 100%; height: auto;" class="photos-grid-item" loading="lazy" /> | |
| {{ end }} | |
| </a> | |
| {{ end }} | |
| {{ end }} | |
| </div> | |
| {{ end }} |
Finally, I created a template content/coffee-photos.md to tell Micro.blog to use that template when creating the web page:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- | |
| layout: coffee | |
| type: coffee | |
| --- |
Voilà! Looks pretty good.
