Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
$15
Adding ColorBox link to featured images in PHP
I need help on this one.
I'm working on a WP website 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 :
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>
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.
This question has been answered.
guillaume guillaume | 05/15/12 at 4:45am
Edit
Previous versions of this question:
05/15/12 at 7:32am
(4) Possible Answers Submitted...
See a chronological view of answers?
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
-
Last edited:
05/15/12
4:53amFrancisco Javier Carazo Gil says: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];- 05/15/12 4:56am
Francisco Javier Carazo Gil says:This would give you "LINK TO LARGE IMAGE"
- 05/15/12 4:59am
guillaume guillaume says: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. - 05/15/12 5:05am
Francisco Javier Carazo Gil says: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;
- 05/15/12 5:08am
guillaume guillaume says:With this code all featured images disappear.
- 05/15/12 4:56am
-
Last edited:
05/15/12
5:00amArnav Joy says: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;Previous versions of this answer: 05/15/12 at 5:00am
- 05/15/12 5:01am
guillaume guillaume says:Hello,
When I use your code all featured images in the page disappear.
Don't know why. - 05/15/12 5:02am
Arnav Joy says: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 - 05/15/12 5:04am
Arnav Joy says: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 - 05/15/12 5:06am
guillaume guillaume says:The ColorBox show up and I get this :
The requested content cannot be loaded.
Please try again later. - 05/15/12 5:10am
Arnav Joy says:I think you forgot to close any open php tag inside file
can you show me the full code of file - 05/15/12 5:14am
guillaume guillaume says: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; ?> - 05/15/12 5:19am
Arnav Joy says:/*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; ?>
- 05/15/12 5:33am
Arnav Joy says: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; ?> - 05/15/12 5:33am
guillaume guillaume says: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 ? - 05/15/12 5:35am
Arnav Joy says:try my this code
http://pastebin.com/xc6v1riy - 05/15/12 5:36am
Arnav Joy says:yes if you can provide me the original file then please provide
- 05/15/12 5:41am
guillaume guillaume says: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.
- 05/15/12 5:48am
Arnav Joy says:show me this file
get_template_part( 'includes/loop-gallery' ); - 05/15/12 5:50am
guillaume guillaume says: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; ?> - 05/15/12 5:54am
Arnav Joy says: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; ?> - 05/15/12 5:57am
Arnav Joy says:show me this filw
get_template_part( 'includes/gallery-list' ); - 05/15/12 6:03am
guillaume guillaume says: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; ?> - 05/15/12 6:15am
Arnav Joy says: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">'; - 05/15/12 6:18am
guillaume guillaume says:Done.
It's online.
Did you get my mail and this comment :
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.
- 05/15/12 7:30am
guillaume guillaume says: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 ?
- 05/15/12 5:01am
-
Last edited:
05/15/12
4:54amRomel Apuya says:try this
if( $my_size != 'col2' ): ?>
<a href="<?php the_post_thumbnail('large'); ?>" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php the_post_thumbnail('large'); ?>" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif;- 05/15/12 5:03am
guillaume guillaume says:Thank you I try your code but it changes the grid and when clicking an image I get :
Not Found
The requested URL /heygee/<img width= was not found on this server.
- 05/15/12 5:03am
-
Last edited:
05/15/12
4:56amrizaljohn says:You can do that by specifying image size within the_post_thumbnail. So your code will look this thes:
// Display the appropriate sized featured image
if( $my_size != 'col2' ): ?>
<a href="<?php the_post_thumbnail('full'); ?>" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php the_post_thumbnail('full'); ?>" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif; ?>
Hope that helps.- 05/15/12 5:11am
guillaume guillaume says:Hello, with this code I get this line in front of each pictures :
" rel="gallery">Tasty-Web-Buttons // Display View/Share/Comment buttons if( !of_get_option( 'hide_action_buttons' ) ) : get_template_part( 'includes/action-buttons' ); endif; ?> - 05/15/12 5:15am
rizaljohn says:Make sure to wrap it with <?php tag:
<?php
if( $my_size != 'col2' ): ?>
<a href="<?php the_post_thumbnail('full'); ?>" rel="gallery"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php the_post_thumbnail('full'); ?>" rel="gallery"><?php the_post_thumbnail('post-thumbnail', array( 'class' => 'feat-img' ) ); ?></a>
<?php endif; ?> - 05/15/12 5:21am
guillaume guillaume says:look here my "old" code is the whole div in loop.php
<div class="img-container">
<?php
// Display the appropriate sized featured image
if( $my_size != 'col2' ): ?>
<a href="<?php the_permalink(); ?>" rel="bookmark" class="colorbox"><?php the_post_thumbnail($my_size, array( 'class' => 'feat-img' ) ); ?></a>
<?php else: ?>
<a href="<?php the_permalink(); ?>" rel="bookmark" class="colorbox"><?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>
- 05/15/12 5:11am
This question has expired.
Gabriel Reguly, idt, guillaume guillaume voted on this question.
Current status of this question: Completed
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.