Ask your WordPress questions! Pay money and get answers fast! (more info)

Modify Gallery Shortcode to open large images instead of full WordPress

  • SOLVED

I'd like to modify the following short code to open the "large" size of the attachment instead of the "full" size of the attachment.

function organic_gallery_shortcode($attr) {
global $post, $wp_locale;
static $instance = 0;
$instance++;
$output = apply_filters('post_gallery', '', $attr);
if ( $output != '' )
return $output;
if ( isset( $attr['orderby'] ) ) {
$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
if ( !$attr['orderby'] )
unset( $attr['orderby'] );
}
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => ''
), $attr));
$id = intval($id);
if ( 'RAND' == $order )
$orderby = 'none';
if ( !empty($include) ) {
$include = preg_replace( '/[^0-9,]+/', '', $include );
$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
$attachments = array();
foreach ( $_attachments as $key => $val ) {
$attachments[$val->ID] = $_attachments[$key];
}
} elseif ( !empty($exclude) ) {
$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}
if ( empty($attachments) )
return '';
if ( is_feed() ) {
$output = "\n";
foreach ( $attachments as $att_id => $attachment )
$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
return $output;
}
$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';
$selector = "gallery-{$instance}";
$gallery_style = $gallery_div = '';
if ( apply_filters( 'use_default_gallery_style', true ) )
$gallery_style = "
<style type='text/css'>
#{$selector} {
margin: auto;
}
#{$selector} .gallery-item {
float: {$float};
margin-top: 10px;
text-align: center;
width: {$itemwidth}%;
}
#{$selector} img {
border: 1px solid #cfcfcf;
}
#{$selector} .gallery-caption {
margin-left: 0;
}
</style>";
$size_class = sanitize_html_class( $size );
$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
$i = 0;
foreach ( $attachments as $id => $attachment ) {
$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
// Adding prettyPhoto rel
$link = str_replace("<a","<a rel=\"prettyPhoto[pp_gal]\" ",$link);
$output .= "<{$itemtag} class='gallery-item'>";
$output .= "
<{$icontag} class='gallery-icon'>
$link
</{$icontag}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='wp-caption-text gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}
$output .= "
<br style='clear: both;' />
</div>\n";
return $output;
}
add_shortcode('organic_gallery', 'organic_gallery_shortcode');

Answers (2)

2013-07-01

Dbranes answers:

Place this code:


if( isset($attr['link']) && 'file' == $attr['link'] ){
$imgsrc = array_shift( array_values( wp_get_attachment_image_src( $id, 'large' ) ) ) ;
$link = preg_replace( 'href="([^"]*)', 'href="'.$imgsrc.'"', $link );
}



just above the line:

// Adding prettyPhoto rel

Then this change will be activated when you use the <em>link="file" </em>attribute in your shortcode:

[organic_gallery link="file" ]


This should give you <em>large</em> sized attachment image links.

<strong>ps:</strong> The WordPress function <em>wp_get_attachment_link()</em> is used in your shortcode to get the image attachments + links, but the size parameter only works on the image gallery item, not on the corresponding attachment link.

Another approach would be to add a <em>attachment_link</em> filter to modify the attachments links.




Michael Brumm comments:

I updated the code as follows:

foreach ( $attachments as $id => $attachment ) {
$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
if( isset($attr['link']) && 'file' == $attr['link'] ){
$imgsrc = array_shift( array_values( wp_get_attachment_image_src( $id, 'large' ) ) ) ;
$link = preg_replace( 'href="([^"]*)', 'href="'.$imgsrc.'"', $link );
}
// Adding prettyPhoto rel
$link = str_replace("<a","<a rel=\"prettyPhoto[pp_gal]\" ",$link);
$output .= "<{$itemtag} class='gallery-item'>";


I'm receiving the following error:
<strong>Warning: preg_replace() [function.preg-replace]: Delimiter must not be alphanumeric or backslash in</strong>


Dbranes comments:

sorry, try this:

if( isset($attr['link']) && 'file' == $attr['link'] ){
$imgsrc = array_shift( array_values( wp_get_attachment_image_src( $id, 'large' ) ) ) ;
$pattern = "/href='([^']*)'/";
$replace = "href='".$imgsrc."'";
$link = preg_replace( $pattern, $replace, $link );
}


this seems to work on my install, I just checked ;-)


Dbranes comments:

<em>ps:</em> this should be more general and be able to handle extra spaces and single/double quotes in the <em>href</em>:


if( isset($attr['link']) && 'file' == $attr['link'] ){
$imgsrc = array_shift( array_values( wp_get_attachment_image_src( $id, 'thumbnail' ) ) ) ;
$pattern = "/href\s*\=\s*[\'\"]?([^\'\"]*)[\'\"]?/i";
$replace = "href=\"".$imgsrc."\"";
$link = preg_replace( $pattern, $replace, $link );
}


Michael Brumm comments:

Thanks Dbranes... Works great!!!


Dbranes comments:

ok great to hear that ;-)

ps: it should be easy for you to add an extra shortcode attribute to control this size, for example:

[organic_gallery size="thumbnail" hrefsize="large" ]


2013-07-01

Vinod Dalvi answers:

<strong>You can just add $size = 'large'; below the extract function</strong> as shown in the following code only if you always want to display large size of images orelse <strong>you can use the shortcode and pass size = 'large' as a parameter. Example : [organic_gallery size="large"]</strong>

function organic_gallery_shortcode($attr) {

global $post, $wp_locale;

static $instance = 0;

$instance++;

$output = apply_filters('post_gallery', '', $attr);

if ( $output != '' )

return $output;

if ( isset( $attr['orderby'] ) ) {

$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );

if ( !$attr['orderby'] )

unset( $attr['orderby'] );

}

extract(shortcode_atts(array(

'order' => 'ASC',

'orderby' => 'menu_order ID',

'id' => $post->ID,

'itemtag' => 'dl',

'icontag' => 'dt',

'captiontag' => 'dd',

'columns' => 3,

'size' => 'thumbnail',

'include' => '',

'exclude' => ''

), $attr));

$size = 'large';

$id = intval($id);

if ( 'RAND' == $order )

$orderby = 'none';

if ( !empty($include) ) {

$include = preg_replace( '/[^0-9,]+/', '', $include );

$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

$attachments = array();

foreach ( $_attachments as $key => $val ) {

$attachments[$val->ID] = $_attachments[$key];

}

} elseif ( !empty($exclude) ) {

$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );

$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

} else {

$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

}

if ( empty($attachments) )

return '';

if ( is_feed() ) {

$output = "\n";

foreach ( $attachments as $att_id => $attachment )

$output .= wp_get_attachment_link($att_id, $size, true) . "\n";

return $output;

}

$itemtag = tag_escape($itemtag);

$captiontag = tag_escape($captiontag);

$columns = intval($columns);

$itemwidth = $columns > 0 ? floor(100/$columns) : 100;

$float = is_rtl() ? 'right' : 'left';

$selector = "gallery-{$instance}";

$gallery_style = $gallery_div = '';

if ( apply_filters( 'use_default_gallery_style', true ) )

$gallery_style = "

<style type='text/css'>

#{$selector} {

margin: auto;

}

#{$selector} .gallery-item {

float: {$float};

margin-top: 10px;

text-align: center;

width: {$itemwidth}%;

}

#{$selector} img {

border: 1px solid #cfcfcf;

}

#{$selector} .gallery-caption {

margin-left: 0;

}

</style>";

$size_class = sanitize_html_class( $size );

$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";

$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );

$i = 0;

foreach ( $attachments as $id => $attachment ) {

$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);

// Adding prettyPhoto rel

$link = str_replace("<a","<a rel=\"prettyPhoto[pp_gal]\" ",$link);

$output .= "<{$itemtag} class='gallery-item'>";

$output .= "

<{$icontag} class='gallery-icon'>

$link

</{$icontag}>";

if ( $captiontag && trim($attachment->post_excerpt) ) {

$output .= "

<{$captiontag} class='wp-caption-text gallery-caption'>

" . wptexturize($attachment->post_excerpt) . "

</{$captiontag}>";

}

$output .= "</{$itemtag}>";

if ( $columns > 0 && ++$i % $columns == 0 )

$output .= '<br style="clear: both" />';

}

$output .= "

<br style='clear: both;' />

</div>\n";

return $output;

}

add_shortcode('organic_gallery', 'organic_gallery_shortcode');


Michael Brumm comments:

Sorry, my explanation was a bit vague. Here's more info:

The original shortcode above creates a photo gallery by displaying "thumbnails" in a grid... Upon clicking a thumbnail in the grid, the code currently opens the associated image as "full" size in the prettyPhoto lightbox... Since the client uploaded high res images (4MB+), I'd like to alter the code to open the "large" size of the image...

You can see the the code in action in the theme at:
[[LINK href="http://organicthemes.com/demo/photographer/gallery/"]][[/LINK]]

Vinod Dalvi, thanks for the quick response... However, changing the $size variable in the extract function, just outputs the large image instead of the thumbnail in the grid view... Doesn't affect the image size in the lightbox.

The client just made another request... They would like to display the image name underneath each thumbnail as a reference... The code appears to be set up where it will display the caption by the code below... However, the client has said they will post a large number of images and would rather display the image name as a reference instead of manually entering a caption for each photo.

if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='wp-caption-text gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}


Michael Brumm comments:

Looks like the link was not posted... Here's the feature in use:
http://organicthemes.com/demo/photographer/gallery/


Michael Brumm comments:

Please ignore that last request regarding the ability to display file name... I was able to figure that portion out by using the following code...

$output .= "
<{$captiontag} class='wp-caption-text gallery-caption'>
" . wptexturize($attachment->post_title) . "
</{$captiontag}>";