HUGO

Show larger images with one click

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

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

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())

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.