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.

Sign up for GitHub

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

Jump to bottom

Theme-dependent not found images #625

Closed
dhhyi opened this issue Mar 19, 2021 · 1 comment · Fixed by #1296
Closed

Theme-dependent not found images #625

dhhyi opened this issue Mar 19, 2021 · 1 comment · Fixed by #1296
Labels
enhancement Enhancement to an existing feature
Milestone
3.1

Comments

@dhhyi
Copy link
Collaborator

dhhyi commented Mar 19, 2021 •
edited by azure-boards bot
Loading

Is your feature request related to a problem? If yes, please describe it.

Currently the image-not-found image (https://github.com/intershop/intershop-pwa/blob/develop/src/assets/img/not_available.png) is hard-coded in ish-product-image:

intershop-pwa/src/app/shared/components/product/product-image/product-image.component.html

Line 15 in dca5385

[src]="product.image?.effectiveUrl || '/assets/img/not_available.png'"

This makes it hard to set the image depending on the theme with the PWA's multi-theme support.

Describe the desired solution.

  • Image source should be set in theme SCSS.
  • It should be possible to supply SVG images and have them automatically scale to their surrounding containers.
  • BONUS The text "NO IMAGE AVAILABLE" should be managed in a translation key and painted on top of the image when rendering, so it can be displayed in the current language.

Describe alternatives you've considered.

Provide additional context.

Additional images that are statically referenced:

image

AB#80392
@dhhyi dhhyi added the enhancement Enhancement to an existing feature label Mar 19, 2021
@andreassteinmann
Copy link
Collaborator

andreassteinmann commented Oct 5, 2022 •
edited
Loading

It would also be possible to replace the image

and to add the localized text below it. So you have no image at all and there would be no problem with any theme based image reference.

If the text cannot be read due to a very small text size (e.g. minicart, cart, order details), the text should be left out and the image should be self explaining.

@andreassteinmann andreassteinmann mentioned this issue Oct 12, 2022
Merged
@shauke shauke added this to the 3.1 milestone Oct 14, 2022
@shauke shauke linked a pull request Oct 14, 2022 that will close this issue
fix: replace the PNG image with a self explaining SVG image without text #1296
Merged
shauke added a commit that referenced this issue Oct 14, 2022
@andreassteinmann @shauke
fix: replace the PNG image with a self explaining SVG image without t…
9a984da 
…ext (#625, #1296)

* remove/replace the PNG image with a self explaining SVG image without text
* separate handling for the not available image
* image mapper improvement for products without images + code cleanup
* set width and height attributes inside the SVG image file to prevent display issues (image and surrounding element collapses to 0)
* update migration documentation

BREAKING CHANGES: We removed the `not_available.png` image and replaced it with an SVG image (without text inside the image) and adjusted file references.

Co-authored-by: Stefan Hauke <s.hauke@intershop.de>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement Enhancement to an existing feature
Projects
None yet
Milestone
3.1
Development

Successfully merging a pull request may close this issue.

fix: replace the PNG image with a self explaining SVG image without text intershop/intershop-pwa
3 participants
@andreassteinmann @dhhyi @shauke