Extract first Gallery image from post and link other images with greybox
by zartgesotten on Juni 17, 2009
In a recent project I saw myself confronted with this:
The client wanted the following features:
Assumption:Â Every post has one or more images attached (wordpress integrated gallery function)
- show the first image in its medium size (definied in wordpress standard multimedia options)
- on click open image (full size) in greybox with all other images linked in an imageset so you can navigate through all images of the post inside the greybox window
- image order should be as defined in the gallery of the post (drag and drop ordering)
This is the code I came up with. You have to have Greybox installed and the code has to be inserted in the loop.
If you can come up with any better coding, write me and I’ll be happy to look into it. I’m by no means a programmer. This was a lot of trial and error. So I’m very proud of this! 
Because there have been problems with copied code, you can download the code as txt file here.
If this makes you happy, please comment. Thank you!
<!--Automatic Greybox-->
<?php
//Die zum Post gehoerenden Bilder ins Array $images schreiben
//Put images from post in to array $images. Order by menu order defined in post gallery
$images = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
//Pruefen, ob dem Beitrag Bilder angehaengt wurden.
//check if there are any images attached to the post
if (isset($images))
{
//Den Zaehler auf 0 setzen
//set counter to 0
$count=0;
//Alle Bilder im Array $images nacheinander durchlaufen
//go through all images in array $images
foreach( $images as $image )
{
$imageID = $image->ID;
//fuer jedes Bild im Array die URL von sowohl der Mittleren, als auch der grossen Groesse ermitteln.
//get medium and large image url for image
$medImageSrc = wp_get_attachment_image_src($imageID, $size='medium', $icon = false);
$largeImageSrc = wp_get_attachment_image_src($imageID, $size='large', $icon = false);
//Wenn es sich um das erste Bild im Array handelt...
//If it's the first image in the array
if ($count==0)
{
//Den Greybox-Code mit einem Vorschaubild ausgeben
//output Greybox Code with medium size preview
echo"<a href='$largeImageSrc[0]' rel='shadowbox[Bilder]'><img src='$medImageSrc[0]' border='0'></a>";
}
//alle Bilder ,die nach dem erstern Bild kommen
//this is for all the images that come after the first one
else
{
//unsichtbare Greybox-Verknuepfung darstellen.
//create invisible Greybox-Links without preview image
echo"<a href='$largeImageSrc[0]' rel='shadowbox[Bilder]'></a>";
}
//Zaehler erhoehen.
//increase counter
$count++;
} //foreach
}
?>
<!--ENDE Automatic Greybox -->
<?php
//Die zum Post gehoerenden Bilder ins Array $images schreiben
//Put images from post in to array $images. Order by menu order defined in post gallery
$images = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
//Pruefen, ob dem Beitrag Bilder angehaengt wurden.
//check if there are any images attached to the post
if (isset($images))
{
//Den Zaehler auf 0 setzen
//set counter to 0
$count=0;
//Alle Bilder im Array $images nacheinander durchlaufen
//go through all images in array $images
foreach( $images as $image )
{
$imageID = $image->ID;
//fuer jedes Bild im Array die URL von sowohl der Mittleren, als auch der grossen Groesse ermitteln.
//get medium and large image url for image
$medImageSrc = wp_get_attachment_image_src($imageID, $size='medium', $icon = false);
$largeImageSrc = wp_get_attachment_image_src($imageID, $size='large', $icon = false);
//Wenn es sich um das erste Bild im Array handelt...
//If it's the first image in the array
if ($count==0)
{
//Den Greybox-Code mit einem Vorschaubild ausgeben
//output Greybox Code with medium size preview
echo"<a href='$largeImageSrc[0]' rel='shadowbox[Bilder]'><img src='$medImageSrc[0]' border='0'></a>";
}
//alle Bilder ,die nach dem erstern Bild kommen
//this is for all the images that come after the first one
else
{
//unsichtbare Greybox-Verknuepfung darstellen.
//create invisible Greybox-Links without preview image
echo"<a href='$largeImageSrc[0]' rel='shadowbox[Bilder]'></a>";
}
//Zaehler erhoehen.
//increase counter
$count++;
} //foreach
}
?>
<!--ENDE Automatic Greybox -->
Leave your comment