Product pictures #91
Description
-- Frontend --
All photos should have alt tags with name of product (ex. AMD Ryzen 5 3600).
They should also have 2x bigger version in srcset for higher density screens. 1000x1000 box is only exception to this rule, as this resolution is high enough.
Example code for 200x200 box:
<img
alt="ProductXZ"
src="static/products/productxz_200x200.png"
srcset="static/products/productxz_400x400.png 2x"
>
-- Admin panel --
There should be multi input for images. There's no need for any server work because photos will be already resized and optimized before uploading.
-- Pictures --
25x25, 50x50, 100x100, 200x200, 400x400, 1000x1000
All of them will be in PNG format.
Main picture that is always shown on page as default.
$product_$size.png
Ex. amd_ryzen_3_3100_200x200.png
Extra pictures that users can scroll to
$product_$extra_$size.png
Ex. amd_ryzen_3_3100_box_200x200.png
!! 25x25 picture location (with 50x50 2x srcset)
product list on featured Wirtualnik (main page)
cart, saved cart/wirtualnik
!! 50x50 picture location (with 100x100 2x srcset)
user avatar in dropdown menu
!! 100x100 picture location (with 200x200 2x srcset)
best/liked/user wirtualnik list
user avatar in details about saved wirtualnik
promotions/sale (main page)
!! 200x200 picture location (with 400x400 2x srcset)
product grid
product page
I'm open to suggestions how frontend should get correct names of these images. All names should be in the database so they would be included in REST API response?