Resize an image

[jehoshua7]

I have been using the following markdown in another theme to re-size an image

![Tux, the Linux mascot](/images/tux.png?width=20pc "Photo by tux")

Is there another method in this theme to do an image resize ? Also, the comment/title of "Photo by tux" doesn't appear when the mouse is hovered (see https://www.digitalocean.com/community/tutorials/markdown-markdown-images for an example)

[razonyang]

This theme doesn't provide any tricks for resizing images so far.

[jehoshua7]

@razonyang - thanks. I have added a question at https://discourse.gohugo.io/t/resize-an-image-with-markdown/34833

[razonyang]

I'm sure that it is a feature of learn theme. If you take a close look at the source code(CTRL+U), you'll find that the image has not been resized yet, images were processed by JS.

But I think that is a good feature to have.

[jehoshua7]

@razonyang - Thanks, I have just seen #216

[teppos]

Oh cool, I was just searching for this feature in this theme. 👍

[razonyang]

FYI @teppos. This feature was implemented by #216.

[teppos]

Nice! Have to try it today.

[teppos]

Hi,

Just tested it and seems to work fine. Good work! 👍

Though I noticed the image is just styled to look smaller on the page.
If you use (many) large images on the page it could potentially affect page loading time in the end.

But you could resize it using Hugos Image processing to get smaller image sizes instead.

I experimented in themes\hugo-theme-bootstrap\layouts\partials\helpers\image.html with it and got it to work, see gist

When an image is not found as pageResource it will not resize it just style it as earlier.
As I mentioned, I just experimented with it. maybe there is a better/cleaner way to do it too.

[razonyang]

Yep, currently, it just adds the inline style to resize images.
Are you willing to submit a PR for improving it? So that git history mark this contribution credited by you.