How to set size/rotate image in jekyll?

Question

How to set size of image in jekyll markdown?

![steam-fish-1]({{ "/assets/steam-fish-1.jpeg" | absolute_url }})

I'm using jekyll minima. Using

![steam-fish-1]({{ "/assets/steam-fish-1.jpeg" | absolute_url }} =250x)

from Changing image size in Markdown doesn't work. If possible, I would like to know how to rotate image as well.

score 22 · Answer 1 · answered Feb 04 '21 at 21:57

22

Jekyll seems to accept attribute lists. You can set the size of an image as follows:

![steam-fish-1](/assets/steam-fish-1.jpeg){: width="250" }

(or use height="250"). The property value is in pixels, and should (according to the HTML spec) not have explicit units.

answered Feb 04 '21 at 21:57

Cris Luengo

55,762
10
62
120

1

For me, this was the solution. Set a CSS id like this and then change the `width` or `max-width` per CSS. – Mario Codes Mar 11 '21 at 11:14
Best solution for me adding {: width="250" } to the Markdown statement. Works fine! @Cris Luengo – Hans Ratzinger Nov 06 '21 at 18:45

score 3 · Answer 2 · answered Aug 01 '19 at 22:59

Markdown doesn't have built in support for image-sizes, so the only real solution is to use a little HTML inside your markdown. Given that, my jekyll-image-size plugin can do the resizing you need without any CSS.

Example:

<!-- template -->
{{ /assets/steam-fish-1.jpeg:img?width=250 alt='steam-fish-1' }}

<!-- output -->
<a href="/assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>

(Where YYY is the actual, proportionally scaled height of your image.)

If you need the absolute_url filter:

<!-- template -->
<a 
  href={{ "/assets/steam-fish-1.jpeg" | absolute_url }} 
  {{ /assets/steam-fish-1.jpeg:props?width=250 }} 
  alt='steam-fish-1'
>

<!-- output -->
<a href="http://test.com/assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>

For rotating your images, would it make sense to just rotate the image file itself?

It does not work for me. jekyll-image-size documentation say that you need to use `{% imagesize source:img %}`, but you use `{{ source:img }}`. Did I something miss? — Joter, Aug 18 '21 at 10:16

score 0 · Answer 3 · answered Jan 01 '19 at 05:34

0

If there is no way to include a size/rotation attribute to a Jekyll generated HTML code (as illustrated here, see the comments)... there is always the CSS route.

See "Resize image proportionally with CSS?": you could add a CSS stylesheet to set the size of your picture. Or even rotate it.

answered Jan 01 '19 at 05:34

VonC

1,262,500
529
4,410
5,250

Thanks! I don't understand very well how to create a CSS file in Jekyll? If you can give more specific steps it'd be great. – ZHU Jan 01 '19 at 17:07
@ZHU Sure, you can start with https://help.github.com/articles/customizing-css-and-html-in-your-jekyll-theme/ – VonC Jan 01 '19 at 20:27

score -1 · Answer 4 · answered Feb 25 '22 at 07:33

-1

With jekyll-image-size, should use

<!-- template -->
{% imagesize /assets/steam-fish-1.jpeg:img?width=250 alt='steam-fish-1' %}

<!-- output -->
<a href="assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>

answered Feb 25 '22 at 07:33

sbkm

107
5

This can only be done in a template, not in markdown content. – Matt Sephton Jul 01 '23 at 16:20

score -1 · Answer 5 · answered Jan 10 '23 at 05:59

-1

Like this

![Load](/blog/assets/images/blog/grpc/csharp2.png){:width="100%"}

answered Jan 10 '23 at 05:59

Christian Findlay

6,770
5
51
103

How to set size/rotate image in jekyll?

5 Answers5