在 TYPO3 LTS9 中的图像文件夹画廊中裁剪和方形缩略图并且在单击放大时仍然有原始图像？

Question

旧的 TYPO3 版本曾经有一个扩展。如何在 TYPO3 LTS9 中以每页为基础实现这一点？

已添加：

<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

这可以通过适当的模板来完成。
早期的渲染是用 typoscript 完成的，现在渲染是用 fluid 完成的。
您可能使用 Fluid Styled Content (FSC)，这是一个系统扩展，其原始模板位于 typo3_src/typo3/sysext/fluid_styled_content/Resources/Private/...

在 Templates 之后，您会发现 Image.html、Textmedia.html 和 Textpic.html、
那些将调用部分 Media/Type/Image.html

将这些文件复制到您的位置（站点扩展名或文件管理员）并更改标记以显示链接到完整图像的小方形缩略图。随意使用任何库。
不要忘记将您的模板路径/部分路径添加到 FSC 设置中。

如果您查看此部分内容，您会发现一个检查 {data.image_zoom} 的条件。如果设置部分 Media/Rendering/Image.html 中呈现的小内联图像链接到更大的版本。
您会发现决定缩略图的 dimensions 和 settings。所以你只需要正确的配置就可以得到正方形的缩略图。

Answer 2

在对我的模板进行了大量调整但无法达到我的预期后，我想出了满足我需求的完美解决方案。我很惊讶它最终是多么简单，甚至没有改变原始 bootstrap_package 模板中的任何内容：

我为想要方形缩略图的页面设置了条件

[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'});

在 TYPO3 LTS9 中的图像文件夹画廊中裁剪和方形缩略图并且在单击放大时仍然有原始图像？

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

thumbnails

typo3-9.x