Show larger images with one click

[Karl]

Hi, I am doing a user guide for a backend site with a lot of screenshots of the application. To show large detail shots I do

<a id="ba-personal-02" style="visibility:hidden;"></a>
<a href="/imagenes-grandes/personal-02"><img src="/images/datos/personal-02.png" alt="imagen" align="left" style="max-width:100%;padding-top:20px;" /> </a>

and to come back I do

<a href="/datos/personal/#ba-personal-02"><img src="/images/datos/personal-03.png" alt="image" align="left" style="max-width:100%;padding-bottom:15px;" /></a> 

Is there a simpler way in Goldmark MD to go to the detail image and come back with one click? Hugo .80 Thanks

[alexandros]

Standard Markdown syntax applies.
[![alt](img-to-display)]](link-to-higher-rez)

Goldmark follows the Commonmark spec, so it’s not requirining anything special.
Also no way to enter inline styles through Markdown syntax, however these are strongly discouraged in this day and age. Also the align attribute is not supported by HTML5.

For outputting more complex HTML markup have a look at: Shortcodes | Hugo

[Karl]

Thanks, seems to work with

  [![imagen](/images/datos/personal-02.png)](/imagenes-grandes/personal-02)

and the trick from your other post

[![imagen](/images/datos/personal-03.png)](javascript:history.back())