Skip to content

Commit 818eb15

Browse files
arielienarielien
committed
Fix - Image previews broken in Magento Commerce Cloud 2.4.8
1 parent 8e15dac commit 818eb15

6 files changed

Lines changed: 134 additions & 7 deletions

File tree

‎Controller/Adminhtml/Ajax/UpdateAdminImage.php‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,34 @@ public function execute()
103103
if ($this->configuration->isEnabled()) {
104104
try{
105105
$remoteImageUrl = $this->getRequest()->getParam('remote_image');
106-
$filedId = str_replace($this->storeManager->getStore()->getBaseUrl(), '', $remoteImageUrl);
106+
$parsedUrl = parse_url($remoteImageUrl);
107+
$cleanUrl = $parsedUrl['scheme'] . '://' . $parsedUrl['host'] . $parsedUrl['path'];
108+
$baseUrl = $this->storeManager->getStore()->getBaseUrl();
109+
$relativePath = str_replace($baseUrl, '', $cleanUrl);
110+
111+
// Check if this is a Cloudinary rendition path
112+
if (strpos($relativePath, '.renditions/cloudinary/') !== false) {
113+
// Extract the filename from the renditions path
114+
$parts = explode('.renditions/cloudinary/', $relativePath);
115+
$filename = end($parts);
116+
117+
// Remove the first cld_ prefix if there are multiple
118+
// e.g., cld_68b6aa57b4d59_cld_6458c4355ee79_cld-sample-2.jpg -> cld_6458c4355ee79_cld-sample-2.jpg
119+
if (preg_match('/^cld_[a-z0-9]+_cld_/', $filename)) {
120+
$filename = preg_replace('/^cld_[a-z0-9]+_/', '', $filename);
121+
}
122+
123+
// The public ID should be media/filename for Cloudinary
124+
$filedId = 'media/' . $filename;
125+
} else {
126+
// For regular media files, use the relative path as is
127+
$filedId = $relativePath;
128+
129+
// Remove media/ prefix if present (it will be in the public ID already)
130+
if (strpos($filedId, 'media/') === 0) {
131+
$filedId = substr($filedId, 6);
132+
}
133+
}
107134

108135
$result = Media::fromParams(
109136
$filedId,

‎composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "cloudinary/cloudinary-magento2",
33
"description": "Cloudinary Magento 2 Integration.",
44
"type": "magento2-module",
5-
"version": "2.1.1",
5+
"version": "2.1.2",
66
"license": "MIT",
77
"require": {
88
"php": ">=7.3",

‎etc/module.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0"?>
22
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
3-
<module name="Cloudinary_Cloudinary" setup_version="2.1.1">
3+
<module name="Cloudinary_Cloudinary" setup_version="2.1.2">
44
<sequence>
55
<module name="Magento_ProductVideo"/>
66
<module name="Magento_PageBuilder"/>

‎view/adminhtml/requirejs-config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ var config = {
1010
productGallery: 'Cloudinary_Cloudinary/js/product-gallery',
1111
cloudinaryLazyload: 'Cloudinary_Cloudinary/js/cloudinary-lazyload',
1212
updateCmsImages: 'Cloudinary_Cloudinary/js/cms/preview-update',
13+
'Magento_PageBuilder/js/content-type/image/preview': 'Cloudinary_Cloudinary/js/content-type/image/preview',
1314
}
1415
},
1516
paths: {

‎view/adminhtml/web/js/cms/preview-update.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,20 @@ define(
1616
self.update(key);
1717
});
1818
$('#save-button').on('click', function (e){
19-
self.images.each(function(elem){
19+
self.images.forEach(function(elem){
2020
if (elem.cld_image) {
2121
let cld_src = elem.cld_image;
2222
let img = $('img[src="' + cld_src +'"]');
23-
return (img.length) ? img.attr('src', elem.remote_image) : '';
23+
if (img.length) {
24+
img.attr('src', elem.remote_image);
25+
}
2426
}
2527
});
2628
});
2729
},
2830
update: function(key) {
2931
let self = this;
30-
this.images.each(function(elem,ind){
32+
this.images.forEach(function(elem,ind){
3133
$.ajax({
3234
url: config.ajaxUrl,
3335
type: 'POST',
@@ -37,7 +39,7 @@ define(
3739
self.images[ind].cld_image = image;
3840
let img = $('img[src="' + self.images[ind].remote_image +'"]');
3941
if (img.length) {
40-
$('img[src="' + self.images[ind].remote_image +'"]').attr('src', self.images[ind].cld_image);
42+
img.attr('src', self.images[ind].cld_image);
4143
}
4244
},
4345
error: function(xhr, textStatus, errorThrown) {

‎view/adminhtml/web/js/content-type/image/preview.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/*eslint-disable */
2+
/* jscs:disable */
3+
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
4+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
5+
define(["Magento_PageBuilder/js/events", "Magento_PageBuilder/js/content-type-menu/hide-show-option", "Magento_PageBuilder/js/uploader", "Magento_PageBuilder/js/content-type/preview"], function (_events, _hideShowOption, _uploader, _preview) {
6+
/**
7+
* Copyright © Magento, Inc. All rights reserved.
8+
* See COPYING.txt for license details.
9+
*/
10+
/**
11+
* @api
12+
*/
13+
var Preview = /*#__PURE__*/function (_preview2) {
14+
"use strict";
15+
16+
function Preview() {
17+
return _preview2.apply(this, arguments) || this;
18+
}
19+
_inheritsLoose(Preview, _preview2);
20+
var _proto = Preview.prototype;
21+
/**
22+
* Return an array of options
23+
*
24+
* @returns {OptionsInterface}
25+
*/
26+
_proto.retrieveOptions = function retrieveOptions() {
27+
var options = _preview2.prototype.retrieveOptions.call(this);
28+
options.hideShow = new _hideShowOption({
29+
preview: this,
30+
icon: _hideShowOption.showIcon,
31+
title: _hideShowOption.showText,
32+
action: this.onOptionVisibilityToggle,
33+
classes: ["hide-show-content-type"],
34+
sort: 40
35+
});
36+
return options;
37+
}
38+
39+
/**
40+
* Get registry callback reference to uploader UI component
41+
*
42+
* @returns {Uploader}
43+
*/;
44+
_proto.getUploader = function getUploader() {
45+
var initialImageValue = this.contentType.dataStore.get(this.config.additional_data.uploaderConfig.dataScope, "");
46+
return new _uploader("imageuploader_" + this.contentType.id, this.config.additional_data.uploaderConfig, this.contentType.id, this.contentType.dataStore, initialImageValue);
47+
}
48+
49+
/**
50+
* Get viewport image data
51+
* CLOUDINARY MODIFICATION: Removed rand parameter to prevent URL encoding issues
52+
*/;
53+
_proto.getViewportImageData = function getViewportImageData() {
54+
var desktopImageData = this.data.desktop_image;
55+
var mobileImageData = this.data.mobile_image;
56+
var result = this.viewport() === "mobile" && typeof mobileImageData !== "undefined" ? mobileImageData : desktopImageData;
57+
// CLOUDINARY: Commented out rand parameter addition to prevent double-encoding issues
58+
// if (result && result.attributes() && result.attributes().src.length > 0 && result.attributes().src.indexOf("?rand") === -1) {
59+
// result.attributes().src += "?rand=" + Date.now();
60+
// }
61+
return result;
62+
}
63+
64+
/**
65+
* @inheritDoc
66+
*/;
67+
_proto.bindEvents = function bindEvents() {
68+
var _this = this;
69+
_preview2.prototype.bindEvents.call(this);
70+
_events.on("image:mountAfter", function (args) {
71+
if (args.id === _this.contentType.id) {
72+
_this.isSnapshot.subscribe(function (value) {
73+
_this.changeUploaderControlsVisibility();
74+
});
75+
_this.changeUploaderControlsVisibility();
76+
}
77+
});
78+
_events.on(this.config.name + ":" + this.contentType.id + ":updateAfter", function () {
79+
var files = _this.contentType.dataStore.get(_this.config.additional_data.uploaderConfig.dataScope);
80+
var imageObject = files ? files[0] : {};
81+
_events.trigger("image:" + _this.contentType.id + ":assignAfter", imageObject);
82+
});
83+
}
84+
85+
/**
86+
* Change uploader controls visibility
87+
*/;
88+
_proto.changeUploaderControlsVisibility = function changeUploaderControlsVisibility() {
89+
var _this2 = this;
90+
this.getUploader().getUiComponent()(function (uploader) {
91+
uploader.visibleControls = !_this2.isSnapshot();
92+
});
93+
};
94+
return Preview;
95+
}(_preview);
96+
return Preview;
97+
});

0 commit comments

Comments
 (0)