Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add function to get vtex product image in properly ratio #446

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

IncognitaDev
Copy link

What is this contribution about?

The Vtex API returns the main image URL without sizes, which always returns the image in the biggest size in its proper ratio. However, it is common to use a default image ratio in shelves and PDPs. To do this, the required image sizes are necessary in the image URL so that the platform can fill blank spaces with a white background and guarantee that the image always fits the required ratio.

This PR adds a function that adds size to Vtex product image URLs to prevent cropping by the image component. This is important for stores that can contain multiple image ratios.

How to test it?

without the feature: https://deco-sites-openbox2-x160rqmdqg80.deno.dev/sofa-retratil-e-reclinavel-omega-200m-velosuede-11001207/p

with feature: https://deco-sites-openbox2-wrnw2rw39amg.deno.dev/sofa-retratil-e-reclinavel-omega-200m-velosuede-11001207/p

@tlgimenes
Copy link
Contributor

tlgimenes commented Aug 30, 2023

This happens because the original image is in 412x274 and you are rendering an <Image witdh=488 height=488/>

Here's an example with <Image width=412 height=274/> with the right aspect without doing any modification to the code:
https://deco-sites-openbox2-x160rqmdqg80.deno.dev/live/invoke/deco-sites/std/loaders/x/image.ts?src=https%3A%2F%2Fopenbox.vteximg.com.br%2Farquivos%2Fids%2F210606%2Fimage-242a601683c24e67a7b625044f49a58f.jpg%3Fv%3D638258192696630000&fit=cover&width=412&height=274

@IncognitaDev
Copy link
Author

Yes, but the store has many ratios, some images can be square, other vertical rectangle and horizontal rectangle, and the web vitals recommend to use width and height on images tag, so, to use this props without crop the image when ration can change i think get they in properly ratio of vtex its a better solution.

@IncognitaDev
Copy link
Author

actualy, i think image component should have option to crop or fit the image in required width and height.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants