imgix/magento

imgix 扩展程序,用于在 Magento 2/Adobe Commerce 中搜索和选择产品图片

维护者

详细信息

github.com/imgix/magento

源代码

问题

安装数量: 3,226

依赖项: 0

建议者: 0

安全性: 0

星标: 21

关注者: 11

分支: 1

开放问题: 1

语言:JavaScript

类型:magento2-module

1.1.4 2022-08-22 22:43 UTC

This package is auto-updated.

Last update: 2024-09-09 13:04:03 UTC


README

imgix logo

使用 imgix/magento 扩展程序为您的 Adobe Commerce(Magento)图片提供动力。启用后,您可以通过 imgix 搜索、选择和提供产品和 CMS 图片。已经是客户?下载扩展程序,并通过您的 imgix 控制台 中的 API 密钥启用它。新客户?创建账户

Version Downloads License

安装

您可以通过在根目录中运行以下命令来使用 composer 安装扩展程序:

composer require imgix/magento
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush

配置

安装 imgix 扩展程序后,用户需要使用 imgix API 密钥和参数预设配置扩展程序。从商店的管理员面板中,选择“商店”选项卡,然后在“设置”部分下选择“配置”。

Initial configuration

一旦进入配置页面,打开 imgix 选项卡,通过从“启用”字段中选择“是”来启用扩展程序。为了正常工作,此扩展程序需要一个有效的 API 密钥,这可以从用户的 imgix 账户中生成。

生成新的 API 密钥

首先,转到 imgix 控制台 并登录您的账户。如果您不是现有 imgix 用户,请按照以下步骤 设置您的账户部署您的第一个源。登录后,在右上角打开下拉菜单并单击“API 密钥”。

API keys menu

在此页面上,用户可以为其 Magento 实例创建特定的 API 密钥。单击“生成新密钥”按钮,输入密钥名称,并选择必要的权限(源和资产管理浏览)。完成后,单击“生成新 API 密钥”按钮并复制生成的密钥。

Generate an API key

返回 Magento 管理面板,将此新密钥粘贴到以下所示的“imgix API 密钥”字段中。

Enter your API key in Magento's Admin Panel

Example of what an imgix API key looks like

添加图像参数

API 密钥添加后,用户可以为产品图像的各种版本指定任意数量的 imgix 渲染参数。有关指定和结构化这些参数的介绍,请参阅我们的 服务图像 文档。用户还可以利用 imgix 沙盒,它允许快速和实时测试参数。

用户可以选择指定以下任何/所有图像大小中的参数

  • 默认图像:对应于产品的基图像大小
  • 小图像:对应于产品的小图像大小
  • 缩略图图像:对应于产品的缩略图图像大小

这些字段已预先配置为默认值,imgix认为这些值将适用于大多数用户。然而,用户仍然可以根据他们的期望结果更改这些值。设置完所有参数后,按下选择配置按钮以完成安装。

在产品中添加图像

配置步骤完成后,可以使用扩展向存储在Magento中的产品添加图片。转到产品页面(管理员侧边栏的“目录”>“产品”)并使用“添加产品”按钮创建新产品,或选择现有产品的“编辑”按钮。

Adding images to a product

在产品详情页,向下滚动到图片和视频属性部分。在这里,现在应该有一个添加imgix图片按钮。注意:如果未出现此类按钮,请确保安装步骤正确完成。

This is the button for adding an image

选择添加imgix图片按钮将打开一个模态窗口,显示用户的imgix源中的图片。用户可以通过点击左上角的源下拉菜单在源之间切换。用户可以选择在模态窗口底部的加载更多按钮浏览当前源中的更多图片。相反,用户也可以使用模态窗口顶部的搜索栏在所有资产中进行搜索。

Image selection

用户可以通过点击选择此视图中的一个或多个图片。用户会注意到所选图片周围有浅蓝色高亮。要取消选择图片,再次单击它,直到高亮消失。完成操作后,按下添加图片按钮将所选图片插入产品。

Almost finished adding an image

此时,用户可以选择保存以完成这些更改。

在页面中添加图像

除了产品图片外,imgix扩展还可以用于向页面和/或块添加图片。通过管理员侧边栏的内容标签转到页面或块编辑器,创建新页面/块或根据需要编辑现有页面/块。

注意:由于此扩展部分是为我们创建在页面构建器上,用户应确保他们使用此扩展的Magento版本为2.4.3及以后。

The page view in MAgento

要编辑现有页面,请按选择操作,然后选择编辑选项。在内容部分下,选择使用页面构建器编辑按钮。

Editing with Page Builder

Magento页面构建器,用户可以通过将组件(位于布局部分)拖动到页面上的所需位置来创建新的行/列组件。这是添加imgix图片的地方。之后,用户可以单击并拖动imgix图片组件到所需的行或列。

Editing with Page Builder

从这一点开始,用户可以遵循产品部分中的相同步骤浏览、搜索并将图片插入此组件。注意:在页面构建器的上下文中,每个组件只能添加一张图片。

Browsing images in Page Builder

Selecting an image in Page Builder

此时,可以通过关闭页面构建器并按屏幕右上角的保存按钮将图片保存到页面/块。查看下一部分(自定义图片)以了解在保存之前如何转换所选图片。

自定义图像

用户可以通过在鼠标悬停时选择带有齿轮符号的编辑按钮来修改组件中的所选图片。在“imgix图片配置”部分下,用户可以选择自定义显示的五个参数中的任何一个。

  • 宽度:设置图片的宽度
  • 高度:设置图片的高度
  • 格式:将图片转换为指定的格式
  • 自动:对图片执行一些基本优化
  • 裁剪:控制图像应该如何裁剪

一旦输入了这些配置中的任何数量,用户可以通过点击左上角的保存按钮来接受这些更改。

Saving your rendering API configuration

Example output of a saved image in Page Builder