[ENHANCEMENT] - Improve blog post template cosmetically

[mattstratton]

Once ##310 is merged, we will want to do some work to make individual blog post pages look a little nicer, but this is a cosmetic improvement.

[rastacalavera]

Would you maybe want the default for a blog draft be set for true? I currently added this into my branch because I am often not immediately ready to launch it since I work on it through out the week but still do lots of pushes to my repo. Also, is there anything that could be done for image resizing using shortcodes? I am currently using html to center and size my images so they look good on a desktop but mobile there is side scrolling. Some kind of click to enlarge? Something like this that has a default size that looks normal on desktop but smaller unless touched on mobile. Or maybe something like this that automatically adjusts?

If I had the skills I would test it out but I am not quite there yet.

[mattstratton]

if you would prefer to have it set to true, you can override the archetype for the blog post in your own repo (I don't want to get opinionated about workflow in the theme itself).

hugo will look for the archetypes in the site's folder before the theme, so any archetypes you set there will take precedence!

[mattstratton]

the tricky thing with image resizing is that it happens (the generation of the different sizes) usually outside of hugo (in the one example, the author uses gulp to process the different images, and what the shortcode does is pick which image of the resized ones to present, etc)

I try to keep the theme away from assuming/requiring anything other than having hugo installed; adding in gulp etc as a requirement gets rough.

There are some things we could do to help the images be more responsive; generally the approach I have taken is "mobile first" so the default banner/thumbnails should all work fine. If you are doing stuff within your own markdown files it gets trickier.

Most of the images in the theme are displayed with the class img-fluid; if you add that class to the img tag in your content files, it might get you most of the way where you need to go.

[rastacalavera]

Thanks for the reply! Tested out the img-fluidtag on my blog post and it worked great on desktop and mobile. Does that tag have to be entered with every image that is in a markdown page? I've been linking all my images with html rather than the md way of ![]() just because I have mixed results. If there were linked using the md format, would the image class automatically be applied?

[mattstratton]

You'll need to add them; if you wanted to get slick, you could create your own shortcode (again, shortcodes outside of the theme take precedent) where you could do something like this:

Create layouts/shortcodes/fluid-image.html (in the root of your own code, not in the themes directory!) and use this code:

<img src="{{.Get "src" }}" alt="" class="img-fluid">

you would then call it in your markdown like this:

{{< fluid-image src="images/my-image.jpg">}}

Note that this is not testing code; you might need to tweak it a bit. And if there are other things you want to make the img tag do, you can do it in that shortcode!

[rastacalavera]

Cool! Thanks for setting the framework there and helping me understand :)