Варианты обрезки изображения tt_content - PullRequest
Новая
       8

Варианты обрезки изображения tt_content

0 голосов
/ 28 июня 2018

Я впервые попробовал новую функцию управления изображениями в TYPO3 и наткнулся на некоторые проблемы. Я использую TYPO3 8.7.16. Обработка изображений работает правильно (проверено в инсталляционном инструменте с использованием ImageMagick).

В целях тестирования я переопределил TCA для tt_content: 

$GLOBALS['TCA']['tt_content']['columns']['image']['config'] ['overrideChildTca']['columns']['crop'] = [
    'config' => [
        'cropVariants' => [
            'desktop' => [
                'title' => 'Desktop',
                'selectedRatio' => '4:3',
                'allowedAspectRatios' => [
                    '4:3' => [
                        'title' => '4:3',
                        'value' => 4 / 3,
                    ],
                ],
            ],
            'tablet' => [
                'title' => 'Tablet',
                'selectedRatio' => '16:9',
                'allowedAspectRatios' => [
                    '16:9' => [
                        'title' => '16:9',
                        'value' => 16 / 9,
                    ],
                ],
            ],
            'mobile' => [
                'title' => 'Mobile',
                'selectedRatio' => '2:3',
                'allowedAspectRatios' => [
                    '16:9' => [
                        'title' => '2:3',
                        'value' => 2 / 3,
                    ],
                ],
            ],
        ],
    ],
];

Когда я использую редактор для манипулирования изображениями, я могу обрезать различные форматы, и после принятия манипуляции я вижу обрезанные изображения в качестве предварительного просмотра в элементе содержимого:

After manipulating the images

После сохранения элемента содержимого я вижу следующее (обрезанные изображения больше не отображаются):

After saving the content element

Это ошибка? Но сейчас это меня не особо беспокоит.

Теперь я попытался показать, например, обрезанное изображение рабочего стола в веб-интерфейсе. Я скопировал часть Media / Rendering / Image.html и изменил содержимое на: 

<f:image image="{file}" cropVariant="desktop" width="480" alt="{file.alternative}" title="{file.title}" />

Я думал, что этого достаточно, чтобы показать обрезанное изображение, но этого не было. Я вижу оригинальный файл. Когда я отлаживаю ссылку на файл, я вижу, что конфигурация обрезанных изображений правильно хранится в sys_file_reference:

debugging information

Теперь я понятия не имею, что делать, чтобы обрезать изображения во внешнем интерфейсе.

Есть идеи?

Редактировать: Теперь я нашел проблему, у меня были некоторые проблемы с ImageMagick, поэтому обрезанные изображения не могут быть созданы.

1 Ответ

0 голосов
/ 12 июля 2018

я бы порекомендовал вам посмотреть статью из Clickstorm CropVariant Images

Вы можете легко получить доступ к кроп-вариантам с помощью srcset.

<f:if condition="{files}"> <f:image src="{image.id}" treadIdAsReference="1" srcset="{f:uri.image(image:image.id,width:'2500',height:'816',cropVariant:'desktop')}" alt="{files.0.alternative}" /> </f:if>

Может быть, вы используете элемент изображения следующим образом: <picture> <source media="(min-width: 1400px)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'1400',cropVariant:'default')}"> <source media="(max-width: 1399px) and (min-width:1025px)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',cropVariant:'default-md')}"> <source media="(max-width: 1024px) and (orientation:portrait)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'768',cropVariant:'tablet-portrait')}"> <source media="(max-width: 1024px) and (orientation:landscape)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'768',cropVariant:'tablet-landscape')}"> <source media="(max-width: 667px) and (orientation:portrait)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'667',cropVariant:'smartphone-portrait')}"> <source media="(max-width: 667px) and (orientation:landscape)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'667',cropVariant:'smartphone-landscape')}"> <img src="{f:uri.image(crop: image.crop, src: image.id, cropVariant:'default')}"title="{image.title}" alt="{image.alternative}" /> </picture>

Я надеюсь, что это поможет вам начать работу над частью Frontend.

...