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.
IN DEZE HANDLEIDING:
- 1 Een reeks afbeeldingen of foto's in een WordPress galerij
- 2 4 belangrijke tips voor de Justified Image Grid plugin
- 3 Voorbeelden Justified Image Grid WordPress plugin
- 4 Extra tips en instellingen
- 5 Galerij maken binnen een page builder (Elementor)
- 6 Meer voorbeelden van Arthur
- 7 Problemen met deze galerij plugin
Een reeks afbeeldingen of foto's in een WordPress galerij
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:
- 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“
- 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. - 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. - 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.
Ga naar plugin website
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:
- 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. - 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
<br>
Voor grote afbeeldingen in de galerij | shortcode
<br>
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:
- WordPress en Adobe Photoshop Afbeeldingen perfect maken
- Verhouding en resolutie van foto's afbeeldingen voor webdesign
- WordPress galerij maken reeks serie foto's afbeeldingen
- Afbeeldingen SEO optimaliseren WordPress handleiding gevorderden
- Beste gratis rechtenvrije foto's afbeeldingen, stockfoto's, fotografie
- Justified Image Grid plugin fotogalerij maken met afbeeldingen in WordPress
- Resolutie foto's afbeeldingen geschikt maken voor WordPress
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]<code>
6
<code>
<code>
<code>
<code>
<code>
<code>
Handig door Arthur gebruikt:
<br>
3
4
5
6
Handig door Arthur gebruikt:
Meer handleidingen over grids, rasters en blokken met afbeeldingen
- Grid stramien maken WordPress website webdesign vormgeving
- Galerij grid afbeeldingen maken WordPress Beaver builder module
- Beste typografie hulpmiddelen tools voor ontwerper webdesigner webdesign
- Grid Template Areas css html div wordpress
- Portfolio maken in WordPress website met thema of plugin
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