Customize WordPress Gallery HTML Output

ReadMe.md

#Customize WordPress Gallery HTML Output

---

This snippet is for modifying the shortcode and output for Wordpress's built in gallery function HTML. Particularly to modify the stucture for use with the Salvattore & Featherlight jquery to creat a masonary gallery with lightbox as none of the wordpress plugins meet my need. The source of the function is a little out of date compared with the current function Wordpress is using to output the galleries, but meets my needs as I am stripping out most of the markup. Plus I can't seem to get the shortcode_atts assigned in the function to work but thats not a deal breaker. I've updated the php with my new function. Still not sure if this is the best way to go about this but it works well for my need.

I've also added a second if statment to create another modified gallery to create a homepage slideshow using the wordpress agllery function and add suport for the Responsiveslides Jquery plugin.

I am using a conditional statment to check if the post is home in the first statment and using the single-portfolio.php template in the second, that way i only modify the gallery conditionaly.

I am adding an encapselating div with the id="grid' data-columns" for use with Salvattore and the class="gallery-item" for each image in the gallery for use with Featherlight. The rest is handeled with jqery.

I still need to look into making this better but for the moment it works.

---

#Refrance:

Codex:

• https://codex.wordpress.org/Gallery_Shortcode

Notes:

• http://wpquestions.com/question/showChrono/id/8914 [thank god for this]
• http://responsiveslides.com/
• http://salvattore.com/
• http://responsiveslides.com/

gallery-function.php

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below unless placing in it's own php file.

//* Modify gallery HTML output
//**********************

add_shortcode( 'gallery', 'pb_gallery_modification' );
function pb_gallery_modification( $attr ) {

   //* Only output the function if the gallery is on the static home page.
   if ( is_front_page() && is_page('home') ) {

      //* Adjust the gallery shortcode defaults
      $attr['size']         = "full";
		$attr['link']         = "none";
		$attr['itemtag']      = "li";
		$attr['icontag']      = "";
		$attr['captiontag']   = "";

		$output = gallery_shortcode( $attr );
      //* Strip out the markup i don't want modify the link output
		$output = strip_tags( $output, '<li><img>' );
      //* Wrap for responsive slider by adding class rslides
		$output = sprintf( '<ul class="rslides">%s</ul>', $output );


   }

   //* Only output the function when used in conjunction with the portfolio page template
   else if ( is_page_template('page-templates/page-portfolio.php') ) {
      add_filter( 'use_default_gallery_style', '__return_false' );

      //* Adjust the gallery shortcode defaults
      $attr['size']		    = "large";
		$attr['link']		    = "file";
		$attr['itemtag']      = "figure"; // Would prefer to use figure
		$attr['icontag']      = "";
		$attr['captiontag']   = "";

		$output = gallery_shortcode( $attr );
		$output = strip_tags( $output, '<figure><a><img>' );

		$from = array(
         "class='gallery-item'",
         "class='gallery-icon landscape'",
         "a href=",
      );

      //* Strip out the markup i don't want modify the link output
		$to = array(
         "class='gallery-item'",
         "",
         "a data-featherlight=\"image\" class=\"gallery\" rel=\"group\" href=",
		);

		$output = str_replace( $from, $to, $output );

      //* Wrap in Salvattore
      //* Added the class Gallery and data-columns
		$output = sprintf( '<div id="grid" data-columns>%s</div>', $output );

   }
   else {
      $output = gallery_shortcode( $attr );
   }
   return $output;
}