Photo pages

If you’ve uploaded photos and included them in blog posts, Micro.blog will create a page at /photos on your hosted blog automatically. You can rename or delete this page under Posts → Pages on the web.

Micro.blog only includes JPEGs for the photos page to help filter out screenshots which are usually PNGs. If you want to change this behavior, you can customize the photos template list.photoshtml.html using a new theme.

Micro.blog sets 2 special parameters in Hugo that are accessible from a custom theme:

  • .Params.images — includes JPEGs or PNGs
  • .Params.photos — only includes JPEGs

The default templates shared between all themes are also available on GitHub here.

@manton Does M.b create any thumbnails? I’d like to speed up the photos page a bit by loading slightly smaller images if at all possible.

Thanks for this. Two hopefully quick questions:

  1. I don’t see that page. Where and how might I begin troubleshooting. I tried creating a /photos/ page but none of the photos I loaded are visible.
  2. If I want to change the parameters to incude all images, is that adjustment in the code something I do in side my custom CSS option (edit custom theme, edit CSS, etc), or do I have to clone the theme entirely and upload it unique for my blog?

@lukemperez Manton also posted an announcement of the feature, which might help.

This is on my to do list of things with which to play around. There is an entire section within the Hugo documentation on image processing.

Id really like to make this page load quicker, a simple solution would be to add in some pagination.

You can add pagination via the config.json file (I think?), but you can also load thumbnails rather than full-sized images. I asked above how to do it, and didn’t get a public reply. But I did include it in my blog post.

https://micro.blog/photos/480x/{{URL TO IMAGE GOES HERE}}

An example from my themes:

{{ range first 1 .Params.photos }}
          <img src="https://micro.blog/photos/480x/{{ . }}">
{{ end }}
1 Like