Image width in Markdown editor #1034

New Issue

OVERLORD · 2026-02-04T23:30:55+03:00

OVERLORD commented

2026-02-04 23:30:55 +03:00

Originally created by @alex-phillips on GitHub (Feb 8, 2019).

Describe the feature you'd like
Be able to adjust image size (width / height) via the markdown editor

Describe the benefits this feature would bring to BookStack users
Markdown can already do just about everything the WYSIWYG editor can - adjusting image sizes would bring that a bit closer.

Originally created by @alex-phillips on GitHub (Feb 8, 2019). **Describe the feature you'd like** Be able to adjust image size (width / height) via the markdown editor **Describe the benefits this feature would bring to BookStack users** Markdown can already do just about everything the WYSIWYG editor can - adjusting image sizes would bring that a bit closer.

OVERLORD added the > Markdown Editor 🔨 Feature Request labels 2026-02-04 23:30:55 +03:00

OVERLORD commented

2026-02-04 23:30:58 +03:00

@ssddanbrown commented on GitHub (Feb 9, 2019):

Hi @alex-phillips,
Thanks for the suggestion.
I'm not sure I'd like to add UI elements for this, I'd prefer to keep the markdown editor controls fairly limited to be honest.

You could currently use HTML for such cases instead of markdown:

<img src="/my/image.jpg" width="400">

@ssddanbrown commented on GitHub (Feb 9, 2019): Hi @alex-phillips, Thanks for the suggestion. I'm not sure I'd like to add UI elements for this, I'd prefer to keep the markdown editor controls fairly limited to be honest. You could currently use HTML for such cases instead of markdown: ``` <img src="/my/image.jpg" width="400"> ```

OVERLORD commented

2026-02-04 23:31:00 +03:00

@alex-phillips commented on GitHub (Feb 9, 2019):

@ssddanbrown I wasn't suggesting UI elements to control it, but perhaps some syntax you can add to the markdown tag itself. An example of how other markdown parsers handle this:

![](./pic/pic1_50.png =100x20)
![](./pic/pic1_50.png | width=100)

If not, I can just use the raw HTML as well. No problem. Thanks for the great product!

@alex-phillips commented on GitHub (Feb 9, 2019): @ssddanbrown I wasn't suggesting UI elements to control it, but perhaps some syntax you can add to the markdown tag itself. An example of how other markdown parsers handle this: `![](./pic/pic1_50.png =100x20)` `![](./pic/pic1_50.png | width=100)` If not, I can just use the raw HTML as well. No problem. Thanks for the great product!

OVERLORD commented

2026-02-04 23:31:03 +03:00

@abulgatz commented on GitHub (Feb 18, 2019):

Pandoc has a nice syntax for this:

![image](foo.jpg){#id .class width=30 height=20px}

The #id and .class functionality would also be nice.

See pandoc's manual here.

@abulgatz commented on GitHub (Feb 18, 2019): Pandoc has a nice syntax for this: ~~~ ![image](foo.jpg){#id .class width=30 height=20px} ~~~ The `#id` and `.class` functionality would also be nice. See pandoc's manual [here](https://pandoc.org/MANUAL.html#images).

OVERLORD commented

2026-02-04 23:31:07 +03:00

@abulgatz commented on GitHub (Sep 17, 2020):

Looking through the code, is markdown-it actually being used to render both the live markdown preview while editing and the final saved HTML?

If so, could we use extensions markdown-it-attrs, which uses the syntax:

# header {.style-me}
paragraph {data-toggle=modal}

to output this html:

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>

Another nice extension would be markdown-it-container, which uses syntax:

::: warning
*here be dragons*
:::

to output this html:

<div class="warning">
<em>here be dragons</em>
</div>

@abulgatz commented on GitHub (Sep 17, 2020): Looking through the code, is [markdown-it](https://github.com/markdown-it/markdown-it) actually being used to render both the live markdown preview while editing *and* the final saved HTML? If so, could we use extensions [markdown-it-attrs](https://www.npmjs.com/package/@gerhobbelt/markdown-it-attrs), which uses the syntax: ~~~ # header {.style-me} paragraph {data-toggle=modal} ~~~ to output this html: ~~~ <h1 class="style-me">header</h1> <p data-toggle="modal">paragraph</p> ~~~ Another nice extension would be [markdown-it-container](https://www.npmjs.com/package/@gerhobbelt/markdown-it-container), which uses syntax: ~~~ ::: warning *here be dragons* ::: ~~~ to output this html: ~~~ <div class="warning"> <em>here be dragons</em> </div> ~~~

OVERLORD commented

2026-02-04 23:31:10 +03:00

@kenswampy commented on GitHub (Nov 9, 2022):

![imgname]....etc.etc.

@kenswampy commented on GitHub (Nov 9, 2022): <style> img[alt=imgname] { width: 80%; } </style> ![imgname]....etc.etc.

OVERLORD commented

2026-02-04 23:31:12 +03:00

@TheMinester commented on GitHub (Oct 31, 2024):

Would love it as well.

@TheMinester commented on GitHub (Oct 31, 2024): Would love it as well.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1034