I would like to change the size of images without actually changing the resolution of the image that the URL points to. The above thread suggests to do this with CSS rules. However, I don’t know where you are actually supposed to put them.
I have tried just copy/pasting the CSS as-is into the *.md file (doesn’t work, it’s just displayed literally), and I tried creating a file themes/theme.css and putting the code in there (doesn’t work, it seems that the file is unused).
Where am I supposed to put CSS code, and how can I tell Hugo to read that file?
CSS goes in a stylesheet, or in a style block in the <head> of your HTML, or in an inline style attribute. None of these are directly accessible to you from an *.md file in your content folder. You’ll probably need to add your CSS to a stylesheet, and/or edit a template to link up a new stylesheet, or create a shortcode that can insert some inline styles along with your image.
One possibility is to use Hugo’s built-in figure shortcode, which allows you to specify the height and width attributes. Those values can be overridden by stylesheets, however, so this may or may not behave how you expect, depending on your theme. You can also use the figure shortcode to assign a class attribute, which you’d then reference in a stylesheet.
When I copied the example, this worked, but I found a bug. The height property does not work. Only the width works for specifying the size. The height property does nothing, both when width is defined and when width is not denied. I tried 20, 20px, "20" and "20px". I’m using the Stack theme.
CSS goes in a stylesheet […] probably need to add your CSS to a stylesheet, and/or edit a template to link up a new stylesheet
How do I do this? Are there any stylesheets provided out of the box, or do I have to set them up? Where do I say what stylesheets are available? Is it related to themes? What is a template in this context?
My guess is some css from the Stack theme is overriding that element’s height attribute. Resizing these images will need to happen in a stylesheet.
The templates I was referring to would live in the layouts/ folder, but I guess if you’re using the Stack theme is would be in the theme’s layouts folder. Look in layouts/partials/, there’s probably one that contains the <head>, and that’s where stylesheets would be linked. You can add a style block there, or find one of the stylesheets that it’s already loading and add your styles to that.
Sorry I can’t speak more specifically about this. I don’t use themes, so I’m unfamiliar with how that all works.