Skip to content

Instantly share code, notes, and snippets.

@epicmonkeez
Last active December 20, 2015 09:09
Show Gist options
  • Save epicmonkeez/6106237 to your computer and use it in GitHub Desktop.
Save epicmonkeez/6106237 to your computer and use it in GitHub Desktop.
This little WordPress Gist shows the thumbnail of a post and a link called 'slides' to startup a Lightbox/Slideshow with all the images stored in the post custom field called 'portfolio_slideshow'. - Use within the WordPress Loop. - Used Magicfields plugin to add a field for posts called 'portfolio_slideshow' which can be duplicated. - Use with …
<div class="thumb design development ">
<div class="thumb-img">
<a class="th" href="#" title="Image for the lightbox" rel="bookmark">
<img src="/wp-content/uploads/2013/07/post-thumbnail-image.jpg" class="attachment-wide-thumb wp-post-image" alt="" />
</a>
<div class="caption">
<div>
<span>Image caption</span>
</div>
<div>
<a href="/wp-content/files_mf/image1.jpg" rel="shadowbox[1]" title="Image for the Lightbox">Slides</a>
</div>
</div>
<div class="excerpt">
<h3 class="blog-title">Page title</h3>
<p>Quisque a hendrerit metus, vel dapibus erat. Sed et risus elit. Nam vitae pharetra elit. Curabitur vel consectetur odio.</p>
</div>
</div>
<a href="/wp-content/files_mf/image2.jpg" rel="shadowbox[1]" class="hidden" title="Image for the lightbox"></a>
<a href="/wp-content/files_mf/image3.jpg" rel="shadowbox[1]" class="hidden" title="Image for the lightbox"></a>
</div>
<div class="thumb-img">
<a class="th" href="#" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'epicmonkeys' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_post_thumbnail(); ?></a>
<?php
$postid = get_the_ID();
$caption = get_the_title(); // We use the posts title as caption
$my_image_url = get('portfolio_slideshow'); // Images are stored in an array of custom fields (we used Magic Fields for that)
?>
<div class="caption">
<div><?php the_post_thumbnail_caption(); ?></div>
<div><a href="<?php echo $my_image_url ?>" rel="shadowbox[<?php echo $postid; ?>]" title="<?php echo $caption ?>">Slides</a></div>
</div>
<!-- Check if the post has an excerpt, if so post the title and the excerpt -->
<?php if($post->post_excerpt) : ?>
<div class="excerpt">
<h3 class="blog-title"><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
<?php endif; ?>
</div>
<!-- Get the links for the rest of the slideshow -->
<?php $fotos = get_field('portfolio_slideshow'); // Get the rest of the slideshow images
foreach (array_slice($fotos, 1) as $foto) { // Skip the first image cause it is been displayed with the caption
printf('<a href="%s" rel="shadowbox[%s]" class="hidden" title="%s"></a>', $foto['original'], $postid, $caption ); // Used the class=hidden, not really needed
} ?>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment