Crop and square thumbnails on image folder gallery in TYPO3 LTS9 and still have Original Image on click-enlarge? - thumbnails

Question

There used to be an extension for older TYPO3 versions. How is this to achieve this on a per page basis in TYPO3 LTS9?
Added:
<f:for each="{variants}" key="name" as="variant">
<f:variable name="breakpoint">{variant.breakpoint as integer}</f:variable>
<f:variable name="width">{variant.width as integer}</f:variable>
<f:if condition="{width}">
<source data-variant="{name}" data-maxwidth="{width}" {f:if(condition: breakpoint, then: ' media="(min-width: {breakpoint}px)" ' )}srcset="{f:uri.image(image: file, cropVariant: name, maxWidth: width)}">
</f:if>
</f:for>
<img src="{f:uri.image(image: file,
cropVariant: 'default',
maxWidth: variants.default.width
)}"
title="{file.title}"
alt="{file.alternative}"
>

Answer 1

That can be done with the appropriate templating.
While earlier the rendering was done with typoscript, nowadays the rendering is done with fluid.
You probably use Fluid Styled Content (FSC), this is an system extension and has its original templates at typo3_src/typo3/sysext/fluid_styled_content/Resources/Private/...
Beyond Templates you will find Image.html, Textmedia.htmland Textpic.html,
Those will call the Partial Media/Type/Image.html
Copy those file(s) into your place (site-extension or fileadmin) and change the markup to show a small square thumbnail which is linked to the full image. Use any library for it as you like.
Don't forget to add your template-path /partial-path to the FSC settings.
If you look into this partial you will find a condition which checks for {data.image_zoom}. If set the small inline image rendered in partial Media/Rendering/Image.html is linked to a bigger version.
You will find dimensions and settings which decide the thumbnail. So you only need the correct configuration to get square thumbnails.

Answer 2

After a lot of tweaking in my templates that would not work to my expectations, I came up with the perfect solution for my needs. I was astonished how simple it was in the end, without even changing anything in the original bootstrap_package templates:
I set a condition for pages I want to have square thumbs
[globalVar = TSFE:id=10, TSFE:id=20, TSFE:page|pid=30]
page.includeCSS {
custom_css = fileadmin/site/Resources/Public/Css/custom.css
}
page.includeJSFooter{
scripts = fileadmin/site/Resources/Public/JavaScript/Dist/square_thumbs.js
}
[end]
css:
picture img{
object-fit: cover;
}
js:
var cw = $('picture img').width();
$('picture img').css({'height':cw+'px'});