Default thumb images or placeholders

[jackbaty]

I love the new thumbnail/featured image handling, thanks!

One issue I have with featured images, in general, is that themes don't often do a great job of displaying a combination of posts with and without thumbnails. Congo suffers from this same problem. For example, here's the list of posts on my blog:

Might I suggest that the theme displays the list of posts with consistent alignment, whether images are present or not?

I don't know the best answer, since some will always use thumbnails and some will never use them, so it's tricky. A couple of ideas:

1. Set a default thumbnail image site-wide. If set, and a post does not have a thumb, use the default image. This should work ok if many, but not all posts have thumbs (as on my blog, for example :)). Even better might be to choose randomly from several images. Or perhaps dynamically generate one based on the title as some apps do with avatars.
2. Instead of using an image, just insert space so that the titles align consistently.

It's possible I'm the only one bothered by the alignment differences, but I wanted to put this out there.

Related, I feel like I'll be reusing the same thumbnails many times, for software icons, etc. Copying the same image into every post seems wasteful. Could there be a frontmatter option for the thumbnails? Then I could re-use, say, /img/mastodon-logo.png without duplication.

(I hope none of this is already implemented, but I could not find any mention of it).

Thanks for a terrific theme!

Jack

[jpanther]

Thanks for the detailed feedback and suggestions, @jackbaty!

The article alignment is one that I played around with and I did think about aligning all the text down the page. The challenge with this is there's no easy way with Hugo to know in advance if any of the posts on the page will have a thumbnail. While it's possible to solve this with CSS I experimented with listings where only one article had a thumbnail and decided that all the whitespace that was generated by all the other articles that were indented then looked very out of place. As you mentioned, I also tend to think this is one of those features where you either use it all the time or not at all, and so I'm also interested to understand why you only use thumbnails for some posts and not others?

I'm wondering if a solution is to have a placeholder fallback image that can be user configurable and if there's no thumbnail available then it uses that image. Like all things with design, you can show ten people and get ten different opinions.

Front matter is something I will add in a future update. I tend to implement these features first and then let them sit for a bit and see how people use them before settling on front matter variables because if I decide there's a better way and try to change them later it will break people's sites. Ultimately, I intend to have a way to specify the images on a per article basis, but there's a lot of complexity around how this then feeds into open graph sharing and things.

[rshmhrj]

Hi @jpanther, I love the look of the example site as well! Though I also share some of the same concerns as @jackbaty .

I had implemented something similar using a frontmatter setting preview (which also is required by this VS Code CMS, also named Front Matter to show nicely in their dashboard -- shout out to @estruyf).

I like the consistent format of everything having a thumbnail / preview image, and in the case where there isn't one, I fall back to a default (the lion in the screenshot below).

I also agree with @jackbaty's comment about image reuse. In my case, I too have tons of logos all over the place and I store everything inside of assets/images, which allows me to reuse the same image on multiple pages (e.g. by adding preview: /img/logos/cli.png in the frontmatter).

One last thing to think about is requiring a page-bundle to use this feature. For pages with different thumb / cover / feature images, that's fine, but for a simple .md with just a thumb and no cover, creating a bundle seems like overkill. Having the frontmatter preview option could solve that.

I added you as a collaborator on a private mirror repo, if you are interested in seeing some of the random quack I cobbled together to get it working with image resizing / srcset. Some of the files to check out are:

• layouts/_default/list.html
• layouts/partials/article-link.html
• assets folder with logos
• example page bundle using preview
• example standalone md file using preview
• example draft file without a preview

I'll take my time over the next month or so and play around with it some more as I try to get the amazing benefits from both your awesome theme (and godly CSS) and from the FrontMatter CMS extension. Will report back here with any additional comments or questions! 😃

Thanks again for all your dedication and fantastic work!

[jpanther]

Thanks for the comments, @rshmhrj. As I mentioned above, the front matter support is definitely coming in a future update. As I'm sure you're aware Hugo already supports using an array of images provided in front matter as a way of supplying featured images on posts. I'm debating whether to hook into this existing behaviour or whether it should be split into multiple parameters to provide more explicit control - something like thumbnail and cover.

The reasoning behind putting the images in the page bundle is because that's the "correct" Hugo way of doing things and a lot of the pipelines and image transformation features of Hugo require this type of setup. It also allows for articles to be completely portable without worrying that other assets are buried in different directories. However, I do completely agree that for the use case of default thumbnails or other reusable assets, these should be provided through the site's global assets. The initial release of this feature doesn't consider the use case for default images and so that's why only page bundles are supported.

I suspect once the front matter params are available this will resolve your issue with the VSCode extensions too.

[jackbaty]

Thank you both for the very thorough replies. It is a tricky issue!

I'm also interested to understand why you only use thumbnails for some posts and not others?

That's a good question. I have historically only used "Featured" images when they were directly relevant to the post. I don't want to just grab something from Unsplash or wherever just so I can fill the space. However, your theme allows for separate thumbs and covers, which is brilliant, so this may change, since a slightly less relevant thumbnail is less obnoxious than a giant random Unsplash featured image :). I may find that I use them more with your theme. I love that I can have a thumbnail but no featured image. I think it's still a reasonable idea to have a global fall-back image. Optional, of course :).

I also love the way images work simply by putting an aptly-named image into the bundle folder. I prefer that to using frontmatter in most cases. @rshmhrj suggested not requiring a bundle when using frontmatter. I like the idea, although I wonder if that gets tricky when automatically sizing images, etc. Perhaps for things like thumbnails, it matters less? Although personally, I always use bundles, even when there are no images. I'd rather have either all folders or no folders than a mix of the two. I'm weird that way :).

I hope you can pursue the idea of reusing images, at least for the thumbnails. It's not so much about storage than knowing I'm "copying and pasting" too many things 😀. What if I come up with a better version of an icon/logo but already have 30 copies of the old one in place? Maybe I'm making too much of this, but I still think it's worth looking into.

Thanks so much for your time.

[jpanther]

I think we're on similar lines of thought with how these things work, as I too don't usually enjoy using cover images on posts. I find them distracting and the type of posts I write aren't really things that warrant an actual image. However, thumb images do provide some context and can make article listings more interesting.

My comments to @rshmhrj above are relevant to some of your response too, so I wont repeat everything here. Page bundles are the neatest way of organising the content and I tend to use them in all cases unless it's literally just a plain text article.

All I'll say is this is still only the very first iteration of this feature. There'll be a lot more added and refined over the coming months.