Support » Fixing WordPress » Photo Gallery Using Native WordPress Media Library

  • seansean11


    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, 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" />';} ?>
    				$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!


    [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.