Support » Fixing WordPress » Shadowbox Gallery DIRECT from Post Thumbnail link

  • Fellow Devs:
    I’m trying to render something similar to http://www.eric-powell.com ; in other words, a category view of multiple posts (thumbnails) that will click not through to a single post view, but will instead open the gallery of each post in a shadowbox. I’ve been sweating over this far too long and thought it was time to turn to the forums to see what i could find; alas, no one has really requested this.

    So here’s what I have for my category.php (truncated for simplicity):

    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    	<div class="post">
    		<a rel="shadowbox[<?php echo $post->post_name; ?>]" href="<?php echo get_the_link('custom_key=Thumbnail&default_size=full&order_of_image=2&image_scan=false');  ?>">
    			<img class="thumbnail" src="<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array( 260,165 ), false, '' ); echo $src[0]; ?>" width="260" height="165" alt="<?php echo the_title(); ?>" />
    		</a>
    	</div>

    … and then the continuation of the loop that doesn’t deviate far from the default them of WordPress.

    Looking at the code from the aformentioned site (http://www.eric-powell.com), the link is out to the first gallery image; which is why i was trying to call the url for the first image in the gallery, as seen starting on line 4 here.

    Result: http://lenaott.com/blog/category/portfolio/

    As you can see, shadowbox is working; problem is there happens to be 4 images in that gallery, and they’re not being called into the shadowbox. The code that spits out shows that it’s referencing the proper gallery (or so it seems), just not getting all the images… I’m left with a shadowbox of the thumbnail I’ve clicked on and nothing more.

    In the name of full disclosure, I have the following appropriate plugins installed:

    1. Shadowbox
    2. get_the_image
    3. get_the_link (relies upon get_the_image to grab image urls)

    I am aware that eric-powell.com uses the gallery theme, however due to the unnecessary loading of lots of different things that come along with the thematic framework, I’ve opted to build a custom theme instead; I’ve scoured the functions.php file of that particular theme and child theme with no luck… in fact I’m sure it’s been changed, as the functions.php of the gallery theme calls merely a permalink for the anchor that the thumbnails(s) are wrapped in.

    Any and all help is ALWAYS greatly appreciated! Even paid if my mind is blown (which it likely will be… either that or I’ll be dumbfounded by my own stupidity in overlooking something clear).

Viewing 11 replies - 1 through 11 (of 11 total)
  • It looks like you figured it out. Care to share?

    Oh wait. Okay – you haven’t quite got it yet. Neither have I.

    So far, I have this:

    <div class="entry-content">
    					<?php childtheme_post_header() ?>
    <?php
    
    $args = array(
    	'post_type' => 'attachment',
    	'numberposts' => 1,
    	'post_status' => null,
    	'post_parent' => $post->ID
    	); 
    
    $attachments = get_posts($args);
    	if ($attachments) {
    	foreach ($attachments as $attachment) { ?>
    		<a href="<?php echo wp_get_attachment_url($attachment->ID); ?>" rel="shadowbox[<?php echo $post->post_name; ?>]"><span class="slide-title"><?php echo the_title(); ?></span>
                        <img class="thumbnail" src="<?php if(get_post_meta($post->ID, 'thumbnail', $single = true)){echo get_post_meta($post->ID, 'thumbnail', $single = true);} else{bloginfo('url'); echo "/wp-content/themes/gallery/images/thumbnail-default.jpg";} ?>" width="125" height="125" alt="<?php echo the_title() ?>" /></a>
    		<?php }
    	}
    
    ?>					
    
    <span class="hide"
    <?php
    
    $args = array(
    	'post_type' => 'attachment',
    	'numberposts' => -1,
    	'offset' => 1,
    	'post_status' => null,
    	'post_parent' => $post->ID
    	); 
    
    $attachments = get_posts($args);
    	if ($attachments) {
    	foreach ($attachments as $attachment) { ?>
    		<a href="<?php echo wp_get_attachment_url($attachment->ID); ?>" rel="shadowbox[<?php echo $post->post_name; ?>]"><img src="<?php echo wp_get_attachment_url($attachment->ID); ?>" alt="" /></a>
    		<?php }
    	}
    
    ?>
    </span>
    
    				</div>

    It’s a bit messy right now, and it’s sort of doing what it’s supposed to. It’s at least grabbing all of the images from the single post. I haven’t quite figured out how to grab the first part of the foreach, and apply the first attachment id to that first link, and then hide the rest of the attachments without creating duplicates.

    I may have just got it. Again – messy, so if you find a cleaner way of doing this, let me know.

    // Creating the content for the INDEX
    function remove_index_loop() {
      remove_action('thematic_indexloop', 'thematic_index_loop');
    }
    add_action('init', 'remove_index_loop');
    
    function gallery_index_loop() {
      global $post;
      /* Count the number of posts so we can insert a widgetized area */ $count = 1;
      while ( have_posts() ) : the_post() ?>
    
    			<div id="post-<?php the_ID() ?>" class="<?php
    			thematic_post_class();
    			if(function_exists('p75GetVideo')){
    		    if(p75GetVideo($post->ID)){
    				  echo " video";
    				}
    			}
    			?>">
    				<div class="entry-content">
    					<?php childtheme_post_header() ?>
    <?php
    
    $args = array(
    	'post_type' => 'attachment',
    	'numberposts' => 1,
    	'post_status' => null,
    	'post_parent' => $post->ID
    	); 
    
    $attachments = get_posts($args);
    	if ($attachments) {
    	foreach ($attachments as $attachment) { ?>
    		<a href="<?php echo wp_get_attachment_url($attachment->ID); ?>" rel="shadowbox[<?php echo $post->post_name; ?>]"><span class="slide-title"><?php echo the_title(); ?></span>
                        <img class="thumbnail" src="<?php if(get_post_meta($post->ID, 'thumbnail', $single = true)){echo get_post_meta($post->ID, 'thumbnail', $single = true);} else{bloginfo('url'); echo "/wp-content/themes/gallery/images/thumbnail-default.jpg";} ?>" width="125" height="125" alt="<?php echo the_title() ?>" /></a>
    		<?php }
    	}
    
    ?>					
    
    <span class="hide">
    <?php
    
    $args2 = array(
    	'post_type' => 'attachment',
    	'numberposts' => -1,
    	'exclude' => $attachment->ID,
    	'post_status' => null,
    	'post_parent' => $post->ID
    	); 
    
    $attachments2 = get_posts($args2);
    	if ($attachments2) {
    	foreach ($attachments2 as $attachment2) { ?>
    		<a href="<?php echo wp_get_attachment_url($attachment2->ID); ?>" rel="shadowbox[<?php echo $post->post_name; ?>]"><img src="<?php echo wp_get_attachment_url($attachment2->ID); ?>" alt="" /></a>
    		<?php }
    	}
    
    ?>
    </span>
    
    				</div>
    			</div><!-- .post -->
    
        <?php comments_template();
    
        if ($count==$thm_insert_position) {
          get_sidebar('index-insert');
        }
        $count = $count + 1;
      endwhile;
    }
    add_action('thematic_indexloop', 'gallery_index_loop');
    // End of INDEX

    Just had a more competent programmer look at it and clean it up. Here’s the Index Function for the Gallery theme, cleaned up to behave like http://eric-powell.com.

    // Creating the content for the INDEX
    function remove_index_loop() {
      remove_action('thematic_indexloop', 'thematic_index_loop');
    }
    add_action('init', 'remove_index_loop');
    
    function gallery_index_loop() {
      global $post;
      /* Count the number of posts so we can insert a widgetized area */ $count = 1;
      while ( have_posts() ) : the_post() ?>
    
    			<div id="post-<?php the_ID() ?>" class="<?php
    			thematic_post_class();
    			if(function_exists('p75GetVideo')){
    		    if(p75GetVideo($post->ID)){
    				  echo " video";
    				}
    			}
    			?>">
    				<div class="entry-content">
    					<?php childtheme_post_header() ?>
    
    <?php
        $attachments = get_posts( array(
            'post_type' => 'attachment',
    		'orderby' => menu_order,
    		'order' => ASC,
            'post_status' => null,
            'post_parent' => $post->ID
        ));
    
        $first_attachement = array_shift( $attachments );
    
    	if( $first_attachement ) { ?>
    		<?php $first_img_name = apply_filters('the_title', $first_attachement->post_title); ?>
            <a href="<?php echo wp_get_attachment_url($first_attachement->ID); ?>" rel="shadowbox[<?php echo $post->post_name; ?>]" title="<?php echo $first_img_name; ?>"><span class="slide-title"><?php echo the_title(); ?></span>
            <img class="thumbnail" src="<?php if(get_post_meta($post->ID, 'thumbnail', $single = true)){echo get_post_meta($post->ID, 'thumbnail', $single = true);} else{bloginfo('url'); echo "/wp-content/themes/gallery/images/thumbnail-default.jpg";} ?>" width="125" height="125" alt="<?php echo the_title() ?>" /></a>
    	<?php }
    ?>
    
    <span class="hide">
        <?php
            if( $attachments ) {
                foreach ($attachments as $attachment) { ?>
                	<?php $sbox_img_name = apply_filters('the_title', $attachment->post_title); ?>
                    <a href="<?php echo wp_get_attachment_url($attachment->ID); ?>" rel="shadowbox[<?php echo $post->post_name; ?>]" title="<?php echo $sbox_img_name; ?>" ><img src="<?php echo wp_get_attachment_url($attachment->ID); ?>" alt="" /></a>
                <?php }
            }
        ?>
    </span>
    				</div>
    			</div><!-- .post -->
    
        <?php comments_template();
    
        if ($count==$thm_insert_position) {
          get_sidebar('index-insert');
        }
        $count = $count + 1;
      endwhile;
    }
    add_action('thematic_indexloop', 'gallery_index_loop');
    // End of INDEX

    I am trying to do something like this. My old site was a grid layout with a page for each posting. The thumbnail was a larger photo inside the post and when clicked, would open a shadowbox video. I created this all in dreamweaver so it was very customizable. Now, new to wordpress (and loving every minute of it), I would love the gallery to function this same way. Here’s the new site I am working on using the theme.

    I have the shadowbox plugin installed and it works if I link to the video file IN the post but I want the picture in the post to open the shadowbox.

    I am way green in the ways of WordPress so as close as you can get to “step by step” if you will (basically what files do I edit in the ‘editor’ with what coding) would be very very appreciated. I am not completely unfamiliar with coding as I have a “favicon” and replaced the “gallery” image with my own. Hopefully it’s just that simple and I don’t know what I’m looking for.

    Let me know if there’s anything you need from me. Thanks!

    The code in the post directly above can be copied and pasted directly into your functions.php file in your theme folder, over the section that starts with

    // Creating the content for the INDEX

    and ends with

    // End of INDEX

    That should do what you want it to. if not, drop me a line over at http://www.march1studios.com

    Ok, from what i understand is that the shadowbox DIRECTS from the thumbnail within a post. Is it possible to have the thumbnail on the index.php DIRECTS to the shadowbox? So when I post a new blog with thumbnail, clicking the thumbnail will open the shadowbox instead of the blogmessage.

    The reason why im achieving this, is because I’ll be using a one-page portfolio.

    Any help will be appreciated.

    Using the above code inserted into functions.php in the gallery theme. Shadowbox.js plugin installed. I want to use this specifically to launch video from the thumbnail. So far so good. It works – sort of. The problem I have is that I cannot seem to change the scaling of the video. The shadowbox defaults to a specific size not at all in relation to the video size.

    I’ve changed the plugin settings. I’ve used the following tag parameters to define the video size:

    My Movie

    And yet it will not budge!

    I had the p75 simple video embedder installed but found using the embedding window with specific quicktime embedding code had no effect. I unistalled simple video embedder and the video still launched okay, but again the wrong size.

    Any suggestions?

    the tag parameters did not display the way I intended:

    rel=”shadowbox;height=405;width=720″>

    was added within the a href embed code to define the shadowbox size.

    I found a partial solution. In the functions.php code insert from above there is a call to shadowbox twice:

    rel=”shadowbox[<?php echo $post->post_name; ?>]

    by changing it to this:

    rel=”shadowbox;height=405;width=720[<?php echo $post->post_name; ?>]

    I get the correct h/w of the video… However this fixes that h/w for all videos. Substituting “auto” breaks shadowbox. Anyone?

    I can’t even find the get_the_link plugin.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Shadowbox Gallery DIRECT from Post Thumbnail link’ is closed to new replies.