Adding ColorBox link to featured images in PHP WordPress
- SOLVED
Hello,
I need help on this one.
I'm working on a [[LINK href="http://www.acielouvert.net/heygee/"]]WP website[[/LINK]] with "Shaken Grid" theme which I customized quite a bit.
The theme comes with ColorBox that I would like to add on the featured images.
This comes from the FAQ :
<blockquote>How do I add additional images to the lightbox, besides just the featured images?
To include images in the lightbox group that is displayed when you click the “Enlarge” button, you need to place a link around your image that points to the large version of that image. Inside of that link you need to add a rel="gallery" attribute.
Below is an example of what the code should look like:
<a rel="gallery" href="LINK TO LARGE IMAGE">
<img src="IMAGE THUMBNAIL" />
</a></blockquote>
And here is the PHP code to display the appropriate sized featured image :
// Display the appropriate sized featured image
if( $my_size != 'col2' ): ?>
<a href="<?php the_permalink(); ?>" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php the_permalink(); ?>" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif;
So I need to place a link around my image that points to the large version of that image.
How do I do such a thing in PHP ?
Thanks for your help.
Answers (4)
Francisco Javier Carazo Gil answers:
Hi,
Guillaume, in your current code you have a link to the post, not to the original size of image.
Inside your href in your a tag you need something like this:
wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];
Francisco Javier Carazo Gil comments:
This would give you "LINK TO LARGE IMAGE"
guillaume guillaume comments:
Thanks for your answer.
I use this :
// Display the appropriate sized featured image
if( $my_size != 'col2' ): ?>
<a href="wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif;
The ColorBox show up but without any pictures inside.
Francisco Javier Carazo Gil comments:
You have to use PHP tags:
// Display the appropriate sized featured image
if( $my_size != 'col2' ): ?>
<a href="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0]; ?>" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0]; ?>" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif;
guillaume guillaume comments:
With this code all featured images disappear.
Arnav Joy answers:
use this
// Display the appropriate sized featured image
<?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); ?>
<?php
if( $my_size != 'col2' ): ?>
<a href="<?php echo $large_image_url[0]; ?>" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php echo $large_image_url[0]; ?>" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif;
guillaume guillaume comments:
Hello,
When I use your code all featured images in the page disappear.
Don't know why.
Arnav Joy comments:
ok now try this
// Display the appropriate sized featured image
if( $my_size != 'col2' ): ?>
<a href="echo wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="echo wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif;
// Note : you have to use echo in the code given by Francisco Javier Carazo Gil
Arnav Joy comments:
this is the modified version of the code
// Display the appropriate sized featured image
if( $my_size != 'col2' ): ?>
<a href="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];?>" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];?>" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif;
// you have not used <?php ?> before the code
guillaume guillaume comments:
The ColorBox show up and I get this :
The requested content cannot be loaded.
Please try again later.
Arnav Joy comments:
I think you forgot to close any open php tag inside file
can you show me the full code of file
guillaume guillaume comments:
Here is the full code of the loop.php with your code :
<?php
/**
* Posts Loop
*
* This file is responsible for outputting the
* blog posts as well as filter options (if
* the user is viewing the frontpage).
*
* In the event that the html needs to be modified,
* this template may be duplicated inside a child theme
* and edited there.
*
* @package Shaken Grid (Premium)
* @since 1.0
* @alter 2.0
*
<?php
/**
* Display ALL posts
*
* If this is the homepage and the "show all posts on blog" option
* is checked in the theme options, then display all posts on one
* page without pagination.
*/
if( is_home() && !is_search() && ( of_get_option( 'show_all' ) || of_get_option( 'frontpage_category' ) ) ):
$query_string = false;
if( of_get_option('show_all') ){
$query_string = 'posts_per_page=-1';
}
if( of_get_option('frontpage_category') && of_get_option('frontpage_category') != 'all' ){
if(of_get_option('show_all')){
$query_string .= '&';
}
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$query_string .= 'cat='.of_get_option('frontpage_category').'&paged='.$paged;
}
if( $query_string ){
query_posts($query_string);
}
endif;
/* Say hello to the Loop... */
if ( have_posts() ) :
/* Anything placed in #sort is positioned by jQuery Masonry */ ?>
<div class="sort">
<?php // Display sidebar if it has widgets assigned to it
if( is_active_sidebar( 'gallery-sidebar' ) ) : ?>
<div class="all box col2" id="gallery-sidebar">
<div class="box-content">
<?php get_sidebar(); ?>
</div>
</div>
<?php endif; ?>
<?php // Display ads set in theme options
get_template_part( 'includes/ads'); ?>
<?php while ( have_posts() ) : the_post();
global $my_size, $force_feat_img, $embed_code, $vid_url;
// Gather custom fields
$embed_code = get_post_meta($post->ID, 'soy_vid', true);
$vid_url = get_post_meta($post->ID, 'soy_vid_url', true);
$force_feat_img = get_post_meta($post->ID, 'soy_hide_vid', true);
$show_title = get_post_meta($post->ID, 'soy_show_title', true);
$show_desc = get_post_meta($post->ID, 'soy_show_desc', true);
$box_size = get_post_meta($post->ID, 'soy_box_size', true);
if( $box_size == 'Medium (485px)' ){
$my_size = 'col3';
$embed_size = '485';
} else if( $box_size == 'Large (660px)' ){
$my_size = 'col4';
$embed_size = '660';
} else if( $box_size == 'Tiny (135px)' ){
$my_size = 'col1';
$embed_size = '135';
}else{
$my_size = 'col2';
$embed_size = '310';
}
/* Check whether content is being displayed
* This determines whether a border should be applied
* above the postmeta section
*/
if($show_title != 'No'){
$content_class = 'has-content';
} else if($show_desc != 'No' && $post->post_content){
$content_class = 'has-content';
}else {
$content_class = 'no-content';
}
// Assign categories as class names to enable filtering
$category_classes = '';
foreach( ( get_the_category() ) as $category ) {
$category_classes .= $category->category_nicename . ' ';
}
?>
<div class="all box <?php echo $category_classes . $my_size; ?>">
<div <?php post_class( 'box-content '.$content_class ) ?>><div class="post-content"><span class="caption">
<?php // Display post title
if( $show_title != 'No' && !has_post_format('quote') ): ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark" class="colorbox">
<?php the_title(); ?>
</a></h2>
<?php endif;
// Display post content
if( is_search() && $show_desc != 'No' ):
the_excerpt(); // Only display excerpts for search results
elseif( $show_desc != 'No' ):
if( has_excerpt() ){
the_excerpt();
} else{
the_content(__('Continue Reading →', 'shaken'));
}
endif; ?>
<?php edit_post_link(__('Edit this post', 'shaken')); ?>
</div><!-- #entry -->
<?php // Display post footer
if( $my_size != 'col1' ): ?>
<div class="post-footer">
<span class="category-ic"><?php the_category(', '); ?></span>
<a href="<?php echo wp_get_shortlink(); ?>" class="shortlink tooltip" title="Shortlink"><?php _e('Shortlink', 'shaken'); ?></a>
</div>
<?php endif; ?>
</span></div><!-- #box-content -->
<?php
// Display video if available
if( ( $embed_code || $vid_url ) && !$force_feat_img ):
if( $vid_url ){
echo '<div class="vid-container">'.apply_filters('the_content', '[embed width="' . $embed_size . '"]' . $vid_url . '[/embed]').'</div>';
} else {
echo '<div class="vid-container">'.$embed_code.'</div>';
}
// Display gallery
elseif( has_post_format( 'gallery' ) && !$force_feat_img ):
get_template_part( 'includes/loop-gallery' );
// Display featured image
elseif ( has_post_thumbnail() ): ?>
<div class="img-container">
<?php
// Display the appropriate sized featured image
if( $my_size != 'col2' ): ?>
<a href="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];?>" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];?>" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif;
// Display View/Share/Comment buttons
if( !of_get_option( 'hide_action_buttons' ) ) :
get_template_part( 'includes/action-buttons' );
endif; ?>
</div>
<!-- #img-container -->
<?php if( has_post_format( 'gallery' ) ) get_template_part( 'includes/gallery-list' ); ?>
<?php endif; // #has_post_thumbnail() ?>
</div><!-- #box -->
<?php endwhile; ?>
</div><!-- #sort -->
<?php // Display pagination when applicable
if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older', 'shaken') ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer <span class="meta-nav">→</span>', 'shaken') ); ?></div>
<div class="clearfix"></div>
</div><!-- #nav-below -->
<?php endif; ?>
<?php else :
/* If there are no posts */ ?>
<div id="sort">
<div class="box">
<h2><?php _e('Sorry, no posts were found', 'shaken'); ?></h2>
<?php get_search_form(); ?>
</div>
</div><!-- #sort -->
<?php endif; ?>
Arnav Joy comments:
/*you have not provide me the original file
but try this full code:-
*/
<?php
/**
* Posts Loop
*
* This file is responsible for outputting the
* blog posts as well as filter options (if
* the user is viewing the frontpage).
*
* In the event that the html needs to be modified,
* this template may be duplicated inside a child theme
* and edited there.
*
* @package Shaken Grid (Premium)
* @since 1.0
* @alter 2.0
*
<?php
/**
* Display ALL posts
*
* If this is the homepage and the "show all posts on blog" option
* is checked in the theme options, then display all posts on one
* page without pagination.
*/
if( is_home() && !is_search() && ( of_get_option( 'show_all' ) || of_get_option( 'frontpage_category' ) ) ):
$query_string = false;
if( of_get_option('show_all') ){
$query_string = 'posts_per_page=-1';
}
if( of_get_option('frontpage_category') && of_get_option('frontpage_category') != 'all' ){
if(of_get_option('show_all')){
$query_string .= '&';
}
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$query_string .= 'cat='.of_get_option('frontpage_category').'&paged='.$paged;
}
if( $query_string ){
query_posts($query_string);
}
endif;
/* Say hello to the Loop... */
if ( have_posts() ) :
/* Anything placed in #sort is positioned by jQuery Masonry */ ?>
<div class="sort">
<?php // Display sidebar if it has widgets assigned to it
if( is_active_sidebar( 'gallery-sidebar' ) ) : ?>
<div class="all box col2" id="gallery-sidebar">
<div class="box-content">
<?php get_sidebar(); ?>
</div>
</div>
<?php endif; ?>
<?php // Display ads set in theme options
get_template_part( 'includes/ads'); ?>
<?php while ( have_posts() ) : the_post();
global $my_size, $force_feat_img, $embed_code, $vid_url;
// Gather custom fields
$embed_code = get_post_meta($post->ID, 'soy_vid', true);
$vid_url = get_post_meta($post->ID, 'soy_vid_url', true);
$force_feat_img = get_post_meta($post->ID, 'soy_hide_vid', true);
$show_title = get_post_meta($post->ID, 'soy_show_title', true);
$show_desc = get_post_meta($post->ID, 'soy_show_desc', true);
$box_size = get_post_meta($post->ID, 'soy_box_size', true);
if( $box_size == 'Medium (485px)' ){
$my_size = 'col3';
$embed_size = '485';
} else if( $box_size == 'Large (660px)' ){
$my_size = 'col4';
$embed_size = '660';
} else if( $box_size == 'Tiny (135px)' ){
$my_size = 'col1';
$embed_size = '135';
}else{
$my_size = 'col2';
$embed_size = '310';
}
/* Check whether content is being displayed
* This determines whether a border should be applied
* above the postmeta section
*/
if($show_title != 'No'){
$content_class = 'has-content';
} else if($show_desc != 'No' && $post->post_content){
$content_class = 'has-content';
}else {
$content_class = 'no-content';
}
// Assign categories as class names to enable filtering
$category_classes = '';
foreach( ( get_the_category() ) as $category ) {
$category_classes .= $category->category_nicename . ' ';
}
?>
<div class="all box <?php echo $category_classes . $my_size; ?>">
<div <?php post_class( 'box-content '.$content_class ) ?>><div class="post-content"><span class="caption">
<?php // Display post title
if( $show_title != 'No' && !has_post_format('quote') ): ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark" class="colorbox">
<?php the_title(); ?>
</a></h2>
<?php endif;
// Display post content
if( is_search() && $show_desc != 'No' ):
the_excerpt(); // Only display excerpts for search results
elseif( $show_desc != 'No' ):
if( has_excerpt() ){
the_excerpt();
} else{
the_content(__('Continue Reading →', 'shaken'));
}
endif; ?>
<?php edit_post_link(__('Edit this post', 'shaken')); ?>
</div><!-- #entry -->
<?php // Display post footer
if( $my_size != 'col1' ): ?>
<div class="post-footer">
<span class="category-ic"><?php the_category(', '); ?></span>
<a href="<?php echo wp_get_shortlink(); ?>" class="shortlink tooltip" title="Shortlink"><?php _e('Shortlink', 'shaken'); ?></a>
</div>
<?php endif; ?>
</span></div><!-- #box-content -->
<?php
// Display video if available
if( ( $embed_code || $vid_url ) && !$force_feat_img ):
if( $vid_url ){
echo '<div class="vid-container">'.apply_filters('the_content', '[embed width="' . $embed_size . '"]' . $vid_url . '[/embed]').'</div>';
} else {
echo '<div class="vid-container">'.$embed_code.'</div>';
}
// Display gallery
elseif( has_post_format( 'gallery' ) && !$force_feat_img ):
get_template_part( 'includes/loop-gallery' );
// Display featured image
elseif ( has_post_thumbnail() ):
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
?>
<div class="img-container">
<?php
// Display the appropriate sized featured image
if( $my_size != 'col2' ): ?>
<a href="<?php echo $large_image_url[0];?>" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php echo $large_image_url;?>" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif;
// Display View/Share/Comment buttons
if( !of_get_option( 'hide_action_buttons' ) ) :
get_template_part( 'includes/action-buttons' );
endif; ?>
</div>
<!-- #img-container -->
<?php if( has_post_format( 'gallery' ) ) get_template_part( 'includes/gallery-list' ); ?>
<?php endif; // #has_post_thumbnail() ?>
</div><!-- #box -->
<?php endwhile; ?>
</div><!-- #sort -->
<?php // Display pagination when applicable
if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older', 'shaken') ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer <span class="meta-nav">→</span>', 'shaken') ); ?></div>
<div class="clearfix"></div>
</div><!-- #nav-below -->
<?php endif; ?>
<?php else :
/* If there are no posts */ ?>
<div id="sort">
<div class="box">
<h2><?php _e('Sorry, no posts were found', 'shaken'); ?></h2>
<?php get_search_form(); ?>
</div>
</div><!-- #sort -->
<?php endif; ?>
Arnav Joy comments:
use this
<?php
/**
* Posts Loop
*
* This file is responsible for outputting the
* blog posts as well as filter options (if
* the user is viewing the frontpage).
*
* In the event that the html needs to be modified,
* this template may be duplicated inside a child theme
* and edited there.
*
* @package Shaken Grid (Premium)
* @since 1.0
* @alter 2.0
*
<?php
/**
* Display ALL posts
*
* If this is the homepage and the "show all posts on blog" option
* is checked in the theme options, then display all posts on one
* page without pagination.
*/
if( is_home() && !is_search() && ( of_get_option( 'show_all' ) || of_get_option( 'frontpage_category' ) ) ):
$query_string = false;
if( of_get_option('show_all') ){
$query_string = 'posts_per_page=-1';
}
if( of_get_option('frontpage_category') && of_get_option('frontpage_category') != 'all' ){
if(of_get_option('show_all')){
$query_string .= '&';
}
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$query_string .= 'cat='.of_get_option('frontpage_category').'&paged='.$paged;
}
if( $query_string ){
query_posts($query_string);
}
endif;
/* Say hello to the Loop... */
if ( have_posts() ) :
/* Anything placed in #sort is positioned by jQuery Masonry */ ?>
<div class="sort">
<?php // Display sidebar if it has widgets assigned to it
if( is_active_sidebar( 'gallery-sidebar' ) ) : ?>
<div class="all box col2" id="gallery-sidebar">
<div class="box-content">
<?php get_sidebar(); ?>
</div>
</div>
<?php endif; ?>
<?php // Display ads set in theme options
get_template_part( 'includes/ads'); ?>
<?php while ( have_posts() ) : the_post();
global $my_size, $force_feat_img, $embed_code, $vid_url;
// Gather custom fields
$embed_code = get_post_meta($post->ID, 'soy_vid', true);
$vid_url = get_post_meta($post->ID, 'soy_vid_url', true);
$force_feat_img = get_post_meta($post->ID, 'soy_hide_vid', true);
$show_title = get_post_meta($post->ID, 'soy_show_title', true);
$show_desc = get_post_meta($post->ID, 'soy_show_desc', true);
$box_size = get_post_meta($post->ID, 'soy_box_size', true);
if( $box_size == 'Medium (485px)' ){
$my_size = 'col3';
$embed_size = '485';
} else if( $box_size == 'Large (660px)' ){
$my_size = 'col4';
$embed_size = '660';
} else if( $box_size == 'Tiny (135px)' ){
$my_size = 'col1';
$embed_size = '135';
}else{
$my_size = 'col2';
$embed_size = '310';
}
/* Check whether content is being displayed
* This determines whether a border should be applied
* above the postmeta section
*/
if($show_title != 'No'){
$content_class = 'has-content';
} else if($show_desc != 'No' && $post->post_content){
$content_class = 'has-content';
}else {
$content_class = 'no-content';
}
// Assign categories as class names to enable filtering
$category_classes = '';
foreach( ( get_the_category() ) as $category ) {
$category_classes .= $category->category_nicename . ' ';
}
?>
<div class="all box <?php echo $category_classes . $my_size; ?>">
<div <?php post_class( 'box-content '.$content_class ) ?>><div class="post-content"><span class="caption">
<?php // Display post title
if( $show_title != 'No' && !has_post_format('quote') ): ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark" class="colorbox">
<?php the_title(); ?>
</a></h2>
<?php endif;
// Display post content
if( is_search() && $show_desc != 'No' ):
the_excerpt(); // Only display excerpts for search results
elseif( $show_desc != 'No' ):
if( has_excerpt() ){
the_excerpt();
} else{
the_content(__('Continue Reading →', 'shaken'));
}
endif; ?>
<?php edit_post_link(__('Edit this post', 'shaken')); ?>
</div><!-- #entry -->
<?php // Display post footer
if( $my_size != 'col1' ): ?>
<div class="post-footer">
<span class="category-ic"><?php the_category(', '); ?></span>
<a href="<?php echo wp_get_shortlink(); ?>" class="shortlink tooltip" title="Shortlink"><?php _e('Shortlink', 'shaken'); ?></a>
</div>
<?php endif; ?>
</span></div><!-- #box-content -->
<?php
// Display video if available
if( ( $embed_code || $vid_url ) && !$force_feat_img ):
if( $vid_url ){
echo '<div class="vid-container">'.apply_filters('the_content', '[embed width="' . $embed_size . '"]' . $vid_url . '[/embed]').'</div>';
} else {
echo '<div class="vid-container">'.$embed_code.'</div>';
}
// Display gallery
elseif( has_post_format( 'gallery' ) && !$force_feat_img ):
get_template_part( 'includes/loop-gallery' );
// Display featured image
elseif ( has_post_thumbnail() ):
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
?>
<div class="img-container">
<?php
// Display the appropriate sized featured image
if( $my_size != 'col2' ): ?>
<a href="<?php echo $large_image_url[0];?>" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php echo $large_image_url[0];?>" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif;
// Display View/Share/Comment buttons
if( !of_get_option( 'hide_action_buttons' ) ) :
get_template_part( 'includes/action-buttons' );
endif; ?>
</div>
<!-- #img-container -->
<?php if( has_post_format( 'gallery' ) ) get_template_part( 'includes/gallery-list' ); ?>
<?php endif; // #has_post_thumbnail() ?>
</div><!-- #box -->
<?php endwhile; ?>
</div><!-- #sort -->
<?php // Display pagination when applicable
if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older', 'shaken') ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer <span class="meta-nav">→</span>', 'shaken') ); ?></div>
<div class="clearfix"></div>
</div><!-- #nav-below -->
<?php endif; ?>
<?php else :
/* If there are no posts */ ?>
<div id="sort">
<div class="box">
<h2><?php _e('Sorry, no posts were found', 'shaken'); ?></h2>
<?php get_search_form(); ?>
</div>
</div><!-- #sort -->
<?php endif; ?>
guillaume guillaume comments:
It works but not on all featured pictures. Please have a look at the website now.
Hover below the ColorBox image to show previous and next arrow (they show on hover for now).
What I like is that you can jump from post to post inside the ColorBox, but somtimes the link doesn't works.
I think we are close to find the solution.
Do you need someting else from me, you were talking about the original file ?
Arnav Joy comments:
try my this code
http://pastebin.com/xc6v1riy
Arnav Joy comments:
yes if you can provide me the original file then please provide
guillaume guillaume comments:
OK, I updated the code with your last version.
It works but I miss for post all the images. I explain.
Some post have to show more pictures, for now I only have the featured images to show up in the ColorBox.
I really like the facts to be able to navigate through post inside the ColorBox (using next and Previous arrows) but I will also need to show all images inside a post.
For example the cover magazine "The real deal issue 10" has two images inside the post.
Arnav Joy comments:
show me this file
get_template_part( 'includes/loop-gallery' );
guillaume guillaume comments:
Here is loop-gallery.php
+ I send you an email with original loop.php
<?php
/**
* Slideshow
*
* This file outputs a group of all images attached to
* a post which will be displayed as a slideshow. This is
* used in loop.php when a post has a post format
* of "Gallery" assigned to it.
*
* @package Shaken Grid (Premium)
* @since 1.6
* @alter 1.6.2
*
*/
// 1. find images attached to this post
global $post;
global $my_size;
if($my_size == 'col1'){ $my_size = array( 135, 105 ); }
else if($my_size == 'col2'){ $my_size = array( 320, 225 ); }
else if($my_size == 'col3'){ $my_size = array( 495, 340 ); }
else{ $my_size = array( 670, 455 ); }
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_parent' => $post->ID
);
$images = get_posts($args);
if($images):
?>
<div class="slider-container">
<div class="slider">
<div class="slides_container">
<?php // 2. Loop through the images and show them
foreach($images as $image)
{
$big_array = image_downsize( $image->ID, 'full' );
$img_url = $big_array[0];
echo '<a href="'.$img_url.'" rel="'.$post->ID.'" title="'.$post->post_title.'" class="colorbox">';
echo wp_get_attachment_image($image->ID, $my_size);
echo '</a>';
}
?>
</div><!-- #slides_container -->
<a href="#" class="prev"><img src="<?php echo get_template_directory_uri(); ?>/images/left-ar.png" width="28" height="28" alt="Prev"></a>
<a href="#" class="next"><img src="<?php echo get_template_directory_uri(); ?>/images/right-ar.png" width="28" height="28" alt="Next"></a>
</div><!-- #slider -->
</div><!-- slider-container -->
<?php endif; ?>
Arnav Joy comments:
Here is modified loop-gallery.php
<?php
/**
* Slideshow
*
* This file outputs a group of all images attached to
* a post which will be displayed as a slideshow. This is
* used in loop.php when a post has a post format
* of "Gallery" assigned to it.
*
* @package Shaken Grid (Premium)
* @since 1.6
* @alter 1.6.2
*
*/
// 1. find images attached to this post
global $post;
global $my_size;
if($my_size == 'col1'){ $my_size = array( 135, 105 ); }
else if($my_size == 'col2'){ $my_size = array( 320, 225 ); }
else if($my_size == 'col3'){ $my_size = array( 495, 340 ); }
else{ $my_size = array( 670, 455 ); }
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_parent' => $post->ID
);
$images = get_posts($args);
if($images):
?>
<div class="slider-container">
<div class="slider">
<div class="slides_container">
<?php // 2. Loop through the images and show them
foreach($images as $image)
{
$big_array = image_downsize( $image->ID, 'full' );
$img_url = $big_array[0];
echo '<a href="'.$img_url.'" rel="gallery" title="'.$post->post_title.'" class="colorbox">';
echo wp_get_attachment_image($image->ID, $my_size);
echo '</a>';
}
?>
</div><!-- #slides_container -->
<a href="#" class="prev"><img src="<?php echo get_template_directory_uri(); ?>/images/left-ar.png" width="28" height="28" alt="Prev"></a>
<a href="#" class="next"><img src="<?php echo get_template_directory_uri(); ?>/images/right-ar.png" width="28" height="28" alt="Next"></a>
</div><!-- #slider -->
</div><!-- slider-container -->
<?php endif; ?>
Arnav Joy comments:
show me this filw
get_template_part( 'includes/gallery-list' );
guillaume guillaume comments:
Here is gallery-list.php
<?php
/**
* Gallery List
*
* This file outputs a list of links to each
* image attached to a post. This is used in loop.php
* when a "Gallery" post is being shown and the
* slideshow is hidden.
*
* @package Shaken Grid (Premium)
* @since 1.6
* @alter 2.0
*
*/
// 1. find images attached to this post
global $post;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_parent' => $post->ID
);
$images = get_posts($args);
if($images):
?>
<div class="gallery-link-list">
<?php // 2. Loop through the images and show them
foreach($images as $image)
{
if($image->ID != get_post_thumbnail_id($post->ID)):
$big_array = image_downsize( $image->ID, 'full' );
$img_url = $big_array[0];
echo '<a href="'.$img_url.'" rel="'.$post->ID.'" title="'.$post->post_title.'" class="colorbox">';
echo $image->post_title;
echo '</a>';
endif;
}
?>
</div><!-- gallery-link-list -->
<?php endif; ?>
Arnav Joy comments:
find following line in gallery-list.php
echo '<a href="'.$img_url.'" rel="'.$post->ID.'" title="'.$post->post_title.'" class="colorbox">';
and replace it with
echo '<a href="'.$img_url.'" rel="gallery" title="'.$post->post_title.'" class="colorbox">';
guillaume guillaume comments:
Done.
It's online.
Did you get my mail and this comment :
<blockquote>It works but I miss for post all the images. I explain.
Some post have to show more pictures, for now I only have the featured images to show up in the ColorBox.
I really like the facts to be able to navigate through post inside the ColorBox (using next and Previous arrows) but I will also need to show all images inside a post.
For example the cover magazine "The real deal issue 10" has two images inside the post.</blockquote>
guillaume guillaume comments:
Here is a screenshot of the gallery for "The real deal issue 100".
There is 3 pictures in the post gallery, how to display them in the ColorBox ?