Edit the "acf-gallery-side-info" content

• feyfey

• April 25, 2019 at 10:06 pm

Hi all,

I want to edit the “acf-gallery-side-info” <div> content of the Gallery Field in order to add a “download” link to the “actions” <p>.

To explain my wish : We are an association and we use some parts of the backend as working space and some Gallery Fields in Custom Post Type are used to store files. If someone put a file in a Gallery Field I want to be able to download it with no needs to open the WordPress Media Manager.

I first try to add the link with some Jquery but the “acf-gallery-side-info” <div> is populated on click so my code doesnt works :

	function acf_gallery_download_link() {
		if ( !is_admin() ) { return; }
		?>
		<script type='text/javascript'>
			( function ( $ ) {
				$( document ).ready( function () {
					$('.acf-gallery-side-data .actions .acf-gallery-edit').before('<a href="MyURL" target="_blank" class="acf-gallery-download">Download</a>');
				});
			}( jQuery ) );
		</script>
		<?php
	}
	add_action( 'admin_footer', 'acf_gallery_download_link' );

I found the “acf-gallery-side-info” <div> content is populated in the plugin by the function render_attachment but it’s “Bad” to edit directly the plugin =D.

Do you know how I can do it ?

Thanks all !

• John Huebner

• April 26, 2019 at 2:48 am

See the JS API documentation. After ACF inserts the sidebar in the gallery it runs the append action https://www.advancedcustomfields.com/resources/javascript-api/#actions-append. The value $el here is the sidebar data. You could possibly create an action on this hook that could insert the download link. (?)

Unfortunately, that’s as much as I can give you. I don’t know all the details on exactly what would need to be done to accomplish this, only the place to start looking.

• feyfey

• August 4, 2019 at 5:24 am

Hi John,

I needed a looooong time to solve the entire issue but the JS API append action is exactly what I was looking for.

If someone want the complete solution I use in a PHP function file :

// Add a AJAX action to get attachement URL by ID in JS
add_action( 'wp_ajax_get_media_url', 'get_media_url' );
add_action( 'wp_ajax_nopriv_get_media_url', 'get_media_url' );
function get_media_url() {
	if ( isset( $_POST['att_id'] )) {
		$attachement_id = $_POST['att_id'];
		$attachement_url = wp_get_attachment_url( $attachement_id );
		echo $attachement_url;
	} else  {
		echo '#';
	}
	wp_die();
}
// JS to add the download link
function acf_gallery_download_link() {
	if ( !is_admin() ) { return; }?>
	<script type='text/javascript'>
			( function ( $ ) { $( document ).ready( function () {
				acf.addAction('append', function( $el ){
					var attachement_id = $el.find(".actions").children(".acf-gallery-edit").attr("data-id");
					var data = {
						'action': 'get_media_url',
						'att_id': attachement_id,
					};
					$.post(ajaxurl, data, function(response){
					     var attachement_url = response;
					     $el.find(".actions").children(".acf-gallery-edit").before('<a href="'+ attachement_url +'" target="_blank" class="acf-gallery-see" data-id="'+attachement_id+'">See</a>');					
					});		
				});
			});
		}( jQuery ) );
	</script>
<?php}
add_action( 'admin_footer', 'acf_gallery_download_link' );