Make image ratio and sizes configurable #999

Carsten89 · 2020-04-06T10:43:29Z

Description

Introduced new theme configs ("AppImages") for images width, height, quality and fillColor.
Added support for images that are not square.

Type of change

Please add an "x" into the option that is relevant:

Bug Fix 🐛 (non-breaking change which fixes an issue)
Enhancement 🚀 (non-breaking change which adds functionality)
Breaking Change 💥 (fix or feature that would cause existing functionality to not work as expected)
Polish 💅 (Just some cleanups)
Internal 🏠 Only relates to internal processes.

How to test it

Please describe here any specialty that the tester should be aware of.

…ded image formats code

libraries/commerce/product/actions/fetchProductImages.js

libraries/commerce/product/helpers/index.js

libraries/common/helpers/data/index.js

alexbridge · 2020-04-09T09:02:08Z

libraries/common/helpers/data/index.js

@@ -50,9 +52,17 @@ export const isExternal = url =>
 * @returns {string}
 */
 export const getActualImageSource = (src, { width, height }) => {
+  if (src && src.includes('images.shopgate.services/v2/images')) {
+    const { fillColor = 'FFFFFF' } = getThemeSettings('AppImages') || {};
+    const format = isAndroidOs ? 'webp' : 'jpeg';


Extensions also checked if sufix is '.png' to ask for png format

not sure if this is needed. @fkloes what do you think?

Sorry, but i'm not sure, if i get the question? Can you please elaborate it a bit?

When original image is PNG , the image-optimizer extension checks the suffix to return png format

@fkloes the image optimize ext was doing this check here https://stash.localdev.cc/projects/SGX/repos/image-optimizer/browse/extension/helpers/generatePlatformImageUrl.js#37
But i don't know if this is really used and if it should be also included to the frontend.

libraries/common/helpers/data/index.js

...heme-gmd/pages/Favorites/components/FavoritesList/components/Item/components/Image/index.jsx

themes/theme-gmd/pages/Product/components/Media/components/ProductImageSlider/index.jsx

themes/theme-gmd/extension-config.json

...me-ios11/pages/Favorites/components/FavoritesList/components/Item/components/Image/index.jsx

themes/theme-ios11/pages/Product/components/Media/components/ProductImageSlider/index.jsx

…into CCP-1888-image-ratio

themes/theme-gmd/pages/Product/components/Media/components/ProductImageSlider/index.jsx

fkloes

I did my first review of the code, but i wasn't able to do functional tests. I guess that updated versions of the products and the image-optimizer extensions are required, but i can't install their node_modules since access to Sinopia doesn't work within their current state (i was connected to the VPN). As far as i know there where authentication changes last week.

Without those extensions i only have images within the cart right now, but on the majority of our pages i only see placeholders. Refactoring all components to use the featuredImageBaseUrl instead of the featuredImageUrl caused a big breaking change. This PWA version (i guess 6.13.0) needs to be deployed with the new extension versions, but there is no protection against a misconfiguration.

What's the plan to handle this?

libraries/commerce/product/selectors/product.js

fkloes · 2020-04-12T14:24:28Z

libraries/commerce/product/actions/fetchProductImages.js

-      .setInput(input)
-      .setVersion(version)
+      .setInput({ productId })
+      .setVersion(3)


I would have the same question. It seems that specific versions of the products and the image-optimizer extension needs to be installed. At my current state of the review i can't find any attempt to maintain backwards compatibility, nor protections that the PWA is deployed without those extensions.

there is not backwards compatibility planed. the plan was to have the dependency to the other extensions.
How can we enforce that PWA only gets deployed together with the new versions? Can we use the peerDependencies for this?

libraries/common/components/Image/index.jsx

fkloes · 2020-04-12T14:46:48Z

libraries/common/helpers/data/index.js

@@ -50,9 +52,17 @@ export const isExternal = url =>
 * @returns {string}
 */
 export const getActualImageSource = (src, { width, height }) => {
+  if (src && src.includes('images.shopgate.services/v2/images')) {
+    const { fillColor = 'FFFFFF' } = getThemeSettings('AppImages') || {};
+    const format = isAndroidOs ? 'webp' : 'jpeg';


Sorry, but i'm not sure, if i get the question? Can you please elaborate it a bit?

libraries/common/helpers/data/index.js

fkloes · 2020-04-12T15:28:09Z

libraries/common/helpers/data/index.js

 * @returns {string}
 */
 export const getActualImageSource = (src, { width, height }) => {
+  if (src && src.includes('images.shopgate.services/v2/images')) {
+    const fillColor = 'FFFFFF';
+    const format = isAndroidOs ? 'webp' : 'jpeg';


This kind of approach to detect webp support seems to be a bit error-prone. We should try to implement a real feature detection. I found this promising article and did some testing.

Since it uses fetch which only runs async we would need to postpone rendering of the app till the promise resolves. I archived this by wrapping the render(<Pages store={store} />, document.getElementById('root')) call within e.g. theme-gmd/index.jsx with a self invoking asynchronous function which calls render after the detection was done. You could persist the result of the detection somewhere in the module which provides the detection function to enable synchronous access later.

What do you think?

There was an error on Firefox when running the snippet from the console when no website was open. So i added t try catch block around the fetch and returned false in case of an error.

Google devs suggest simpler way of detection: https://developers.google.com/speed/webp/faq#in_your_own_javascript

i was also thinking about a feature detection, but then decided to keep the old behavior. Would you be fine with moving it to a new ticket? i would like to keep the scope here as small as possible

libraries/engage/core/helpers/getFullImageSource.js

libraries/engage/product/components/ProductImage/index.jsx

fkloes · 2020-04-12T15:53:10Z

...heme-gmd/pages/Favorites/components/FavoritesList/components/Item/components/Image/index.jsx

-  </div>
-);
+const Image = ({ product }) => {
+  const { ListImage: gridResolutions } = getProductImageSettings();


I see that you use this helper function within a couple of functional components. Only two components are traditional React components, one of them can be easily refactored. So this could be a nice candidate for a React hook.

I agree useProductImages or useAppImages as it stands in extension config

as discussed we will not do the hook in this scope

libraries/engage/product/helpers/index.js

libraries/common/components/Image/index.jsx

alexbridge · 2020-04-16T13:00:27Z

themes/theme-gmd/pages/Cart/components/Item/components/Product/components/Layout/index.jsx

-            defaultPrice={props.product.price.default}
-            specialPrice={props.product.price.special}
+const Layout = (props, context) => {
+  // TODO: use ListImage from AppImages theme config here later as soon as cartItems


…into CCP-1888-image-ratio

Carsten89 added 11 commits April 3, 2020 16:57

PWA-2485 use new imageBaseUrl on pdp, gallery and lists. removed unne…

9c2685a

…ded image formats code

CCP-1888 cleanup

5ed598a

merge commit

4e7ac30

CCP-1888 cleanup, fixed tests

6cd57c1

CCP-1888 fixed tests

17b646e

CCP-1888 fixed gmd tests

678b528

CCP-1888 fixed ios tests

a9ef8be

CCP-1888 fixed ios tests

e82b5aa

CCP-1888 fixed cart

d6dfc0a

CCP-1888 cleanup

a754093

CCP-1888 codestlye

0226989

Carsten89 changed the title ~~Ccp 1888 image ratio~~ Make image ratio and sizes configurable Apr 8, 2020

Carsten89 self-assigned this Apr 8, 2020

Carsten89 added the enhancement New feature or request label Apr 8, 2020

Merge remote-tracking branch 'origin/v6.13.0' into CCP-1888-image-ratio

d8eb9e4

alexbridge suggested changes Apr 9, 2020

View reviewed changes

Carsten89 added 2 commits April 9, 2020 13:20

CCP-1888 added default values for pdpResolutions

fb623b7

Merge branch 'CCP-1888-image-ratio' of https://github.com/shopgate/pwa …

4bd9f1a

…into CCP-1888-image-ratio

alexbridge suggested changes Apr 9, 2020

View reviewed changes

themes/theme-gmd/pages/Product/components/Media/components/ProductImageSlider/index.jsx Outdated Show resolved Hide resolved

Carsten89 added 2 commits April 9, 2020 16:31

CCP-1888 moved functions to engage, feedback

ba4954a

CCP-1888 updated snapshots

30a1946

fkloes requested changes Apr 12, 2020

View reviewed changes

alexbridge suggested changes Apr 14, 2020

View reviewed changes

libraries/engage/product/helpers/index.js Show resolved Hide resolved

Carsten89 added 7 commits April 14, 2020 13:26

CCP-1888 implemented feedback

215cd9b

CCP-1888 updated snapshots

364639d

CCP-1888 fixed tests

528a319

CCP-1888 fixed tests

94593f9

CCP-1888 codestyle

9ef9798

CCP-1888 snapshots

449806d

CCP-1888 fixed tests

dacd702

Carsten89 requested review from alexbridge and fkloes April 16, 2020 08:42

alexbridge suggested changes Apr 16, 2020

View reviewed changes

PWA-2485 Assert using srcmap on image component

ea2fe4b

alexbridge approved these changes Apr 16, 2020

View reviewed changes

Carsten89 and others added 3 commits April 17, 2020 09:03

CCP-1888 removed comment. use fallback resolutions in cart

8409636

Merge branch 'CCP-1888-image-ratio' of https://github.com/shopgate/pwa …

0e8a422

…into CCP-1888-image-ratio

CCP-1888 Fixed some unit tests

57c6358

fkloes approved these changes Apr 20, 2020

View reviewed changes

alexbridge merged commit a10a7f7 into v6.13.0 Apr 20, 2020

alexbridge deleted the CCP-1888-image-ratio branch April 20, 2020 11:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make image ratio and sizes configurable #999

Make image ratio and sizes configurable #999

Carsten89 commented Apr 6, 2020 •

edited

Loading

alexbridge Apr 9, 2020

Carsten89 Apr 9, 2020

fkloes Apr 12, 2020

alexbridge Apr 14, 2020

Carsten89 Apr 14, 2020

fkloes left a comment

fkloes Apr 12, 2020

Carsten89 Apr 14, 2020

fkloes Apr 12, 2020

fkloes Apr 12, 2020

alexbridge Apr 14, 2020

Carsten89 Apr 14, 2020

fkloes Apr 12, 2020

alexbridge Apr 14, 2020

Carsten89 Apr 15, 2020

alexbridge Apr 16, 2020

Make image ratio and sizes configurable #999

Make image ratio and sizes configurable #999

Conversation

Carsten89 commented Apr 6, 2020 • edited Loading

Description

Type of change

How to test it

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fkloes left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Carsten89 commented Apr 6, 2020 •

edited

Loading