README

使用此TYPO3扩展，您可以在后台创建响应式图像地图。本扩展包含一个图像编辑器，可用于向图像添加区域和信息。

示例

示例 1：默认输出

示例页面TS的配置前端输出

示例 2：SVG动画

在此示例中，焦点区域通过SVG进行动画处理。附加信息将在图像旁边稍后显示。

管理员指南

安装

通过composer安装

composer require blueways/bw-focuspoint-images

包含TypoScript

在扩展管理器中启用扩展并包含 静态TypoScript模板 或手动包含设置和常量。
定义自己的向导字段

没有定义 默认字段！可以在PageTS部分找到一个具有工作前端输出的示例。

使用方法

将新内容元素“具有焦点点的图像”添加到任何页面，链接新图像并开始添加您的焦点区域。

配置

PageTS

要配置焦点点向导中的字段，请使用以下 PageTS 设置。您可以在向导中选择文本、多行文本、选择和链接输入。

此示例配置用于生成示例 1 中显示的输出

mod.tx_bwfocuspointimages.settings.fields {

    name {
        title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.name
        type = text
    }

    description {
        title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.description
        type = textarea
    }

    color {
        title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color
        type = select
        options {
            red = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color.red
            green = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color.green
            blue = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color.blue
        }
    }

    link {
        title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.link
        type = link
    }

}

调整链接向导

您可以根据需要自定义链接向导的显示。使用额外的 linkPopup 更改允许的文件扩展名列表、显示的链接字段或链接选项。配置方式与链接输入类似。

mod.tx_bwfocuspointimages.settings.fields {

    email {
        title = Hide all wizard tabs but email
        type = link
        linkPopup {
            blindLinkOptions = file, folder, page, spec, telephone, url
        }
    }

    pdf {
        title = Only files of .pdf or .docx extension
        type = link
        linkPopup {
            blindLinkFields = pdf, docx
            blindLinkOptions = email, folder, page, spec, telephone, url
            blindLinkFields = class, params, target, title
        }
    }

}

常量

通过常量设置自己的路径以覆盖模板

plugin.tx_bwfocuspointimages {
    view {
        templateRootPath =
        partialRootPath =
        layoutRootPath =
    }
}

要使用 fluid_styled_content 的默认渲染，将布局和部分路径设置为您的 styles.content 设置，并在您的 FocuspointImage 模板文件中使用默认布局。

开发者指南

表 sys_file_references 在 focus_points 字段上进行了扩展。该字段用于以json格式保存在后台编辑器中做出的设置。

要使用FAL图像在其他内容元素中使用编辑器，请使用以下TCA来激活调色板

$GLOBALS['TCA']['tt_content']['types']['your_list_type']['columnsOverrides'] = [
    'assets' => [
        'config' => [
            'overrideChildTca' => [
                'types' => [
                    \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => [
                        'showitem' => 'focus_points,--palette--;;filePalette'
                    ],
                ],
                'columns' => [
                    'uid_local' => [
                        'config' => [
                            'appearance' => [
                                'elementBrowserAllowed' => $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
                            ],
                        ],
                    ],
                ],
            ]
        ]
    ]
];

此片段假定通过 assets 列进行引用。根据您的需要修改此设置。

要解码JSON数据并在模板中使用信息，请使用 FocuspointProcessor

tt_content.your_list_type {
	dataProcessing {
		15 = Blueways\BwFocuspointImages\DataProcessing\FocuspointProcessor
		15 {
			references.fieldName = assets
			as = image
		}
	}
}

升级

到版本 4.x

TypoScript路径已更改
- 旧： EXT:bw_focuspoint_images/Configuration/setup.txt
- 新： EXT:bw_focuspoint_images/Configuration/setup.typoscript

到版本 3.x

在版本 3.0.0 中，焦点点字段的配置已移动到 PageTS，以便在页面树中可能进行不同的设置。

旧TypoScript： plugin.tx_bwfocuspointimages.settings.fields..

新PageTS： mod.tx_bwfocuspointimages.settings.fields..

只需将现有配置移动到PageTS，并将前缀从 plugin 调整为 mod。

贡献

此扩展由Maik Schneider制作：请随时贡献！

Github存储库

感谢 blueways 和 XIMA！

blueways / bw-focuspoint-images

维护者

详细信息