From 6c9445804f130ded036eda181068a6711e92500a Mon Sep 17 00:00:00 2001 From: pini-girit Date: Mon, 20 Jul 2020 16:23:39 +0300 Subject: [PATCH 1/8] CLOUDINARY-275: Added page-builder support to allow CLD videos & picking from CLD ML --- Controller/Adminhtml/Ajax/RetrieveImage.php | 5 +++ .../Component/Form/Element/DataType/Media.php | 2 + composer.json | 2 +- etc/module.xml | 3 +- marketplace.composer.json | 2 +- view/adminhtml/layout/default.xml | 8 ++++ view/adminhtml/requirejs-config.js | 14 +++++++ view/adminhtml/templates/lazyload.phtml | 9 +++++ .../ui_component/pagebuilder_video_form.xml | 21 ++++++++++ .../js/form/element/validator-rules-mixin.js | 38 +++++++++++++++++++ .../web/js/cloudinary-lazyload.js | 16 ++++++-- .../web/js/jquery.lazyload.min.js | 0 12 files changed, 113 insertions(+), 7 deletions(-) create mode 100644 view/adminhtml/layout/default.xml create mode 100644 view/adminhtml/templates/lazyload.phtml create mode 100644 view/adminhtml/ui_component/pagebuilder_video_form.xml create mode 100644 view/adminhtml/web/js/form/element/validator-rules-mixin.js rename view/{frontend => base}/web/js/cloudinary-lazyload.js (76%) rename view/{frontend => base}/web/js/jquery.lazyload.min.js (100%) diff --git a/Controller/Adminhtml/Ajax/RetrieveImage.php b/Controller/Adminhtml/Ajax/RetrieveImage.php index c9a3e2e..4c5164c 100644 --- a/Controller/Adminhtml/Ajax/RetrieveImage.php +++ b/Controller/Adminhtml/Ajax/RetrieveImage.php @@ -17,6 +17,7 @@ use Magento\Framework\Validator\AllowedProtocols; use Magento\MediaStorage\Model\File\Validator\NotProtectedExtension; use Magento\MediaStorage\Model\ResourceModel\File\Storage\File as FileUtility; +use Magento\PageBuilder\Controller\Adminhtml\ContentType\Image\Upload as PageBuilderContentTypeUpload; use Magento\Store\Model\StoreManagerInterface; use Magento\Theme\Model\Design\Config\FileUploader\FileProcessor; @@ -196,6 +197,9 @@ protected function getBaseTmpMediaPath() case 'design_config_fileUploader': $baseTmpMediaPath = 'tmp/' . FileProcessor::FILE_DIR; break; + case 'pagebuilder_contenttype': + $baseTmpMediaPath = PageBuilderContentTypeUpload::UPLOAD_DIR; + break; case 'category_image': $baseTmpMediaPath = 'catalog/tmp/category'; break; @@ -213,6 +217,7 @@ protected function getLocalTmpFileName($remoteFileUrl) { $localFileName = Uploader::getCorrectFileName(basename($remoteFileUrl)); switch ($this->getRequest()->getParam('type')) { + case 'pagebuilder_contenttype': case 'design_config_fileUploader': case 'category_image': $localTmpFileName = DIRECTORY_SEPARATOR . $localFileName; diff --git a/Plugin/Ui/Component/Form/Element/DataType/Media.php b/Plugin/Ui/Component/Form/Element/DataType/Media.php index e627a05..d1de81c 100644 --- a/Plugin/Ui/Component/Form/Element/DataType/Media.php +++ b/Plugin/Ui/Component/Form/Element/DataType/Media.php @@ -49,6 +49,8 @@ public function afterPrepare(\Magento\Ui\Component\Form\Element\DataType\Media $ $type = 'design_config_fileUploader'; } elseif (strpos($uploaderConfigUrl, '/category_image/') !== false) { $type = 'category_image'; + } elseif (strpos($uploaderConfigUrl, '/pagebuilder/contenttype/') !== false) { + $type = 'pagebuilder_contenttype'; } else { $type = null; } diff --git a/composer.json b/composer.json index 0ef75df..357dbe2 100644 --- a/composer.json +++ b/composer.json @@ -2,7 +2,7 @@ "name": "cloudinary/cloudinary-magento2", "description": "Cloudinary Magento 2 Integration.", "type": "magento2-module", - "version": "1.13.0", + "version": "1.14.0", "license": "MIT", "require": { "cloudinary/cloudinary_php": "*" diff --git a/etc/module.xml b/etc/module.xml index 82b4af4..9df8e16 100644 --- a/etc/module.xml +++ b/etc/module.xml @@ -1,8 +1,9 @@ - + + diff --git a/marketplace.composer.json b/marketplace.composer.json index 518fed7..ed3dfd2 100644 --- a/marketplace.composer.json +++ b/marketplace.composer.json @@ -2,7 +2,7 @@ "name": "cloudinary/cloudinary", "description": "Cloudinary Magento 2 Integration.", "type": "magento2-module", - "version": "1.13.0", + "version": "1.14.0", "license": "MIT", "require": { "cloudinary/cloudinary_php": "*" diff --git a/view/adminhtml/layout/default.xml b/view/adminhtml/layout/default.xml new file mode 100644 index 0000000..92d372c --- /dev/null +++ b/view/adminhtml/layout/default.xml @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/view/adminhtml/requirejs-config.js b/view/adminhtml/requirejs-config.js index 4a8ca23..79f4699 100644 --- a/view/adminhtml/requirejs-config.js +++ b/view/adminhtml/requirejs-config.js @@ -8,10 +8,24 @@ var config = { cloudinarySpinsetModal: 'Cloudinary_Cloudinary/js/cloudinary-spinset-modal', cldspinsetDialog: 'Cloudinary_Cloudinary/js/cloudinary-spinset-dialog', productGallery: 'Cloudinary_Cloudinary/js/product-gallery', + cloudinaryLazyload: 'Cloudinary_Cloudinary/js/cloudinary-lazyload' } }, paths: { + 'jquery.lazyload': "Cloudinary_Cloudinary/js/jquery.lazyload.min", cloudinaryMediaLibraryAll: "//media-library.cloudinary.com/global/all", es6Promise: "//cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min" + }, + shim: { + 'jquery.lazyload': { + deps: ['jquery'] + }, + }, + config: { + mixins: { + 'Magento_Ui/js/lib/validation/validator': { + 'Cloudinary_Cloudinary/js/form/element/validator-rules-mixin': true + }, + } } }; \ No newline at end of file diff --git a/view/adminhtml/templates/lazyload.phtml b/view/adminhtml/templates/lazyload.phtml new file mode 100644 index 0000000..8ec159e --- /dev/null +++ b/view/adminhtml/templates/lazyload.phtml @@ -0,0 +1,9 @@ + +isEnabledLazyload()) { + return; +} ?> + diff --git a/view/adminhtml/ui_component/pagebuilder_video_form.xml b/view/adminhtml/ui_component/pagebuilder_video_form.xml new file mode 100644 index 0000000..111ac24 --- /dev/null +++ b/view/adminhtml/ui_component/pagebuilder_video_form.xml @@ -0,0 +1,21 @@ + + +
+
+ + + + true + + text + + YouTube, Vimeo and Cloudiary are supported + + +
+
diff --git a/view/adminhtml/web/js/form/element/validator-rules-mixin.js b/view/adminhtml/web/js/form/element/validator-rules-mixin.js new file mode 100644 index 0000000..445945f --- /dev/null +++ b/view/adminhtml/web/js/form/element/validator-rules-mixin.js @@ -0,0 +1,38 @@ +/** + * Copyright © Magento, Inc. All rights reserved. + * See COPYING.txt for license details. + */ + +define([ + 'jquery', + 'underscore', + 'Magento_Ui/js/lib/validation/utils' +], function($, _, utils) { + 'use strict'; + + /** + * Validate that string is url + * @param {String} href + * @return {Boolean} + */ + function validateIsUrl(href) { + return (/^(http|https|ftp):\/\/(([A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))(\.[A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))*)(:(\d+))?(\/[A-Z0-9~](([A-Z0-9_~-]|\.)*[A-Z0-9~]|))*\/?(.*)?$/i).test(href); //eslint-disable-line max-len + } + + return function(validator) { + validator.addRule( + 'validate-video-url', + function(href) { + if (utils.isEmptyNoTrim(href)) { + return true; + } + + href = (href || '').replace(/^\s+/, '').replace(/\s+$/, ''); + + return validateIsUrl(href) && (href.match(/youtube\.com|youtu\.be/) || href.match(/vimeo\.com/) || href.match(/cloudinary\.com/)); + }, + $.mage.__('Please enter a valid video URL.') + ); + return validator; + }; +}); \ No newline at end of file diff --git a/view/frontend/web/js/cloudinary-lazyload.js b/view/base/web/js/cloudinary-lazyload.js similarity index 76% rename from view/frontend/web/js/cloudinary-lazyload.js rename to view/base/web/js/cloudinary-lazyload.js index 22b7b6e..f457209 100644 --- a/view/frontend/web/js/cloudinary-lazyload.js +++ b/view/base/web/js/cloudinary-lazyload.js @@ -28,10 +28,19 @@ define([ initialize: function(options) { var widget = this; - options = widget.mergeOptions(widget.options, options); + options = this.mergeOptions(this.options, options); + this.cldLazyloadInit(options); + setInterval(function() { + widget.cldLazyloadInit(options); + }, 4000); + }, + + cldLazyloadInit: function(options) { if ($(".cloudinary-lazyload").length) { + var widget = this; try { - $(".cloudinary-lazyload").lazyload(widget.options); + $(".cloudinary-lazyload").lazyload(options || widget.options); + $(".cloudinary-lazyload").addClass("cloudinary-lazyload-processed").removeClass("cloudinary-lazyload"); } catch (err) { console.warn("Notice: An error occured while initializing Lazyload (" + err + "). Trying to fix automatically..."); $(".cloudinary-lazyload").each(function() { @@ -40,11 +49,10 @@ define([ } else { $(this).css("background-image", "url('" + $(this).attr("data-original") + "')"); } - $(this).removeClass("cloudinary-lazyload"); + $(this).addClass("cloudinary-lazyload-processed").removeClass("cloudinary-lazyload"); }); } } - }, /** diff --git a/view/frontend/web/js/jquery.lazyload.min.js b/view/base/web/js/jquery.lazyload.min.js similarity index 100% rename from view/frontend/web/js/jquery.lazyload.min.js rename to view/base/web/js/jquery.lazyload.min.js From e423ba1c4cc9e46c3035f876752cf4a5878033e1 Mon Sep 17 00:00:00 2001 From: pini-girit Date: Wed, 12 Aug 2020 11:57:45 +0300 Subject: [PATCH 2/8] v1.14.0: fixed a typo --- view/adminhtml/ui_component/pagebuilder_video_form.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/view/adminhtml/ui_component/pagebuilder_video_form.xml b/view/adminhtml/ui_component/pagebuilder_video_form.xml index 111ac24..c64340f 100644 --- a/view/adminhtml/ui_component/pagebuilder_video_form.xml +++ b/view/adminhtml/ui_component/pagebuilder_video_form.xml @@ -14,7 +14,7 @@ text - YouTube, Vimeo and Cloudiary are supported + YouTube, Vimeo and Cloudinary are supported From a1b8b91cf647052ee936809c84dd5979402db30e Mon Sep 17 00:00:00 2001 From: pini-girit Date: Wed, 12 Aug 2020 13:22:39 +0300 Subject: [PATCH 3/8] v1.14.0: very minor coding standards changes --- Model/Configuration.php | 14 +++++++------- .../Model/Import/Product/MediaGalleryProcessor.php | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/Model/Configuration.php b/Model/Configuration.php index 0ca75b1..bf20c1b 100644 --- a/Model/Configuration.php +++ b/Model/Configuration.php @@ -618,7 +618,7 @@ public function parseCloudinaryUrl($url, $publicId = null) * * @return array */ - public function mbParseUrl($url, $component=-1) + public function mbParseUrl($url, $component = -1) { $enc_url = preg_replace_callback( '%[^:/@?&=#]+%usD', @@ -653,12 +653,12 @@ public function addUniquePrefixToBasename($filename, $uniqid = null) } /** - * Log to var/log/cloudinary_cloudinary.log - * @method log - * @param mixed $message - * @param array $data - * @return $this - */ + * Log to var/log/cloudinary_cloudinary.log + * @method log + * @param mixed $message + * @param array $data + * @return $this + */ public function log($message, $data = [], $prefix = '[Cloudinary Log] ') { $this->cloudinaryLogger->info($prefix . json_encode($message), $data); diff --git a/Plugin/CatalogImportExport/Model/Import/Product/MediaGalleryProcessor.php b/Plugin/CatalogImportExport/Model/Import/Product/MediaGalleryProcessor.php index fb69dd4..5b1687e 100644 --- a/Plugin/CatalogImportExport/Model/Import/Product/MediaGalleryProcessor.php +++ b/Plugin/CatalogImportExport/Model/Import/Product/MediaGalleryProcessor.php @@ -199,7 +199,7 @@ private function processMediaPerStore( array $mediaGalleryData, array $newMediaValues, array $valueToProductId - ) { + ) { $multiInsertData = []; $multiInsertDataVideos = []; $dataForSkinnyTable = []; From edb54f2f943e4abe74fd2653e50002184a575bad Mon Sep 17 00:00:00 2001 From: pini-girit Date: Wed, 19 Aug 2020 17:44:18 +0300 Subject: [PATCH 4/8] v1.14.1: Adjustments for Magento 2.4 with backward compatibility --- Plugin/Catalog/Block/Product/ImageFactory.php | 3 +- composer.json | 2 +- etc/module.xml | 2 +- marketplace.composer.json | 2 +- view/frontend/templates/product/image.phtml | 19 +++-- .../product/image_with_borders.phtml | 70 +++++++++++++++---- .../templates/product/old_image.phtml | 15 ++++ .../product/old_image_with_borders.phtml | 22 ++++++ 8 files changed, 111 insertions(+), 24 deletions(-) create mode 100644 view/frontend/templates/product/old_image.phtml create mode 100644 view/frontend/templates/product/old_image_with_borders.phtml diff --git a/Plugin/Catalog/Block/Product/ImageFactory.php b/Plugin/Catalog/Block/Product/ImageFactory.php index 9a3b258..866d70a 100644 --- a/Plugin/Catalog/Block/Product/ImageFactory.php +++ b/Plugin/Catalog/Block/Product/ImageFactory.php @@ -139,9 +139,10 @@ public function aroundCreate(CatalogImageFactory $catalogImageFactory, callable } if ($this->configuration->isEnabledLazyload()) { + $useOldImageTheme = is_string($imageBlock->getCustomAttributes()) ? 'old_' : ''; $imageBlock->setTemplate( \preg_match('/\/image_with_borders.phtml$/', $imageBlock->getTemplate()) ? - 'Cloudinary_Cloudinary::product/image_with_borders.phtml' : 'Cloudinary_Cloudinary::product/image.phtml' + 'Cloudinary_Cloudinary::product/' . $useOldImageTheme . 'image_with_borders.phtml' : 'Cloudinary_Cloudinary::' . $useOldImageTheme . 'product/image.phtml' ); $imageBlock->setLazyloadPlaceholder(Configuration::LAZYLOAD_DATA_PLACEHOLDER); } diff --git a/composer.json b/composer.json index 357dbe2..8b7803b 100644 --- a/composer.json +++ b/composer.json @@ -2,7 +2,7 @@ "name": "cloudinary/cloudinary-magento2", "description": "Cloudinary Magento 2 Integration.", "type": "magento2-module", - "version": "1.14.0", + "version": "1.14.1", "license": "MIT", "require": { "cloudinary/cloudinary_php": "*" diff --git a/etc/module.xml b/etc/module.xml index 9df8e16..ae50380 100644 --- a/etc/module.xml +++ b/etc/module.xml @@ -1,6 +1,6 @@ - + diff --git a/marketplace.composer.json b/marketplace.composer.json index ed3dfd2..2daf22d 100644 --- a/marketplace.composer.json +++ b/marketplace.composer.json @@ -2,7 +2,7 @@ "name": "cloudinary/cloudinary", "description": "Cloudinary Magento 2 Integration.", "type": "magento2-module", - "version": "1.14.0", + "version": "1.14.1", "license": "MIT", "require": { "cloudinary/cloudinary_php": "*" diff --git a/view/frontend/templates/product/image.phtml b/view/frontend/templates/product/image.phtml index 81d1573..170909b 100644 --- a/view/frontend/templates/product/image.phtml +++ b/view/frontend/templates/product/image.phtml @@ -4,12 +4,17 @@ * See COPYING.txt for license details. */ ?> - - -escapeHtml($block->getCustomAttributes()) ?> + + +getCustomAttributes() as $name => $value): ?> + escapeHtmlAttr($name) ?>="escapeHtmlAttr($value) ?>" + src="getLazyloadPlaceholder() ?>" data-original="escapeUrl($block->getImageUrl()) ?>" - width="escapeHtmlAttr($block->getWidth()) ?>" - height="escapeHtmlAttr($block->getHeight()) ?>" - alt="stripTags($block->getLabel(), null, true) ?>" /> + width="escapeHtmlAttr($block->getWidth()) ?>" + height="escapeHtmlAttr($block->getHeight()) ?>" + alt="escapeHtmlAttr($block->getLabel()) ?>" /> diff --git a/view/frontend/templates/product/image_with_borders.phtml b/view/frontend/templates/product/image_with_borders.phtml index 4a4f331..342956b 100644 --- a/view/frontend/templates/product/image_with_borders.phtml +++ b/view/frontend/templates/product/image_with_borders.phtml @@ -4,19 +4,63 @@ * See COPYING.txt for license details. */ ?> - - - - - escapeHtmlAttr($block->getCustomAttributes()) ?> +getVar('product_image_white_borders', 'Magento_Catalog'); +$enableLazyLoadingWithoutBorders = (bool)$block->getVar( + 'enable_lazy_loading_for_images_without_borders', + 'Magento_Catalog' +); +$width = (int)$block->getWidth(); +$paddingBottom = $block->getRatio() * 100; +?> + + + getCustomAttributes() as $name => $value): ?> + escapeHtmlAttr($name) ?>="escapeHtmlAttr($value) ?>" + src="getLazyloadPlaceholder() ?>" data-original="escapeUrl($block->getImageUrl()) ?>" - width="escapeHtmlAttr($block->getWidth()) ?>" - height="escapeHtmlAttr($block->getHeight()) ?>" - max-width="escapeHtmlAttr($block->getWidth()) ?>" - max-height="escapeHtmlAttr($block->getHeight()) ?>" - alt="stripTags($block->getLabel(), null, true) ?>"/> + + width="escapeHtmlAttr($block->getWidth()) ?>" + height="escapeHtmlAttr($block->getHeight()) ?>" + + max-width="escapeHtmlAttr($block->getWidth()) ?>" + max-height="escapeHtmlAttr($block->getHeight()) ?>" + + alt="escapeHtmlAttr($block->getLabel()) ?>"/> +getProductId()} { + width: {$width}px; +} +.product-image-container-{$block->getProductId()} span.product-image-wrapper { + padding-bottom: {$paddingBottom}%; +} +STYLE; +//In case a script was using "style" attributes of these elements +$script = <<