Photo Gallery Using Native WordPress Media Library
-
Hi Everyone,
Like most people I don’t like to weigh down my website with plugins, so I’m trying to set one up using the native wordpress media gallery. What I would like to produce is a galleries like this http://roxannecook.com/#portfolio, where each
<li>
has its own FancyBox gallery.
According to FancyBox, the photos in the<li>
must follow this format to work:<a href="mainimage.jpg" data-fancybox-type="monkeys"><img src="mainimage.jpg"></a> <a href= "image2.jpg" data-fancybox-type="monkeys"></a> <a href= "image3.jpg" data-fancybox-type="monkeys"></a> <a href= "image4.jpg" data-fancybox-type="monkeys"></a>
where the mainimage.jpg will show and the subsequent images will appear once in the gallery (I left out a little code there and put in some arbitrary names, but you get the point).
The issue is that I can’t figure out how to get the images to output in this format (markup) using wordpress’s functions, and I’m no PHP expert. In the case of my website, I am trying to output all of the attachment images of each post (in a particular category) and display the featured image as the main image for each
<li>
.
This is what I’ve attempted so far:<?php if(has_post_thumbnail()) { echo '<a href="" class="fancybox" data-fancybox-type="' . get_post_thumbnail_id() . '">' . the_post_thumbnail("evento").'</a>'; } else { echo '<img src="'.get_bloginfo("template_url").'/images/artistas_noimage.jpg" />';} ?> <?php $attachments = get_posts( array( 'post_type' => 'attachment', 'posts_per_page' => -1, 'post_parent' => $post->ID, 'exclude' => get_post_thumbnail_id() ) ); if ( $attachments ) { foreach ( $attachments as $attachment ) { echo "<a href=" . wp_get_attachment_url( $attachment->ID, true ) . " class='fancybox' data-fancybox-type='" . get_post_thumbnail_id() . "'>"; } } ?>
But this outputs:
<img class="attachment-evento wp-post-image" width="231" height="191" title="NM" alt="NM" src="http://localhost/kaniwa/wp-content/uploads/2012/07/NM3-231x191.jpg"> <a class="fancybox" data-fancybox-type="156" href=""></a> <a class="fancybox" data-fancybox-type="156" href="http://localhost/kaniwa/wp-content/uploads/2012/07/carnetfront.jpeg"> </a>
The subsequent photos are ok, but I can’t get the featured image to show up with the correct markup.
Any help is greatly appreciated!
-Sean
[Moderator Note: Please post all code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]
- The topic ‘Photo Gallery Using Native WordPress Media Library’ is closed to new replies.