More fun with images follows. First up on mobile devices the images are only taking up 80% of the width which is wasteful, its even worse when its designated portrait - more on this later.

Secondly, captions - right now I've used some emphasis text below images, but really I want a proper caption style. As per this started with me playing live in the chrome inspector to get a format I liked, which happens to be anything other than my current solution. I haven't super dug into how Pelican works with the markdown, but I'm pretty sure it just lets the Markdown module convert it to html and dumps it straight into the content area of the template. This means if we want to change the structure it is in the markdown conversion that we need to look. I was aware through some of the Pelican documentation that there are markdown plugins that can be enabled/disabled - so my starting point was a search for captioned image support. There was fruitful results, all with slightly different syntax/output - in the end I settled for markdown_captions.

Just enabling this plugin already improved the situation - note that the caption is taken from the image alt text, so I will have to go back and remove my own manual captions on previous posts.

Originally, my thoughts were that I wanted the caption to be within the horizontal bounds of the image and potentially left-justified. After some playing about I noticed the fact that the image within the figure didn't have a fixed width was problematic as I essentially wanted the figure block to inherit this size and wrap text within it. What happens is that because the image width is not defined, the width of the text is used instead and the figure becomes as wide as the caption text. This whole scenario is captured perfectly in this stack overflow question. There isn't really a good solution, and while I could strive tirelessly towards a compromise, I thought I might try some other caption options first.

Turns out if I settle for a centre aligned caption I get most of the way there pretty fast. An appropriate width for wrapping the caption needed a little thought - but really I don't know how long my captions will be in reality. Images take up 80% of the available width (up to their maximum size) in landscape, and 55% of the available width when designated #portrait, therefore I chose to make the width of the caption 60% of the available width to maximise the text space without resulting in a super outstretched caption below a narrow image. Other styling was minimal, my weapon of choice for designating the caption is smaller text and all caps.

Sorting out widths on mobile

So somewhere within the initial SCSS file I inherited from the pelican-hss repository, I saw a @media screen specifier for what I thought looked like a mobile device width that did an override on image widths to make them take up 100% of the width. Turned out this wasn't quite what I thought and was actually capturing some obscure tablet size?

Anyway, there is a need for some differentiation on how images are displayed in desktop and mobile screens. Firstly, with width being valuable on portrait screens there is no benefit in using only 80% of the available width, even less so for portrait images where the reason for reducing the width on desktop was to stop full width images taking up a lot of vertical real-estate when the aspect ratio is maintained. The plan is to make all images 100% width when on mobile (narrow) screens, likewise following the caption discussion above the caption width will also be set to 100% in this scenario.

First problem is that I don't really know how narrow a mobile should be - some investigation by trial and error got me a number of 450px width as a good threshold to switch between mobile and desktop. My knowledge of CSS is pretty much what I've picked up in practice and really would like a proper munch on the standard documentation - particularly now with my use of SASS. The modification I describe above essentially means I want to keep all the current image properties except on narrow mobile devices (less than 450px width) I want to make the max-width 100% including for #portrait images and make the caption width 100%. Using a simple media query @media screen (and max-width: 450px) with the above properties below the current image properties does the job perfectly. A minimal extra mod was removing some horizontal margin on the figure tag to get a true full-width experience.

The finished product