Best practice with image/video assets?

Hi! I am very new to Hugo (a few days old!) and haven’t used any other static blog generator before. So please bear with me if this question turns out to be a bit basic.

I have created a new site, and am creating a theme for it. So far, so good (I think) - I am able to get a file from my content folder to show up and be styled by what I’ve put in my theme. So am happy with linking up pages and using a stylesheet.

However, I was wondering how we’re supposed to handle image assets? Should they go in content, or in static? Obviously they shouldn’t go in the theme, as they are specific to this website.

What I want to achieve specifically is:

  • put an image in a blog post (controlled by the single.html template)
  • have that image show up on the index.html page as part of the link to the post (controlled by the index.html template)
  • if there is more than one image in the blog post, I would like to be able to specify which one to use for the preview

It feels like there should be an easy way of doing this - I can pull in a preview of the content of the post file, and the title, and so forth. But I am struggling to figure out how.

I also can’t find the configuration file(s) for my content pages - they automatically come with date and title. Do I need to create an archetype to modify this?

And, a styling best practice question - am I right in thinking that a style.css in the theme, controlling html tags/ids/classes in the template files, is the correct way to go?

Thanks in advance for any help :slight_smile:

Figured out the image thing eventually. In case anyone else comes across this, the trick is:

In your content, simply put an image in via markdown e.g. test image

For the one I wanted to show on the main page:
Put an attribute in the front matter:
+++
date = "2016-04-22T13:00:57+01:00"
title = "welcome"
author = "Deborah"
image = “…/…/img/thinkin_plenty.jpg”

+++

And access:
<img src={{printf “%s” .Params.image}} />