Skip to content

Instantly share code, notes, and snippets.

@zoerooney
Created April 3, 2013 17:40
Show Gist options
  • Save zoerooney/5303433 to your computer and use it in GitHub Desktop.
Save zoerooney/5303433 to your computer and use it in GitHub Desktop.
Code from a tutorial on creating a Galleriffic + WordPress Gallery post format (http://zoerooney.com/blog/tutorials/using-galleriffic-galleries-for-the-gallery-post-format/)
<?php if ( has_post_format( 'gallery' )) { ?>
<div class="controls"></div>
<div class="slideshow"></div>
<div class="captionbox"></div>
<div class="thumb-wrapper">
<?php $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'post_status' => null, 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => -1 ) );
if( $images ): ?>
<ul class="thumbs noscript">
<?php foreach( $images as $attachment_id => $attachment ): ?>
<li>
<a class="thumb" href="<?php echo wp_get_attachment_url( $attachment_id ); ?>" title="<?php echo $attachment->post_title; ?>">
<?php echo wp_get_attachment_image( $attachment_id, 'thumbnail' ); ?>
</a>
<div class="caption">
<?php echo $attachment->post_excerpt; ?>
</div>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
<script>
jQuery(document).ready(function($){
$('.thumb-wrapper').each(function(){
$(this).galleriffic({
imageContainerSel: $(this).parent().children('.slideshow'),
controlsContainerSel: $(this).parent().children('.controls'),
captionContainerSel: $(this).parent().children('.captionbox')
});
});
});
</script>
<? } ?>
jQuery(document).ready(function($){
$('.thumb-wrapper').each(function(){
$(this).galleriffic({
imageContainerSel: $(this).parent().children('.slideshow'),
controlsContainerSel: $(this).parent().children('.controls'),
captionContainerSel: $(this).parent().children('.captionbox')
});
});
});
<div class="controls"></div>
<div class="slideshow"></div>
<div class="captionbox"></div>
<div class="thumb-wrapper">
<!-- This is where we grab all the attached images -->
<ul class="thumbs noscript">
<!-- This is where we loop through the images -->
<li>
<!-- Everything in here is the same as before, see the full code below -->
</li>
<!-- The foreach ends here -->
</ul>
<!-- Our conditional from grabbing the images ends here -->
</div>
if ( has_post_format( 'gallery' )) {
// everything in here is only shown for this post format
}
add_theme_support( 'post-formats', array( 'gallery' ) );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment