Justified Image Grid WordPress plugin | fotogalerij maken met afbeeldingen

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 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




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.


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:


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



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

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.


Voor kleine afbeeldingen in de galerij

 

There are no photos with those IDs or post 9460 does not have any attached images!



Voor grote afbeeldingen in de galerij

 

There are no photos with those IDs or post 9460 does not have any attached images!



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

Voorbeelden

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


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

3
[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]
4
[justified_image_grid last_row=hide recent_posts=yes recents_include=226]
5
[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

[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_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]

[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_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]

[justified_image_grid ids=14006,13824 prettyphoto_theme=dark_square caption=reverse-slide caption_match_width=yes-rounded caption_align=right overlay=others overlay_opacity=0 inner_shadow="0 0 30px black" lightbox=prettyphoto mobile_lightbox=no use_timthumb=no limit=1 hidden_limit=2]

[justified_image_grid ids="15776,15775,15774,15772,15771,15768,15770,15769" row_height=200 height_deviation=50 caption_bg_color=#c0cf6e caption_text_color=black specialfx=captions specialfx_type=blur lightbox=prettyphoto mobile_lightbox=no]

[justified_image_grid preset=17 ids=15776,15775,15774,15772,15771,15768,15770,15769 row_height=200 height_deviation=50 link_title_field=caption img_alt_field=alternate prettyphoto_theme=dark_square caption=reverse-fade overlay=others overlay_opacity=0.4 lightbox=prettyphoto mobile_lightbox=no]

Handig door Arthur gebruikt:
[justified_image_grid thumbs_spacing=20 row_height=210 height_deviation=50 mobile_row_height=150 mobile_height_dev=50 max_rows=99 last_row=hide recent_posts=yes recents_include=6]

3
There are no recent posts with featured images.
4


5

6

There are no recent posts with featured images. There are no recent posts with featured images. There are no photos with those IDs or post 9460 does not have any attached images!

Handig door Arthur gebruikt: