[FEATURE] Image enhancement

[cs-mshah]

Describe the feature you want 描述你的功能需求

It would be great to have resizable images and images aligned left or right, with still being able to write text towards the other side. Ideally support in the standard markdown image notation would be great to have instead of shorcodes with weird parameters. The images would also be easier to view in a tools such as obsidian for CMS.

Useful reference 有价值的参考

This is the kind of thing I am looking for: https://publish.obsidian.md/slrvb-docs/ITS+Theme/Image+Adjustments

[HEIGE-PCloud]

This looks interesting!

The "standard markdown image notation" supported by Hugo looks like this

![<image alt text>](path/to/image.jpg "<image title>")

How should we keep track of the alignment information in this case?

[cs-mshah]

Try parsing text after a pipe ( |) in the alt text section. We can start with basic support such as left, right, center and size specifications after giving a space like small, medium, large, normal, in terms of pixels (100x200), percent (50%).
Two links that I came across: hugo discourse
automatic-image-size-attributes-in-hugo

This is what the blog says:

"Hugo supports render hooks, which allow the user to override markdown rendering functionality. In particular we can provide a custom template and replace the default boring image rendering logic with our own smart size-attributes-providing one."

[HEIGE-PCloud]

Thanks for your suggestions. However, I wonder why this is a better idea than a custom shortcode? In my opinion, the resulting image syntax is

1. Not portable. The alt text breaks when you switch themes or copy it for other uses.
2. Introduce breaking changes to the theme. (What if I have already used the | symbol inside some of my alt text?)
3. Error prone. Try parsing the alt text by hand for arguments is problematic. (However, shortcode does the heavy lifting for us).
4. Still a new special syntax that's not in standard Markdown and users need to learn and adapt.

I am looking forward to hear more from you. Thanks.

[cs-mshah]

My take on it:

1. As the metadata is in alt text, it is still alt text in another theme. Also if they wanted the images to work in other themes, then this theme specific shortcode would certainly break. (even more in this case)
2. I really doubt if someone uses pipes in alt text other than for image alignment in standard markdown.
3. Yes parsing could be hard (I don't know) but I feel this syntax is much easier to use and a lot of markdown editors might support this form of extended markdown. It doesn't break stuff as it is still alt text! We could have a shortcode too, no issues with that.
4. I bet users will love it! Its just an additional feature which is completely optional. They'll have much greater control over how the text surrounds the image and easily manipulate the size of images in terms of percent/pixels/size-text.

I would really like this to be a feature in the upcoming releases. Can you just give a way in which we can do this (in the discussions section maybe).

[HEIGE-PCloud]

1. shortcode is actually portable. You can easily copy the shortcode through, or even release that as a package that's theme independent. See theme component.
2. That's quite common actually, something like City Sunset | Shoot in London | Shoot by iPhone can well be a widely used alt text format. The point is, you don't know (and should not make random guesses) about how the user use your product. If it is possible to do something, some one will do it.
3. Any examples of Markdown editor support for this syntax?
4. Maybe, maybe a lot of people love it, or maybe not. I think I might leave the thread here for a while. If anyone reading this has any opinion, do not hesitate to comment or leave an emoji reaction. For now, I might extend the image shortcode to support this first, and it's quite straightforward to cherrypick that change to the image render hook.

[HEIGE-PCloud]

As a side note, I just discovered this https://pandoc.org/MANUAL.html#extension-link_attributes ,which worts with Jekyll and Kramdown.

I would say this looks much nicer and reasonable, maybe this issue actually belongs to Hugo for adding additional syntax support for image.

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

[cs-mshah]

I think you can go ahead and create the shortcode first, and in the discussions section mention how to change the image render hook. I personally didn't like the pandoc thing as that markdown won't be supported in other editors/themes.

Yes I agree that pipes could be used by people. Pipe was just an idea. we could have some special delimiter (for example [alt text |^ left](/images/my_image.png)). We can create specific rules for parsing the attributes like they should be space separated or in quotes or have multiple delimiters for multiple attributes. [alt text || #id .class width=30 height=20px](/image/path) which you mentioned above can be in the alt text part after the special delimiter like this.

Some possible special delimiters:

• || double pipes (or a pipe for every attribute)
• |$ pipe dollar
• ^^ double caret

The benefit of using this in alt text is that alt text doesn't appear anywhere except for when the image is not displayed. Also the pipe format is supported by obsidian, which can be used as an amazing CMS for a blog. This would create a perfect solution.

[cs-mshah]

Further, for options, if we are able to support everything or most of https://publish.obsidian.md/slrvb-docs/ITS+Theme/Image+Adjustments, then this would be the most advanced theme for hugo that handles images in seamless way with support to a CMS - Obsidian. One would not have to bother about anything and simply use the same syntax and get the rendering in the editor itself. You might want to check out the CSS that the ITS theme has modified in order to support the attributes and what we might do in the DoIt theme.

The documentation has the CSS for Obsidian publish, which has CSS for rendering normal sites. It might be worth checking: https://publish.obsidian.md/slrvb-docs/ITS+Theme/Publish+Theme