Kuvien ryhmittely

Alunperin julkaistu chat-kanavalla Foorumin asiat
Jonnap

Näkyykö teillä tossa mun syksy ketjussa kuvat millä tavalla? Mulla ne neljä kuvaa on sellasessa rykelmässä ettei allekkain. Ehkä niiden pitää silleen mennäkin :woman_shrugging:

Hukkaputki
Jagster

Tulee siksi, että et laittanut tyhjää riviä väliin.

60B3AE49-F0D9-4E23-8B26-9DF5EDDE6D58.jpeg

Ei tuo huono tapa ole esitellä ikäänkuin galleriana. Mutta jos haluat nostaa määrätyn kuvan esille, niin sitten tyhjä rivi väliin.

Näytän ne kolme tapaa, jolla kuvia voi ryhmitellä.

Eli tämä, kun kuvat ovat ilman tyhjää riviä välissä. Muokkaimessa se näyttää tältä:

![IMG_20220920_101714|1500x2000](upload://nmhthkOaiOnIjG2CSLje89RpQ4T.jpeg)
![IMG_20220918_140325|1500x2000](upload://lZCBjnRk2RfcHq7jbyepS2i9RHs.jpeg)
![IMG_20220920_103833|1950x1950](upload://rOrIziInRur9EE3Wc0sSzimqVnF.jpeg)
![IMG_20220916_085337|968x2000](upload://pjpZYKPQ6IrkdfsAeG1WG76039E.jpeg)
  • näytön koosta riippuu tietysti miten nuo omassa laitteessa rivittyvät

Ja sitten saa sen mitä aloituksessa kysyttiin:




Sitten kun täräyttää enteriä, tai ei siivoa pois sitä tyhjää riviä, joka tulee automaattisesti — paitsi jos valitsee useamman kuvan kerralla omasta laitteesta. Joka voi muuten sitten epäonnistua, jos kuvat ovat liian suuria, sillä foorumilta loppuu silloin muisti. Jos käy niin, että kuvat eivät ilmesty, niin sitten ne täytyy ladata yksitellen.

Eli tekee näin:

![IMG_20220920_101714|1500x2000](upload://nmhthkOaiOnIjG2CSLje89RpQ4T.jpeg)

![IMG_20220918_140325|1500x2000](upload://lZCBjnRk2RfcHq7jbyepS2i9RHs.jpeg)

![IMG_20220920_103833|1950x1950](upload://rOrIziInRur9EE3Wc0sSzimqVnF.jpeg)

![IMG_20220916_085337|968x2000](upload://pjpZYKPQ6IrkdfsAeG1WG76039E.jpeg)

Ja tuo näkyy näin:

2 Likes

Sitten on se kolmas tapa, tekee siitä enemmän gallerian tapaisen.

Ensin tökätään valikkorivistä tätä:

kuva

Muokkaimeen ilmestyy tällainen:

<div data-masonry-gallery>

Lisää kuvia

</div>

Poista teksti Lisää kuvia ja lataa <div…> ja </div> väliin kuvasi.

Joten ruudulla näkyy jotain tällaista:


<div data-masonry-gallery>

![IMG_20220920_101714|1500x2000](upload://nmhthkOaiOnIjG2CSLje89RpQ4T.jpeg)
![IMG_20220918_140325|1500x2000](upload://lZCBjnRk2RfcHq7jbyepS2i9RHs.jpeg)
![IMG_20220920_103833|1950x1950](upload://rOrIziInRur9EE3Wc0sSzimqVnF.jpeg)
![IMG_20220916_085337|968x2000](upload://pjpZYKPQ6IrkdfsAeG1WG76039E.jpeg)

</div>

Ja sitten esitetään näin:

Ai mikä ero tuossa on siihen ensimmäiseen verrattuna? Ei oikein mikään, kun kuvat ovat samankokoisia :wink:

1 Like

Tätä mietinkin.
Yksitellen aina kaikki kuvat laitan koska tästä on kokemusta:

Tuota kolmatta tapaa en aio testata. Liian vaivalloinen.

Ekassa kuvat ihan kivasti ryhmässä mutta tosiaan kun laittaa välit niin kuvista tulee isommat kun menee allekkain. Molemmat ihan :ok_hand:

Minähän olen käyttänyt hieman molempia, mutta se on vain minun tapani. Aika pitkälle siksi, että saahan ne kuvat aina erikseen näkymään ja tuppaan laittamaan tekstiä kuvien väliin.

Mutta nuo on ihan puhtaasti makuasioita.

1 Like