Modify Gallery Output to render differently on a PAGE and a POST

1 Views

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

Read More

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' );

ANY HELP IS VERY MUCH APPRECIATED! Thank you!

Post Views: 1

Related posts

2 comments

  1. To get the images from gallery_shortcode into a list I just followed the example. strip_tags seems to strip out all the elements you define, so I kept a,img and li. After that I just wrapped the html in the ul so it seems to match what you were looking for. $output is just a string that is generated after running gallery_shortcode and everything after is just removing stuff from that string.

    You can refer back to that gallery_shortcode page to see if you need/want to keep certain attributes.

    add_shortcode( 'gallery', 'modified_gallery_shortcode' );

function modified_gallery_shortcode($attr)
{
  if(is_page_template('page-portfolio.php'))
  {
      $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);
  }
  elseif ( 'post' === get_post_type() )
  {
      $attr['size']="full";
      $attr['link']="file";
      $attr['itemtag']="li";
      $attr['icontag']="span";
      $attr['captiontag']="p";

      $output = gallery_shortcode($attr); // generate html

      $output = strip_tags($output,'<a><img><li>'); // remove extra tags, but keep these
      $output = str_replace(" class='gallery-item'", "", $output); // remove class attribute
      $output = "<ul class="gallery" >$output</ul>"; // wrap in ul
  }
  else
  {
      $output = gallery_shortcode($attr);
  }

  return $output; // final html
}

add_filter( 'use_default_gallery_style', '__return_false' );

  2. Just use the regular gallery shortcode, and replace the rendering function (the callback) very late, in wp_head:

    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' );
});

Comments are closed.