Change:
<ins> {{ $src := (.Page.Resources.GetMatch (printf "**%s*" (.Get "src"))) }} {{ $clickToZoom := .Get "clicktozoom" }} <figure{{ with .Get "class" }} class="{{ . }} {{ if $clickToZoom }}clickable-zoom{{ end }}"{{ end }}> {{- if .Get "link" -}} <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}> {{- end }} <img src="{{ if $src }}{{ $src.RelPermalink }}{{ else }}{{ .Get "src" }}{{ end }}" {{- if or (.Get "alt") (.Get "caption") }} alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}" {{- end -}} {{- with .Get "width" }} width="{{ . }}"{{ end -}} {{- with .Get "height" }} height="{{ . }}"{{ end -}} /> <!-- Closing img tag --> {{- if .Get "link" }}</a>{{ end -}} {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}} <figcaption> {{ with (.Get "title") -}} <h4>{{ . }}</h4> {{- end -}} {{- if or (.Get "caption") (.Get "attr") -}}<p> {{- .Get "caption" | markdownify -}} {{- with .Get "attrlink" }} <a href="{{ . }}"> {{- end -}} {{- .Get "attr" | markdownify -}} {{- if .Get "attrlink" }}</a>{{ end }}</p> {{- end }} </figcaption> {{- end }} </figure> </ins>  No newline at end of file

Discussion:
This is a Feature Request Some images in concepts sections are quite detailed but in normal scope the texts inside of them look small and unreadable. Can we add feature for the images to pop up on clicking? It will add to the user experience as well as ease the pain of zooming out the page in whole. What would you like to be Feature to Pop up images on click Why is this needed The texts and details seem too small to read. Comments Reference of some of the pages where the issue arises: Example to the pop-up view for image:
/area web-development /kind feature
/area web-development Something similar to https://medium- ?
/retitle Enable click-to-zoom for some diagrams and other images
/triage accepted /priority backlog /lifecycle frozen
Thanks , I investigated on hugo's documents regarding any shortcode or feature that provide this functionality. but till now haven't found any.
For now I'll investigate more and try to find out what can work so assigning it to myself /assign
A couple of hints:
There is one more way like the above reference link mentioned, If we put full-resolution images in other paths and do this : It is in case we want minimal change in the code. I'm going to add ways here as I find so the community can vote or suggest which will be better for a clean code
one is a good reference for same functionality with example. I'll try both and raise a PR after that.
We using vector images.
This issue has not been updated in over 1 year, and should be re-triaged. You can: Confirm that this issue is still relevant with (org members only) Close this issue with For more details on the triage process, see /remove-triage accepted
My apologies,Due to bandwidth issue couldn't work on this, It's open for other people to self-assign.
This could be a positive and beneficial addition to the website. Worth doing (re-triaging as accepted). /triage accepted /lifecycle frozen
Let me see if I can assist with this. Edit: I request review and feedback on pull request