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.

Cris Luengo · Accepted Answer · 2021-02-04 21:57:46Z

40

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 4, 2021 at 21:57

Cris Luengo

61.4k10 gold badges75 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mario Codes Over a year ago

For me, this was the solution. Set a CSS id like this and then change the width or max-width per CSS.

Hans Ratzinger Over a year ago

Best solution for me adding {: width="250" } to the Markdown statement. Works fine! @Cris Luengo

Altair7852 Over a year ago

By default Jekyll uses Kramdown renderer, which supports Inline Attributes

Shane Brinkman-Davis · Accepted Answer · 2019-08-01 22:59:08Z

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?

VonC · Accepted Answer · 2019-01-01 05:34:34Z

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.

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.

sbkm · Accepted Answer · 2022-02-25 07:33:00Z

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'>

This can only be done in a template, not in markdown content.

Christian Findlay · Accepted Answer · 2023-01-10 05:59:36Z

-1

Like this

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

answered Jan 10, 2023 at 5:59

Christian Findlay

7,8605 gold badges65 silver badges114 bronze badges

Collectives™ on Stack Overflow

How to set size/rotate image in jekyll?

5 Answers 5

3 Comments

1 Comment

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

2 Comments

1 Comment

Comments

Linked

Related