Kampfotografie.nl

gallery_home

Realisatie kampfotografie.nl op basis van WordPress met PHP, JavaScript en HTML/CSS.

De techniek achter kampfotografie.nl

Kampfotografie heeft veel gelijkenissen met fotoportfolio’s die ik eerder heb gerealiseerd. De centrale gallery is een combinatie van de technieken achter bolletoet.nl en sylviaoverkamp.nl. Horizontaal simuleert de gallery een eindeloze ring van foto’s, waar de gebruiker eindeloos in kan doorklikken, net als op sylviaoverkamp.nl. Verticaal worden de foto’s gemaximaliseerd zodat de foto’s van hoge kwaliteit zo groot mogelijk worden weergegeven, net als op bolletoet.nl. Niet eerder bracht ik deze functionaliteiten samen. Bovendien koos ik niet eerder voor WordPress als basis achter een fotoportfolio als dit. Voorheen gaf ik de voorkeur aan GalleryCMS. Het volgende geeft een kort beeld van de overweging, de keuze en de gevolgen voor de realisatie. Kennis van GalleryCMS en WordPress wordt verondersteld.

Keuze voor WordPress

Zowel GalleryCMS als WordPress hebben updates gekregen sinds de realisatie van het vorige fotoportfolio dat ik deed. Aanleiding voor mijn keuze voor WordPress is de filosofie achter de realisatie van de nieuwe versie van GalleryCMS. Mijn aanpassingen aan de vorige versie van GalleryCMS zijn niet alleen onverenigbaar met de nieuwe versie, de nieuwe versie implementeert voor dezelfde problemen andere oplossingen, ik kan mij niet vinden in de gedachte achter deze oplossingen. Bovendien maakt WordPress 3.5 indruk met de compleet nieuwe flow voor het uploaden van afbeeldingen en aanmaken van galeries. Uiteindelijk besloot ik het te wagen en bleek niet veel meer dan één snippet nodig te zijn voor de koppeling tussen de frontend JavaScript gallery (waar json verwacht wordt) en de PHP backend, waar WordPress ‘posts’ aangeleverd worden.

Galeries naar JSON

Om van WordPress posts met WordPress 3.5 galeries naar een json encoded data array te gaan heb ik de volgende code binnen ‘de loop’ opgenomen:

$post_content = get_the_content();
                preg_match('/\[galler y.*ids=.(.*).\]/', $post_content, $ids); //remove the space between 'galler' and 'y'
                $array_id = explode(",", $ids[1]);
                $images = array();

                if ('' != ($ids[1])) {
                    $i = 0;
                    foreach ( $array_id as $attachment_id) {
                        $post = get_post($attachment_id);
                        $image_info = wp_get_attachment_image_src( $attachment_id, 'large' );

                        $images[$i]['url']= $image_info[0];
                        $images[$i]['width'] = $image_info[1];
                        $images[$i]['height'] = $image_info[2];
                        $images[$i]['title'] = get_the_title($attachment_id);
                        $images[$i]['desc'] = $post->post_excerpt;
                        $i++;
                    }
                }

Deze code haalt uit een post de gallery, daaruit alle afbeeldingen en zet deze in een array, klaar om via json_encode() naar JavaScript doorgegeven te worden.

Leave a Reply

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>