Change:
<ins> // The page and script is loaded successfully $(document).ready(function() { // Function to handle hover over <figure> elements function handleFigureHover() { // Only change cursor to zoom-in if figure has 'clickable-zoom' class if ($(this).hasClass('clickable-zoom') && !$(this).hasClass('figure-fullscreen-content')) { $(this).css('cursor', 'zoom-in'); } } // Attach hover event to <figure> elements with 'clickable-zoom' class $('figure.clickable-zoom').hover(handleFigureHover, function() { // Mouse out - revert cursor back to default $(this).css('cursor', 'default'); }); // Attach click event to <figure> elements with 'clickable-zoom' class $('figure.clickable-zoom').click(function() { var $figure = $(this); // Check if the figure has 'clickable-zoom' class if ($figure.hasClass('clickable-zoom')) { var $img = $figure.find('img'); // Get the <img> element within the clicked <figure> // Toggle 'figure-zoomed' class to scale the image $img.toggleClass('figure-zoomed'); // Create a full-screen overlay var $fullscreenOverlay = $('<div class="figure-fullscreen-overlay"></div>'); // Clone the <img> element to display in full-screen var $fullscreenImg = $img.clone(); $fullscreenImg.addClass('figure-fullscreen-img'); // Append the full-screen image to the overlay $fullscreenOverlay.append($fullscreenImg); // Create a close button for the full-screen overlay var $closeButton = $('<span class="figure-close-button">&times;</span>'); $closeButton.click(function() { // Remove the full-screen overlay when close button is clicked $fullscreenOverlay.remove(); $('body').css('overflow', 'auto'); // Restore scrolling to the underlying page // Remove 'figure-zoomed' class to reset image scale $img.removeClass('figure-zoomed'); }); $fullscreenOverlay.append($closeButton); // Append the overlay to the body $('body').append($fullscreenOverlay); // Disable scrolling on the underlying page $('body').css('overflow', 'hidden'); // Close full-screen figure when clicking outside of it (on the overlay) $fullscreenOverlay.click(function(event) { if (event.target === this) { // Clicked on the overlay area (outside the full-screen image) $fullscreenOverlay.remove(); $('body').css('overflow', 'auto'); // Restore scrolling to the underlying page // Remove 'figure-zoomed' class to reset image scale $img.removeClass('figure-zoomed'); } }); } }); }); </ins>

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