VersatileSoft / Wirtualnik

Other
4 stars 0 forks source link

Product pictures #91

Open AXYZE9 opened 3 years ago

AXYZE9 commented 3 years ago

-- 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) chrome_nmlpPJ4i91 cart, saved cart/wirtualnik chrome_gLmiSLgVHo

!! 50x50 picture location (with 100x100 2x srcset) user avatar in dropdown menu chrome_xjdKGFqIiq

!! 100x100 picture location (with 200x200 2x srcset) best/liked/user wirtualnik list chrome_nMkVmiNoFe user avatar in details about saved wirtualnik chrome_GXSM0FsHF5 promotions/sale (main page) chrome_3ZW8xKoCmg

!! 200x200 picture location (with 400x400 2x srcset) product grid chrome_GCuWyB0aqG product page chrome_DWhLBV0VRP

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?

kcrg commented 3 years ago

Related to #85