Resize preview image in posts?

[pat-s]

Example: "Getting Started" banner in https://gcushen.github.io/hugo-academic-demo/post/getting-started/

Is there a way to resize and center such images? Or are they fixed to full width when specified in the header of a post?

I tried to resize it manually. However, images are always stretched to full page/post width..

+++
date = "2016-04-20T12:00:00"
draft = false
image = "banners/getting-started.png"
+++

[chasgames]

Works fine for me, you need to do some more customisation 🍮

[pat-s]

Thanks, changing the max.width value in huge-academic.css works. However there are some points why this approach is not that optimal:

• It changes the core .css of the academic theme
• All posts are affected by this

It would be nice to just have a variable in the header of each post specifying the width of the image. Is this possible?

[gcushen]

The Theme Color (CSS) section at https://gcushen.github.io/hugo-academic-demo/post/getting-started/ explains how to override the CSS style without directly editing Academic's files.

It should be possible to override the CSS in a similar way to Chas mentioned, except editing it so that images appear in their exact size, for example. Then you can control the image dimensions for each post as they can be set to the uploaded image size.

[pat-s]

Thanks for the hints guys. I got it working.

First, create a personal hugo-academic.css in static/css/. Then modify line 109 (referring to the original hugo-academic.css) from the copied huge-academic.css:

img,
video {
  height: auto;
  max-width: 100%;
  display: block;
}

to

video {
  height: auto;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

This results in a nicely sized and centered post header image

[jananiravi]

@pat-s @gcushen if I had to change the size of the banner images under posts/ or publications/, which ones must I change? I tried adjusting what seemed like an appropriate parameter: max-width but it made little difference. Any suggestions?

I created a copy of academic.css in /static/css/
Thanks!

[crazyhottommy]

I find I have to modify the css at ./themes/hugo-academic/layouts/partials/css/academic.css
cp the css to static/css/ and then modify does not work for me.

[gcushen]

FYI that method is not best practice. Custom styles are documented here: https://sourcethemes.com/academic/docs/customization/#customize-style-css

[samjett247]

Thank you @pat-s for the awesome answer! Saved me a ton of time :)