Obrázky a ikonky

Vícebarevné ikonky v křivkách do složky /www/img (logo, přepínač jazyků, výhody)
Uživatelsky editovatelné obrázky, které nebudou zatím nijak napojené do složky /userfiles/images/ - tato složka se nahrává na git, ostatní obsah složky /userfiles/ se nepushuje!

Pokud jde tak obrázek uložit v jpg (png jen v případě nutnosti průhlednosti, ikonky vždy v svg)

Adobe XD - export ikonek

Jednobarevné ikonky si vedle sebe seřadíme nejlépe v Adobe XD.

  1. Označíme všechny části ikonky a hodíme do groupy pomocí CTRL + G
  2. V levém sloupci vybereme vrstvy a klikneme na danou ikonku
  3. Změníme pojmenování ikonky
  4. Označíme všechny ikonky a vlevo nahoře přes File -> Export -> Export selected si hromadně uložíme do nějaké složky.
  5. Nahrajeme na icomoon.io a přes pravou nabídku u všech ikon odebereme barvu (properties -> remove all colors)
  6. Ve spodní nabídce dáme generate font a poté nahoře nastavíme preference tímto způsobem

     
  7. Stáhne se složka - soubor selection.json vložíme do projektu /resources/iconfonts - tento soubor obsahuje informace o všech ikonkách a je důležitý pro budoucí editaci ikonek (přetáhnutím do icomoon se načtou všechny ikonky které jsme dříve nahráli)
    style.css - vykopírujeme všechny třídy s ikonami a vložíme do icon.scss
    všechny fonty ze složky fonts vezmeme a vložíme do složky /www/font - například podle webu polak, karieradrevojas,...
  8. v souboru font.scss musí být nadefinována cesta k iconfontu.

Definování obrázků a jejich velikostí

V superadministraci je nastaveno několik typů obrázků a jejich velikostí. Zatím se fotka zmenší na daný rozměr, ale zůstane zachováno aspect-ratio - poměr stran

Je tedy potřeba obrázky většinou dát do nějakého figure - například section__figure - tomu definovat rozměry - výška a šířka a potom daný obrázek nastavit, aby tento figure vyplnil (choval se pouze jako pozadí) - například width: 100%, height: 100%, object-fit:cover. Tím se zachová stejný rozměr, ikdyž se nahraje fotka v jiném poměru stran. Zároveň je potřeba daný figure pozmenšovat na menších zařízeních, aby přibližně odpovídal poměr stran a z obrázku se nestala úzká a vysoká nudle na mobilu. Na mobilních zařízeních, kde se obsah většinou stahuje při každém zmenšení displaje, je možnost použít relativní výšku pomocí jednotky vw - viewport width, která nastaví výšku obrázku podle šířky displaye - například height: 30vw a obrázek se bude stále scalovat a zachovávat poměr stran.

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*