Обрежьте и уменьшите квадратные изображения в галерее папок с изображениями в TYPO3 LTS9, и у вас все еще есть Исходное изображение при увеличении клика? - PullRequest
Новая
       9

Обрежьте и уменьшите квадратные изображения в галерее папок с изображениями в TYPO3 LTS9, и у вас все еще есть Исходное изображение при увеличении клика?

0 голосов
/ 20 ноября 2018

Раньше было расширение для старых версий 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}"
>

Ответы [ 2 ]

0 голосов
/ 25 ноября 2018

После долгих изменений в моих шаблонах, которые не соответствовали моим ожиданиям, я нашел идеальное решение для своих нужд.Я был удивлен, насколько просто это было в конце, даже не изменив ничего в оригинальных шаблонах 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'});
0 голосов
/ 20 ноября 2018

Это можно сделать с помощью соответствующих шаблонов.
Если раньше рендеринг выполнялся с помощью 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

Скопируйте эти файлы на свое место (site-extension или fileadmin) и измените разметку, чтобы отобразить небольшой квадратный эскиз, связанный с полным изображением.Используйте любую библиотеку для него, как вам нравится.
Не забудьте добавить свой путь к шаблону / частичный путь к настройкам FSC.

Если вы посмотрите на этот фрагмент, вы найдетеусловие, которое проверяет {data.image_zoom}.Если установлено, небольшое встроенное изображение, отображаемое частично, Media/Rendering/Image.html связано с увеличенной версией.
Вы найдете dimensions и settings, которые определяют миниатюру.Так что вам нужна только правильная конфигурация для получения квадратных миниатюр.

...