Úvod » Galerie » Galerie DIVI jak vytvořit vlastní velikosti náhledových obrázků

Galerie DIVI jak vytvořit vlastní velikosti náhledových obrázků

Když potřebujete udělat DIVI galerii 1:1 čtverec 1:1 – 1 / 1 = 1.00 = 100%

Modul galerie

OBSAH

Počet obrázků: 8

Prvky:

Zobrazit titulek a popisek NE

Zobrazit stránkování: NE

NÁVRH

Rozvržení: Mřížka

POKROČILÉ

Třída CSS: moje-galerie-ctverec-1

 

 

Řádek

NÁVRH

Změny velikosti

Vlastní mezera mezi sloupci: ANO

Mezery mezi sloupci: 1 

b

Kód

/*galerie ctverec 1:1*/
.moje-galerie-ctverec-1 .et_pb_gallery_image {
padding-top: 100%;
display: block;
}
.moje-galerie-ctverec-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}

Když potřebujete udělat DIVI galerii na šířku 16:9 – 9 / 16 = 0.5625 = 56.25%

b

Kód

/*galerie 16:9*/
.moje-galerie-16-9-1 .et_pb_gallery_image {
padding-top: 56.25%;
display: block;
}
.moje-galerie-16-9-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}

DALŠÍ VELIKOSTI

Všimněte si, že měním jen padding-top a název třídy, takže si můžete změnit snadno velikost podle sebe.

další velikost na šířku 4:3 – 3 / 4 výpočet = 0.75 = 75%
další velikost na šířku 3:2 – 2 / 3 výpočet = 0.6667 = 66.67%
portrét 9:16 – 16 /9 výpočet = 1.7778 = 177.78%
portrét 3:4 – 4 / 3 výpočet = 1.3334 = 133.34%
portrét 2:3 – 3 / 2 výpočet = 1.5 = 150%

Moje motto: „Tvorba webových stránek ubírá mi spánek“. Baví mě tvorba webových stránek s redakčním systémem WordPress a vše kolem webů takže grafika, SEO optimalizace a protože jsem bývalá účetní, tak samozřejmě i troška číslíček v marketingu a PPC kampaně. To co umím předávám i dále a to pomocí školení WordPress a také jsem se odhodlala a začala už konečně psát „blog“, za který mě strýček Google nebude mít rád, protože nejsem žádný pisálek a ty mé příspěvky jsou hodně stručné bez omáčky okolo, tak alespoň doufám, že jsou výstižné. Na druhou stranu ten můj blogíček funguje hlavně pro mě jako takový vzpomínáček.

Radka Jiránková

webdesigner, udelam-web.cz