hedgedoc / react-client

The frontend of the upcoming version 2.0
https://hedgedoc.dev
GNU Affero General Public License v3.0
104 stars 13 forks source link

improve handling of image size in slides #1115

Closed zeigerpuppy closed 2 years ago

zeigerpuppy commented 3 years ago

Which part of the project should be enhanced? Image size markdown syntax to handle sizing of images in slides.

Is your enhancement request related to a problem? Please describe. images included in slides often exceed the slide boundaries

There is currently an option to size images using the syntax:

![An image](images/an_image.jpg =widthxheight) 

but this is limited, in that other styling may be necessary for images and should probably be separated out from the image URL location

Describe the solution you'd like There are multiple markdown options suggested here: https://github.com/hakimel/reveal.js/issues/1349 including:

css in html

![An image](images/an_image.jpg) <!-- .element height="50%" width="50%" -->

kramdown syntax

![test image size](/img/post-bg-2015.jpg){:class="img-responsive"}
![test image size](/img/post-bg-2015.jpg){:height="50%" width="50%"}

Describe alternatives you've considered Image size can be controlled by using HTML tags and the inline size in the URL field but this is cumbersome and difficult for users unfamiliar with HTML.

Additional context This enhancement may also assist with other image styling and position issues. In particular, the kramdown-type syntax would permit using classes for image position.

ErikMichelson commented 3 years ago

Hi @zeigerpuppy,

in HedgeDoc version 1 we let reveal.js handle the markdown-to-html conversion. As you pointed out the reveal.js markdown parser has no support for the =widthxheight syntax. We won't change this behaviour in version 1.

In HedgeDoc version 2 we will convert the markdown with the same rendering engine for slides as for regular notes. So with version 2 you'll have the ability to use the =widthxheight syntax. Please understand that we already have one ability to define image sizes and allow custom HTML to be used, so we won't implement one of your suggested syntaxes.

zeigerpuppy commented 3 years ago

Hi @ErikMichelson

That makes sense, I'll have to dig into the conversion routines in more detail, getting the images to scale properly seems to be a bit of a thorny problem, especially preventing vertical overflow.

see:

For reference, the markdown parsing appears to be handled at the moment (in 1.7) by:

ErikMichelson commented 2 years ago

With the current state of the frontend for HedgeDoc 2.0, we have support for both of these syntax variants:

![An image](images/an_image.jpg) <!-- .element height="50%" width="50%" -->

![An image](images/an_image.jpg =widthxheight) 

You can test it out at https://hedgedoc.dev.