Reeks afbeeldingen / foto’s in WordPress galerij

Een fantastische plugin voor het maken van fotogalleries en overzichten op een webpagina. Een must voor elke website met veel beeldmateriaal en foto’s. Ideaal voor fotografen. Werkt met WordPress galerij Gutenberg blok.

Een galerij is een mooie manier om in WordPress een serie of reeks afbeeldingen te laten zien van bijvoorbeeld een evenement of een product. Als je eenmaal weet hoe de plugin werkt is deze afbeeldingen plugin heel gebruiksvriendelijk. Zorg wel dat je eerst weet hoe je een standaard WordPress afbeeldingen galerij kan maken.
Handleiding WordPress afbeeldingen galerij maken

---

Voorbeelden galleries Justified Image Grid WordPress plugin

Ik heb wat voorbeelden gemaakt van wat je met deze WordPress plugin kan doen voor je foto galeries.

---

Fotogalerij op laptop of desktop

Een fotogalerij op laptop of desktop:

---

Fotogalerij op tablet

Dezelfde fotogalerij op tablet:

---

Fotogalerij op smartphone of mobiel

De afbeeldingen schalen mooi naar het juiste formaat. Top!
Bekijk live voorbeeld

---

Voorbeelden galleries op onze site

---

---

Eisen gallery plugin voor afbeeldingen

Als vormgever wil je een mooie/handige mogelijk manier je foto’s laten zien. Volgens mij moet een mooie gallery aan moet voldoen:

• De gallery moet automatisch uitlijnen als je de grootte van je scherm verandert;
• De gallery moet responsive zijn;
• De gallery moet gemakkelijk te gebruiken zijn vanaf verschillende bronnen (Worpress gallery, Nextgen,Flickr, Instagram, Nextgen)
• De gallery moet gebruik kunnen maken van een ‘lightbox‘
  Handleiding Lightbox voor WordPress

Je hebt niet meer voor iedere site een eigen plugin nodig, je kunt het nu me 1 doen.

---

4 belangrijke tips voor de Justified Image Grid plugin

De belangrijkste tips van Arthur. Tijdens de cursus leg ik ze uitvoeriger uit:

1. In het eerste tabje van alle Justified Image Grid instellingen kun je aangeven dat de plugin altijd wordt gebruikt voor de standaard WordPress gallery. Vul dan “YES” in bij deze setting “Take over and replace -gallery- WordPress gallery shortcodes“
2. Bepaal de grootte/hoogte van je galleries bij “Target row height“.
   Vul hier de hoogte in in pixels. Probeer van alles tussen 200px en 400px.
3. Bepaal de maximale afwijking voor een rij bij “Row height max deviation (+-)”.
   Vul hier de pixels in. Als je 0 (nul) invult worden alle rijen dus even groot. Ik vul meestal tussen 50px en 200px in.
4. Het kan zijn dat je laatste rij niet compleet is en dat er één of meer plaatjes onderaan bungelen. Je kan dit voorkomen bij de onderstaande instelling: “Incomplete last row“. Vul hier “hide” in.

Onderaan deze pagina vind je nog 2 laatste tips voor de Justified Image Grid instellingen om je foto galleries helemaal af te maken.

---

---

Voorbeelden Justified Image Grid WordPress plugin

Hieronder een voorbeeld van de Justified Image Grid WordPress plugin. Onder de afbeeldingen staan de belangrijkste settings.

---

Voorbeeld 1

rijhoogte 100 pixels

Thumbs spacing:2
Row height: 100
Height deviation: 0

De bijbehorende code voor op je WordPress pagina/bericht:

<br>
[justified_image_grid ids=56,2207,2205,2200,2202,7339 thumbs_spacing=2 row_height=100 height_deviation=0 last_row=hide]<br>

---

Thumbs spacing:2
Row height: 100
Height deviation: 0
Last row: hide

---

Thumbs spacing:2
Row height: 100
Height deviation: 100

---

Voorbeeld 2

rijhoogte 200 pixels

Thumbs spacing:5
Row height: 200
Height deviation: 0
Last row: hide

---

Thumbs spacing:5
Row height: 200
Height deviation: 100
Last row: hide

---

Thumbs spacing:1
Row height: 200
Height deviation: 100
Last row: hide

---

Voorbeeld 3

rijhoogte 400 pixels

Thumbs spacing:15
Row height: 400
Height deviation: 0
Last row: hide

---

Thumbs spacing:15
Row height: 400
Height deviation: 200
Last row: hide

---

Thumbs spacing:1
Row height: 400
Height deviation: 400
Last row: hide

---

Meer voorbeelden Justified Image Grid WordPress plugin

Let op de kleine verschillen in overlay:

---

---

---

Extra tips en instellingen

Tip 1: namen afbeeldingen en social media links uitzetten

Tot slot nog 2 tips om je foto gallerij helemaal te finetunen:

1. Als je over je afbeelding gaat, zie je de naam van je afbeelding. Vaak is dit lelijk of klopt de naam niet. Je kan het hier uitzetten:
   Ga in de Justified Image Grid instellingen naar het tabje ‘Captions‘. Vink bij ‘Caption style‘ ‘off’ aan.
2. Bij de pop-up van de afbeeldingen, dit heet lightbox, zie je de links naar social media en de naam van de afbeelding. Dit is vaak niet nodig of onrustig. Je kan dit hier uitzetten:
   – Ga in de Justified Image Grid settings naar het tabje ‘Lightbox‘.
   – Vink bij ‘WP field for img alt (image tag’s alt attribute)‘ ‘Off: Do not use’ aan.
   – Vink bij ‘prettyPhoto social tools‘ ‘No’ aan.

Tip 2: hoogte van de afbeeldingen in Galerij aanpassen

Om de hoogte van de afbeeldingen aan te passen passen kun je een code toevoegen aan je galerij. Je kan de row-height en height-deviation toevoegen. Het ziet er dan ongeveer zo uit.

---

Galerij maken binnen een page builder (Elementor)

Als je een page builder gebruikt, kun je soms niet een standaard WordPress galerij aanmaken. In dit geval dien je de onderstaande code in te voeren in een tekst-module. De getallen zijn de id’s van de afbeeldingen. De plugin zorgt dat de galerij op dezelfde manier behandelt wordt als een galerij in Gutenberg.
Handleiding WordPress ID vinden van afbeeldingen en pagina’s

<br>
[justified_image_grid ids=35,38,45,47]<br>

Daarbij kun je nog extra waarden toekennen zoals hieronder waarbij de rijhoogte 400 pixels wordt:

<br>
[justified_image_grid ids=35,38,45,47 row_height=400 height_deviation=100 last_row=hide]<br>

---

Voor kleine afbeeldingen in de galerij | shortcode

---

Voor grote afbeeldingen in de galerij | shortcode

---

De code last_row=hide zorgt ervoor dat er nooit een afbeelding onderaan bungelt.

---

Meer tips voor afbeeldingen en fotografie in WordPress

Wil je meer weten hoe je je foto’s op het goede formaat krijgt en eventueel kan bewerken?
Bekijk dan één van deze handleidingen over afbeeldingen en fotografie:

---

Meer documentatie

justifiedgrid.com/features/thumbnail-captions

---

Meer voorbeelden van Arthur

Ik heb zelf tientallen voorbeelden in mijn database. Deze kun je krijgen bij een WordPress cursus of training:

---

1

---

2

---

3

---

4

---

5

---

6

---

7

---

8

---

9

---

Voorbeelden met berichten voor gevorderden

<br>
[justified_image_grid last_row=hide recent_posts=yes recents_include=226 recents_description=auto_excerpt recents_description_2=manual_excerpt]

3<br>
[justified_image_grid row_height=300 caption=reverse-fade caption_opacity=1 caption_bg_color=rgba(109,76,52,0.1) caption_text_shadow="0 0 3px rgba(0,0,0,0.6)" overlay=off inner_border_width=1 inner_border_color=rgba(0,0,0,0.1) specialfx=captions specialfx_type=blur caption_fx_visibility=in_front_of_overlay specialfx_options=amount:3 specialfx_blend=0.8 recent_posts=yes recents_include=226 recents_description=custom_taxonomy_example-tag recents_description_2=date recents_description_3=auto_excerpt excerpt_length=22 recents_filter_tax=example-tag recents_filter_term=woman recents_post_type=example-post]<br>
4<br>
[justified_image_grid last_row=hide recent_posts=yes recents_include=226]<br>
5<br>
[justified_image_grid row_height=300 caption=reverse-fade caption_opacity=1 caption_bg_color=rgba(109,76,52,0.1) caption_text_shadow="0 0 3px rgba(0,0,0,0.6)" overlay=off inner_border_width=1 inner_border_color=rgba(0,0,0,0.1) specialfx=captions specialfx_type=blur caption_fx_visibility=in_front_of_overlay specialfx_options=amount:3 specialfx_blend=0.8 recent_posts=yes recents_include=226 recents_description=custom_taxonomy_example-tag recents_description_2=date recents_description_3=auto_excerpt excerpt_length=22recents_post_type=example-post]

6

Handig door Arthur gebruikt:

3

4

5

6

Handig door Arthur gebruikt:

---

Meer handleidingen over grids, rasters en blokken met afbeeldingen

• Grid stramien maken WordPress website webdesign vormgeving
• Grid raster layout ontwerp maken met WordPress plugin
• Justified Image Grid plugin fotogalerij maken afbeeldingen
• Rule of thirds raster compositie web-design
• Blog berichten op pagina met Elementor en Page Builders

Problemen met deze galerij plugin

In een enkel geval kun je een probleem met de plugin hebben als de zogenaamde TimThumb & CDN instellingen niet goed werken. De oplossing kun je hier vinden:
Probleem fotogalerij afbeeldingen WordPress plugin

Galerij plugin kopen

Galerij plugin kopen