madj2k/t3-media-utils

包含性能修复和一些辅助工具，用于sms_responsive_images

维护者

详细信息

github.com/skroggel/t3-media-utils

主页

源代码

问题

安装: 127

依赖项: 1

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

公开问题: 0

类型:typo3-cms-extension

v12.4.16-stable 2024-06-05 15:46 UTC

Requires

GPL-2.0+ c32a8babdc1ab5d91c51d2a69621e440739fbce4

TYPO3 CMSResponsvie Images

This package is auto-updated.

Last update: 2024-09-05 16:28:40 UTC

README

本扩展提供以下功能

  • 一些性能修复和改进，用于EXT:sms_responsive_images (sitegeist/sms-responsive-images)以及
  • 一些有用的ViewHelpers和可包含的部分，用于与媒体文件一起使用。

特性

  • 修复EXT:sms_responsive_images中图像上移的性能问题
  • 包含一个媒体部分，用于在自定义扩展中，并提供对EXT:sms_responsive_images默认设置的回退
  • 包含EXT:sms_responsive_images响应式图像的TypoScript配置，使用Bootstrap（仅限picture标签）
  • 一些有用的ViewHelpers，用于与媒体文件一起使用

安装

只需安装扩展并包含TypoScript配置。确保在EXT:sms_responsive_images（sitegeist/sms-responsive-images）的TypoScript配置之后包含它。如果您想使用Bootstrap的响应式图像TypoScript配置，只需将相应的配置包含到您的根模板中。

请确保在您的settings.php中添加"webp"作为允许的图像扩展

$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] = 'gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg,webp';

如何使用

与EXT:Mask一起使用

该扩展自动包含响应式图像配置到EXT:mask。这样，所有自定义内容元素都自动具有相应的设置。

如果您为自定义内容元素配置了默认设置，您还可以包含媒体文件的默认设置。只需按照以下结构进行TypoScript配置

tt_content.mask_your_element {
    settings {
    	[...]
        media {
            image {
                dimensions {
                    maxWidth = 650
                }
            }
            video {
				video {
					dimensions {
						width = 1370
						height= 771
					}
					additionalConfig {
					    autoplay = 1
						mute = 1
						loop = 0
						modestbranding = 1
					}
                }
            }
		}
    }
}

在这里，您还可以覆盖默认设置，例如，如果您想要为每个断点使用不同的裁剪变体

tt_content.mask_your_element {
    settings {

        [...]

        tx_smsresponsiveimages {

            loading = eager
            breakpoints {
                0 {
                    cropVariant = default
                }
                1 {
                    cropVariant = tablet
                }
                2 {
                    cropVariant = mobile
                }
            }
        }

    	[...]
    }
}

然后在内容元素中调用媒体部分，如下所示

<f:render partial="Utils/Media" arguments="{file: image, maxWidth: 1000, settings: settings}" />

例如，如果您设置了显式的maxWidth，则将使用此值，否则将使用TypoScript配置中的默认值。响应式图像的配置将自动应用。

可能存在这种情况，即您有一个自定义内容元素的多个样式，需要为媒体使用不同的默认设置。这可以通过通过扩展TypoScript配置并添加额外的子键来在设置之间切换来处理。示例

tt_content.mask_your_element {
    settings {
    	[...]
        media {

            small {
                image {
                    dimensions {
                        maxWidth = 650
                    }
                }
                video {
                    video {
                        dimensions {
                            width = 1370
                            height= 771
                        }
                        additionalConfig {
                            autoplay = 1
                            mute = 1
                            loop = 0
                            modestbranding = 1
                        }
                    }
                }
            }

            big {
                image {
                    dimensions {
                        maxWidth = 650
                    }
                }
                video {
                    video {
                        dimensions {
                            width = 1370
                            height= 771
                        }
                        additionalConfig {
                            autoplay = 1
                            mute = 1
                            loop = 0
                            modestbranding = 1
                        }
                    }
                }
            }
		}
    }
}

现在您可以在内容元素中调用媒体部分，使用所需设置的相应键。以下调用将加载"small"子键的默认设置

<f:render partial="Utils/Media" arguments="{file: image, maxWidth: 1000, settings: settings, settingsVariant: 'small'}" />

在基于TypoScript的FluidTemplates中使用

使用方式与EXT:mask相似。您只需在TypoScript中包含相应的设置和部分路径。在这里，您还可以覆盖默认设置，例如，如果您想为每个断点使用不同的裁剪变体。

lib.siteDefault {

    fluidTemplates {

        stage = FLUIDTEMPLATE
        stage {

            file = EXT:site_default/Resources/Private/FluidTemplates/Templates/Stage.html
            partialRootPaths.0 = EXT:site_default/Resources/Private/FluidTemplates/Partials/Stage/
            partialRootPaths.1 = EXT:site_default/Resources/Private/Mask/Frontend/Partials/
            partialRootPaths.1712245685 = {$plugin.tx_mediautils.view.partialRootPath}

            dataProcessing {
                10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                10 {
                    references {
                        table = pages
                        data = levelfield: -1, media, slide
                    }
                    as = media
                }
            }

            variables {
                pageTitle = TEXT
                pageTitle.data = page:title
            }

            settings.tx_smsresponsiveimages < lib.contentElement.settings.tx_smsresponsiveimages
            settings.tx_smsresponsiveimages {

                loading = eager
                breakpoints {
                    0 {
                        cropVariant = default
                    }
                    1 {
                        cropVariant = tablet
                    }
                    2 {
                        cropVariant = mobile
                    }
                }
            }
        }
    }
}

在您的自定义扩展中用于图像

基本上有两种方法

使用本扩展的部分，并仅覆盖您需要覆盖的值（推荐）

  1. 相应地扩展部分路径
tx_myextension {
    view {
        partialRootPaths {
            1712245685 = {$plugin.tx_mediautils.view.partialRootPath}
        }
    }
}
  1. 将全局设置合并到您的扩展设置中
tx_myextension.settings.tx_smsresponsiveimages < lib.contentElement.settings.tx_smsresponsiveimages
  1. 相应地使用部分，并根据需要添加其他设置（参见上面）
<f:render partial="Utils/Media" arguments="{image: image, width: 1000, settings: settings}" />

使用正常的ViewHelper，并将TypoScript-lib的值插入到每个参数中

<html xmlns:sms="http://typo3.org/ns/Sitegeist/SmsResponsiveImages/ViewHelpers" data-namespace-typo3-fluid="true">
<sms:media
	class="image-embed-item{f:if(condition: settings.tx_smsresponsiveimages.class, then: ' {lib.contentElement.settings.tx_smsresponsiveimages.class}')}"
	file="{file}"
	width="{dimensions.width}"
	height="{dimensions.height}"
	alt="{file.alternative}"
	title="{file.title}"
	srcset="{lib.contentElement.settings.tx_smsresponsiveimages.srcset}"
	lazyload="{lib.contentElement.settings.tx_smsresponsiveimages.lazyload}"
	placeholderSize="{lib.contentElement.settings.tx_smsresponsiveimages.placeholder.size}"
	placeholderInline="{lib.contentElement.settings.tx_smsresponsiveimages.placeholder.inline}"
	sizes="{lib.contentElement.settings.tx_smsresponsiveimages.sizes}"
	breakpoints="{lib.contentElement.settings.tx_smsresponsiveimages.breakpoints}"
	ignoreFileExtensions="{lib.contentElement.settings.tx_smsresponsiveimages.ignoreFileExtensions}"
	fileExtension="{lib.contentElement.settings.tx_smsresponsiveimages.fileExtension}"
	loading="{lib.contentElement.settings.media.lazyLoading}"
	decoding="{lib.contentElement.settings.media.imageDecoding}"
/>
</html>