---
title: "Change Gallery Output HTML"
id: "176424"
type: "knowledgebase"
slug: "change-gallery-output-html"
published_at: "2019-06-26T14:32:15+00:00"
modified_at: "2019-10-28T15:44:42+00:00"
url: "https://fooplugins.com/documentation/foogallery/developers/change-gallery-output-html/"
markdown_url: "https://fooplugins.com/documentation/foogallery/developers/change-gallery-output-html.md"
excerpt: "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..."
taxonomy_knowledgebase_cat:
  - "FooGallery - Developers"
---

[FooGallery – Developers](https://fooplugins.com/documentation/foogallery/developers/)

# Change Gallery Output HTML

## Related Articles

- [Override Image Captions](https://fooplugins.com/documentation/foogallery/developers/override-image-captions/)
- [Add NoFollow to Custom Links](https://fooplugins.com/documentation/foogallery/developers/add-nofollow-custom-links/)
- [Custom Hover Icons](https://fooplugins.com/documentation/foogallery/developers/custom-hover-icons/)
- [Force Thumbnail Links To Load In New Tab](https://fooplugins.com/documentation/foogallery/developers/force-thumbnail-links-load-new-tab/)
- [Add Class To All Gallery Thumbnail Links](https://fooplugins.com/documentation/foogallery/developers/add-class-gallery-thumbnail-links/)
- [Override Create Gallery Page Content](https://fooplugins.com/documentation/foogallery/developers/override-create-gallery-page-content/)
- [Display a Gallery in PHP code](https://fooplugins.com/documentation/foogallery/developers/display-a-gallery-in-php-code/)
- [FooGallery Developer 101](https://fooplugins.com/documentation/foogallery/developers/foogallery-developer-101/)
- [Developers](https://fooplugins.com/documentation/foogallery/developers/developers/)
- [Customize Your Gallery Using Custom CSS](https://fooplugins.com/documentation/foogallery/developers/customize-gallery-custom-css/)
- [Common FooGallery Custom CSS Customisation Tweaks](https://fooplugins.com/documentation/foogallery/developers/common-foogallery-custom-css/)
- [FooGallery Hooks](https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks/)
- [Auto License Activations using wp-config.php](https://fooplugins.com/documentation/foogallery/developers/auto-license-activations-using-wp-config-php/)

**Need more help?** Browse all documentation or open a support ticket.

[All docs](/documentation/)

[Support](/support/)

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](https://wordpress.org/plugins/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 );Code language: PHP (php)
```

### 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 );Code language: PHP (php)
```

### 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;
}Code language: PHP (php)
```

Resources

## Find the right next step

Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages.

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Documentation

Search setup guides, product docs, and troubleshooting articles.

[Browse docs](/documentation/)

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Support

Open a ticket with product details so we can help quickly.

[Get support](/support/)

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Licensing

Review account, renewal, refund, and license information.

[View details](/licensing/)
