Last active
December 20, 2015 09:09
-
-
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 …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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