Change Gallery Output HTML

There are a couple of ways to change the HTML that FooGallery outputs. These ways are provided by action filters within the plugin:

  • foogallery_attachment_html_image_attributes – allows you to add/remove/update any attributes on the img tags output in the galleries
  • foogallery_attachment_html_link_attributes – allows you to add/remove/update any attributes on the a (anchor) tags output in the galleries
  • foogallery_attachment_html_image – allows you to alter the HTML for the img tag
  • foogallery_attachment_html_anchor – allows you to alter the HTML for the a (anchor) tag
  • foogallery_attachment_html_caption – allows you to alter the caption HTML for the galleries

How To Add Custom Code

There are a few ways to add custom PHP code to your WordPress site. You can add the code directly to your functions.php or you can add the code in a more reliable and safer way using a plugin link Code Snippets. Simply install the plugin and then under the Snippets menu, click Add New and paste in your code. This allows you to test your code without breaking your site. It also allows you to add code that will live outside of your theme, so that when you change your theme, the code will continue to run.

Code Examples

Here are a few real-world scenarios for changing the output of the HTML for your galleries, including code examples.

Remove Alt Tags From Your Image Thumbnails

function remove_alt_attributes( $attr, $args, $foogallery_attachment ) {
	if ( array_key_exists( 'alt', $attr ) ) {
		unset( $attr['alt'] );
	}
	
	return $attr;
}


add_filter('foogallery_attachment_html_image_attributes', 'remove_alt_attributes', 10, 3 );

Stop Pinterest From Picking up Thumbnails

function add_no_pin( $attr, $args, $foogallery_attachment ) {
	$attr['data-pin-nopin'] = 'true';	
	return $attr;
}


add_filter('foogallery_attachment_html_image_attributes', 'add_no_pin', 10, 3 );

rel=”nofollow” for Custom Links

add_filter( 'foogallery_attachment_html_link_attributes', 'foogallery_nofollow_links', 10, 3 );

function foogallery_nofollow_links($attr, $args, $foogallery_attachment) {
  	//only add rel="nofollow" to thumbnails that have custom URL's set. 
  	//This can be useful when you custom URL's are affiliate links

  	if ( 'custom' === $args['link'] && !empty($foogallery_attachment->custom_url) ) {
	  $attr['rel'] = 'nofollow';
	}
	return $attr;
}