在 WooCommerce/Wordpress 中为我的图像加框

Question

我是一名摄影师，目前正在尝试将我的网站从图像组合升级为功能齐全的电子商务网站。

我已经了解了我需要做的大部分 WooCommerce 类型的事情，并且我知道我想要什么。我觉得我已经可以实现我想要的了。

我遇到的大问题是动态地为我的待售图像添加框架。

我想要的一些例子： https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto

https://kenduncan.com/product/docklands-melbourne-vic-vx2101/

我可以制作 .PNG 框架，并在选择变体时将其动态添加到图像的背景中。

我有理由确定这是一个简单的编码事情，但我的编码经验为0。

任何帮助都会很棒！我看不到一个简单的插件来完成我想要的事情，而且我也看不到任何现有的插件或主题可以添加此功能。

丹

Answer 1

您不需要直接编辑图像，我不推荐它，因为它需要更多的工作。 CSS 可以解决这个问题！

既然您说您正在使用 woocommerce，我就将目标定位在单个产品页面上图库中的默认 woocommerce 图像下方。

这是一个非常基本的相框 - 如果您愿意，您可以将其变得更酷（例如哑光）！

.woocommerce-product-gallery__image img { 
     border: 15px solid #666;
     padding: 10px;
}

将此代码添加到主题的自定义 CSS 字段中。

Answer 2

对于这样的东西https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto

您将需要一些 JavaScript。

1. 将框架 png 和所有框架变体上传到您的 WordPress 网站。
2. 为您的图像类提供可变大小的填充。
3. 在 JavaScript 代码中，替换图像元素的背景图像。确保您的背景设置为不重复。

可能需要进行一些 CSS 调整才能使其看起来完全符合您的要求。

Answer 3

我也计划在我的网站上使用它https://decrarts.com。但这不是通过简单的插件就能实现的。您需要聘请可以定制它的开发人员。可以在 upwork 或其他自由职业网站上联系许多经验丰富的开发人员，但请避免 Fiverr。