Images and icons - CZECHGROUP.cz

The icons that we need in the background-image, e.g. in before and after, can be selected using the automatically generated svg view element and recolored using the mask. All views are in svg sprite in icon-name-view format.
Příklad načítání přes view. (zde jsou v příkladu inline styly, můžeme ale použít odkukoliv.)

Example with already defined colors (taken from svg - the name of the original icon is alert.svg)

<div style="width: 100px; height: 100px; background: url('/assets/front/sprite.svg#alert-view') no-repeat 0/cover;"></div>

Example using a mask (svg behaves only as a mask, we can recolor over the background arbitrarily)

<div style="width: 100px; height: 100px; background: blue; mask-image: url('/assets/front/sprite.svg#alert-view'); mask-size: cover"></div>

Alternatively, we can upload to a folder (but not necessary)

upload them to the www/img folder (where we can categorize them into folders if necessary).

Other pictures

User-editable images that will not be linked to the /userfiles/images/ folder yet - this folder is uploaded to git, the other contents of the /userfiles/ folder are not uploaded!

If you can, save the image in jpg (png only if you need transparency, icons always in svg)

Adobe XD - export icons

Select all parts of the icon and group using CTRL + G
Select the layers in the left column and click on the icon
Rename the icon
Select all the icons and save them to a folder on the top left via File -> Export -> Export selected.
Upload to icomoon.io and remove the color of the icons (the ones you want to recolor on the project) via the right menu (properties -> remove all colors)
In the bottom menu we put generate svg and then we download a folder in which we are only interested in the SVG folder - we take the icons from it and throw them into the resources/svg-sprite folder from where they are automatically compiled.
In html we use this style (if we decolorized via icomoon, the fill property will work - we can use it in the sass file, it doesn't have to be inline like this)
```
<svg style="fill: pink;">
    <use href="/assets/front/sprite.svg#icon_name"></use>
</svg>
```

Defining images and their sizes

Several image types and sizes are set in the superadministration. For now, the photo will shrink to the given size, but the aspect-ratio will be preserved

So it is necessary to put the images into some figure - for example section__figure - to define the dimensions - height and width and then set the image to fill this figure (behave only as a background) - for example width: 100%, height: 100%, object-fit:cover. This will keep the same dimensions even if the photo is uploaded in a different aspect ratio. At the same time, the figure needs to be resized on smaller devices so that it approximately matches the aspect ratio and the image does not become a narrow and tall noodle on a mobile phone. On mobile devices, where the content is usually downloaded every time the display is scaled down, there is an option to use relative height using the vw - viewport width unit, which will set the height of the figure according to the width of the display - for example height: 30vw and the figure will still be scaled and maintain the aspect ratio.