Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
| Obě strany předchozí revize Předchozí verze Následující verze | Předchozí verze | ||
|
skoda-ep:skoda-wlc-2016:technical_information:asset_specification [27.08.2019 12:12] Lukáš Čech [Listings (Homepage, category view and similiar)] |
skoda-ep:skoda-wlc-2016:technical_information:asset_specification [27.08.2019 12:16] (aktuální) Lukáš Čech |
||
|---|---|---|---|
| Řádek 122: | Řádek 122: | ||
| Desktop version: 384px (must be readable from 310px) | Desktop version: 384px (must be readable from 310px) | ||
| - | |||
| - | ====== Featured image ====== | ||
| - | |||
| - | There are several views of the featured image, each can have different dimensions so it is usually important to place the image focus in the center. | ||
| - | |||
| - | When the image does not fit the container around it, it is cropped either on sides or on top and bottom. | ||
| - | |||
| - | Moreover the featured image can have two layouts inside an article detail. | ||
| - | |||
| - | Following are definitions of the featured image sizes in various contexts: | ||
| - | |||
| - | ===== Listings (Homepage, category view and similiar) ===== | ||
| - | |||
| - | Aspect ratio: 16/9 | ||
| - | |||
| - | width: 16 points | ||
| - | |||
| - | height: 9 points | ||
| - | |||
| - | Examples: | ||
| - | * 160 x 90 | ||
| - | * 1024x576 | ||
| - | * 1920x1080 | ||
| - | |||
| - | The first position in the grid has special behaviour for desktop and mobile: | ||
| - | |||
| - | ==== Mobile ==== | ||
| - | |||
| - | Aspect ratio: 1/1 | ||
| - | width: 1 point | ||
| - | height: 1 point | ||
| - | |||
| - | Examples: | ||
| - | * 160 x 160 | ||
| - | * 1024x1024 | ||
| - | * 1920x1920 | ||
| - | |||
| - | ==== Desktop ==== | ||
| - | |||
| - | Due to the layout in the desktop view, the first article position must be slightly offset from the 16/9 aspect ratio, therefor the image has an extra few pixels at the bottom. | ||
| - | |||
| - | Examples: | ||
| - | * 1920x1080 would have extra 25 pixels at the bottom and would need to be 1920x1105.5 px | ||
| - | * 1024x576 would result in 1024x590 | ||
| - | * In the desktop view, the image has a size of 792x456 | ||
| - | |||
| - | ===== Detail (Fixed layout) ===== | ||
| - | |||
| - | Width: variable, scales with window width, limited to 1380px max | ||
| - | Height: | ||
| - | * Desktop: 600px | ||
| - | * Mobile: 390px | ||
| - | |||
| - | At the highest resolution, the image has size of 1380x600 pixels resulting in an aspect ratio of 23/10 | ||
| - | At the lowest resolution, the image has a size of 320x390 pixels, resulting in an aspect ratio of 32/39, or approximately 11/13 | ||
| - | |||
| - | ===== Detail (Fluid layout) ===== | ||
| - | |||
| - | |||