Modify Gallery Output to render differently on a PAGE and a POST WordPress
- SOLVED
I'm still learning WordPress and slowly getting better, but my skill set is not up to par for the changes I am asking for.
I need to customize the gallery output for two sections on my site: 1) Portfolio Pages and 2) Blog Posts
On the PORTFOLIO PAGES, I want WP to render the gallery as images tags with attributes as shown below.
<img width="575" height="500" src="ImagePath/ImageName.jpg" class="attachment-full" alt="Alt Text">
<img width="575" height="500" src="ImagePath/ImageName.jpg" class="attachment-full" alt="Alt Text">
<img width="575" height="500" src="ImagePath/ImageName.jpg" class="attachment-full" alt="Alt Text">
<img width="575" height="500" src="ImagePath/ImageName.jpg" class="attachment-full" alt="Alt Text">
Here's the code I found online that I modified. I'm not fully comprehending the $output section and not confident in modifying some of it's code. I don't need the "class='gallery-item" code but not sure what else I "don't" need. Do I need the "itemtag", "icontag", "captiontag", etc? I'm not using them but not sure if I can just delete. If I do, will they default back to the core defaults?
// ----------------------------------------------------------------
// GALLERY OUTPUT FOR PORTFOLIO PAGES
add_shortcode( 'gallery', 'modified_gallery_shortcode' );
function modified_gallery_shortcode($attr) {
if(is_page_template('page-portfolio.php')){ // EDIT this slug
$attr['size']="full";
$attr['link']="none";
$attr['itemtag']="li";
$attr['icontag']="span";
$attr['captiontag']="p";
$output = gallery_shortcode($attr);
$output =strip_tags($output,'<img>');
$output =str_replace(array(" class='gallery-item'"),array(""),$output);
}else{
$output = gallery_shortcode($attr);
}
return $output;
}
add_filter( 'use_default_gallery_style', '__return_false' );
On the BLOG POSTS, I want WP to render the gallery using an unordered list with the attributed as shown below.
<ul class="gallery">
<li><a href='ImagePath/ImageName.jpg' class="fancybox" rel="group" title='Title Text'><img width="150" height="150" src="ImagePath/ImageName.jpg" class="attachment-thumbnail" alt="Alt Text"></a></li>
<li><a href='ImagePath/ImageName.jpg' class="fancybox" rel="group" title='Title Text'><img width="150" height="150" src="ImagePath/ImageName.jpg" class="attachment-thumbnail" alt="Alt Text"></a></li>
<li><a href='ImagePath/ImageName.jpg' class="fancybox" rel="group" title='Title Text'><img width="150" height="150" src="ImagePath/ImageName.jpg" class="attachment-thumbnail" alt="Alt Text"></a></li>
</ul>
I tried modifying the "Gallery Output for Portfolio Pages to accommodate the formatting requirements for this post type, but not having any luck!
// ----------------------------------------------------------------
// GALLERY OUTPUT FOR BLOG POSTS
add_shortcode( 'gallery2', 'modified_gallery_shortcode2' );
function modified_gallery_shortcode2($attr) {
if(is_page_template('page-portfolio.php')){ // EDIT this slug
$attr['size']="full";
$attr['link']="file";
$attr['itemtag']="li";
$attr['icontag']="span";
$attr['captiontag']="p";
$output = gallery_shortcode($attr);
$output =strip_tags($output,'NOT SURE HOW TO FORMAT');
$output =str_replace(array(" class='gallery-item'"),array(""),$output);
}else{
$output = gallery_shortcode($attr);
}
return $output;
}
add_filter( 'use_default_gallery_style', '__return_false' );
Someone recommended to use the below but not sure how to incorporate.
add_action( 'wp_head', function()
{
if ( 'post' === get_post_type() )
return add_shortcode( 'gallery', 'modified_gallery_shortcode2' );
if ( 'portfolio' === get_post_type() )
return add_shortcode( 'gallery', 'modified_gallery_shortcode' );
});
<strong>ANY HELP IS VERY MUCH APPRECIATED! Thank you!</strong>
Answers (3)
Dbranes answers:
I guess Eric will cook something nice for you,
but keep in mind that the <em>link </em>gallery attribute isn't passed through the <em>shortcode_atts</em>,
so that will not work with the <em>shortcode_atts_gallery </em>filter.
I'm going offline for the night but you can try this snippet, you might refine the brutal replacements with <em>preg_replace </em>;-)
/**
* Modified gallery shortcode
*
* @param array $attr
* @return string $output
*/
function modified_gallery_shortcode( $attr )
{
if( is_page_template( 'page-portfolio.php' ) )
{
add_filter( 'use_default_gallery_style', '__return_false' );
$attr['link'] = "none";
$attr['itemtag'] = "";
$attr['icontag'] = "";
$attr['captiontag'] = "";
$output = gallery_shortcode( $attr );
$output = strip_tags( $output, '<img>' );
}
elseif( is_single() )
{
$attr['size'] = "full";
$attr['link'] = "file";
$attr['itemtag'] = "li";
$attr['icontag'] = "";
$attr['captiontag'] = "p";
$output = gallery_shortcode( $attr );
$output = strip_tags( $output, '<a><img><li><p>' );
$from = array(
"class='gallery-item'",
"class='gallery-icon landscape'",
"a href=",
);
$to = array(
"class='gallery'",
"",
"a class=\"fancybox\" rel=\"group\" href=",
);
$output = str_replace( $from, $to, $output );
$output = sprintf( '<ul class="gallery">%s</ul>', $output );
}
else
{
$output = gallery_shortcode( $attr );
}
return $output;
}
add_shortcode( 'gallery', 'modified_gallery_shortcode' );
phxbulldog comments:
Thank you Dbranes. It worked almost perfectly!!! (-;
The portfolio pages rendered as intended and the blog pages rendered but with extra css code immediately after the <UL> tag and I'm not sure how to get rid of it.
<ul class="gallery">
#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
<li class='gallery'>
I made some modifications to the post pages section.
elseif( is_single() )
{
$attr['size'] = "thumbnail";
$attr['link'] = "file";
$attr['itemtag'] = "li";
$attr['icontag'] = "";
$attr['captiontag'] = "p";
$output = gallery_shortcode( $attr );
$output = strip_tags( $output, '<a><img><li><p>' );
$from = array(
"class='gallery-item'",
"class='gallery-icon landscape'",
"a href=", );
$to = array(
"",
"",
"a class=\"fancybox\" rel=\"group\" href=", );
$output = str_replace( $from, $to, $output );
$output = sprintf( '<ul class="gallery">%s</ul>', $output );
}
Thanks again!
phxbulldog comments:
FOUND IT! The filter needs to be applied to the 2nd section
add_filter( 'use_default_gallery_style', '__return_false' );
Eric P. answers:
This is much easier with new code in WordPress 3.6. Are you running 3.6 or higher?
OK. I see below that you answered.
With WordPress 3.6, you can do some of this in a filter on the "shortcode_atts_gallery" hook. Here's the framework. I'll be back to edit it and flesh it out a bit more as I get it tested:
add_filter('shortcode_atts_gallery','gallery_shortcodes_defaults', 10, 3)
function gallery_shortcodes_defaults( $out, $pairs, $att ) {
global $post;
if ( is_page_template('single.php') ) {
$out['size']='thumbnail';
$out['link']='file';
$out['itemtag']='li';
$out['icontag']='span';
$out['captiontag']='p';
} else if ( is_page_template('page-portfolio.php') ) {
$out['size']='full';
$out['link']='none';
}
return $out;
}
The rest you have to use the "post_gallery" filter hook. I'm having a serious Whiskey Tango Foxtrot moment with that. Whose bright idea was it to pass nothing to the filter and put the filter at the beginning of the shortcode function??????
I'll be back with some code for that filter hook in a little while. Basically, you'll could include two copies of the core code with modifications in the filter. That's ugly but it works. I have been testing to see if you could make a recursive call to the shortcode function to get something back, and then actually filter the output. That makes the "filtration" part of the filter look more like a filter, parsing the gallery html text and changing it.
Either way, it will be some ugly code.
The filter hook would work like this:
add_filter ( 'post_gallery', 'enhance_post_gallery', 10, 2 );
function enhance_post_gallery( $output, $args ) {
/*
* copy the code from the WordPress core for the gallery_shortcode() function, making enhancements/changes
* to suit your specifications. Copy the code starting at [[LINK href="http://core.trac.wordpress.org/browser/tags/3.6.1/wp-includes/media.php#L661"]]line 661 of wp-includes/media.php[[/LINK]]
*/
}
phxbulldog comments:
I am using 3.6. Thanks.
Eric P. comments:
I posted some code. Changing the attributes based on the post type can be handled by a filter point on shortcode_atts_{$shortcode}
From what I'm seeing, your "post" gallery will be a slider, no?
And the portfolio will be a simple gallery of "large" image sizes? You are showing fixed size, 575x500, but a "full" suffix on the class tag. Do you want "large" (and define that in your theme as 575x500) or do you want "full" which has no size constraints? Pick one and stick with it. ;)
phxbulldog comments:
Hi Eric, Attached is a screen shot of what I am trying to achieve. Instead of using post types is it possible to be filtered by the is_page_template('page-portfolio.php') or is_page_template('single.php'). I hope this makes sense.
phxbulldog comments:
Hi Eric, Attached is a screen shot of what I am trying to achieve. Instead of using post types is it possible to be filtered by the is_page_template('page-portfolio.php') or is_page_template('single.php'). I hope this makes sense.
phxbulldog comments:
Hi Eric, Attached is a screen shot of what I am trying to achieve. Instead of using post types is it possible to be filtered by the is_page_template('page-portfolio.php') or is_page_template('single.php'). I hope this makes sense.