BricksUltimate

The bricks builder is using the Photoswipe JS library for the image lightbox and it is adding the social share button. Visitors can share the image on the social network. But sometimes we do not need this option and want to remove it. 3 ways you can remove the share option. In this tutorial, I am explaining all methods and you will just use one method for your site.

Method 1: WP Hook

The bricks builder is providing the filter “bricks/photoswipe_html” and you can alter the default Photoswipe HTML. In PHP, we shall target this filter and alter the HTML code. Open the functions.php file of the Bricks child theme and drop this code at end of the file.

add_filter( 'bricks/photoswipe_html', 'bu_remove_share_buttons' );
function bu_remove_share_buttons( $html ) {
	ob_start();
		?>
		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="pswp__bg"></div>
		<div class="pswp__scroll-wrap">
			<div class="pswp__container">
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
			</div>
			<div class="pswp__ui pswp__ui--hidden">
				<div class="pswp__top-bar">
					<div class="pswp__counter"></div>
					<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
					<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
					<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
					<div class="pswp__preloader">
						<div class="pswp__preloader__icn">
							<div class="pswp__preloader__cut">
								<div class="pswp__preloader__donut"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
					<div class="pswp__share-tooltip"></div>
				</div>
				<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
				<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
				<div class="pswp__caption">
					<div class="pswp__caption__center"></div>
				</div>
			</div>
		</div>
		</div>
		<?php
		$html = ob_get_clean();

		return $html;
}

Method 2: JavaScript

With the JS code, we can remove the HTML markup of the share button. Open the functions.php of the Bricks child theme and drop this PHP code there.

add_action( 'wp_footer', 'bu_remove_share_buttons' );
function bu_remove_share_buttons( ) {
	echo "<script type='text/javascript'>
		document.addEventListener(\"DOMContentLoaded\", function (e) {
			var pswp = document.querySelector(\".pswp\");
			if( pswp ) {
				pswp.querySelector(\".pswp__top-bar\").removeChild( document.querySelector(\".pswp__button--share\") );
			}
		});
	</script>";
}

Method 3: CSS

With CSS we can hide the button. if we use the CSS, then HTML markup of the share icons would stay on the site. Add this CSS into Dashboard -> Bricks -> Settings -> Custom Code Tab -> Custom CSS box

.pswp__button--share{display: none}

The best method is JS if you want to hide just one button. Use the WP Hook, if you remove more extra buttons like Fullscreen, Zoom In/Out, etc, and customize the lightbox layout.