Skip to content

Wp3.5 Media Gallery Edit modal: change captions to title

Solution Explanation:

With WordPress 3.5, media panel is completely changed and now using backbone.js. I am new to this javascript framework and there is few guides in internet. It seems wp-includes/media-template.php file providing some media panel templates as javascript html blocks now. In this problem we needed to replace

<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
					placeholder="<?php esc_attr_e('Caption this image…'); ?>" {{ maybeReadOnly }} />

with

<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
					placeholder="<?php esc_attr_e('Caption this image…'); ?>" {{ maybeReadOnly }} />

I couldnt find a better way to replace that content only, so i removed that script block and re-created it fully. I understand that system is good for custom panel creating etc but still there must be better way to change default WordPress blocks in my opinion. I hope there will be in future.

Solution:

add_action( 'admin_footer-post-new.php', 'firmasite_replace_script_tmpl_attachment' );
add_action( 'admin_footer-post.php', 'firmasite_replace_script_tmpl_attachment' );
function firmasite_replace_script_tmpl_attachment() { ?>
	<script type="text/javascript">
		jQuery(document).ready(function($){
			jQuery("script#tmpl-attachment:first").remove();
		});
	</script>
	<script type="text/html" id="tmpl-attachment">
		<div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
			<# if ( data.uploading ) { #>
				<div class="media-progress-bar"><div></div></div>
			<# } else if ( 'image' === data.type ) { #>
				<div class="thumbnail">
					<div class="centered">
						<img src="{{ data.size.url }}" draggable="false" />
					</div>
				</div>
			<# } else { #>
				<img src="{{ data.icon }}" class="icon" draggable="false" />
				<div class="filename">
					<div>{{ data.filename }}</div>
				</div>
			<# } #>

			<# if ( data.buttons.close ) { #>
				<a class="close media-modal-icon" href="#" title="<?php _e('Remove'); ?>"></a>
			<# } #>

			<# if ( data.buttons.check ) { #>
				<a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
			<# } #>
		</div>
		<#
		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
		if ( data.describe ) { #>
			<# if ( 'image' === data.type ) { #>
				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
					placeholder="<?php esc_attr_e('Caption this image…'); ?>" {{ maybeReadOnly }} />
			<# } else { #>
				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
					<# if ( 'video' === data.type ) { #>
						placeholder="<?php esc_attr_e('Describe this video…'); ?>"
					<# } else if ( 'audio' === data.type ) { #>
						placeholder="<?php esc_attr_e('Describe this audio file…'); ?>"
					<# } else { #>
						placeholder="<?php esc_attr_e('Describe this media file…'); ?>"
					<# } #> {{ maybeReadOnly }} />
			<# } #>
		<# } #>
	</script>
<?php }

4 thoughts on “Wp3.5 Media Gallery Edit modal: change captions to title

  1. Jonathan says:

    Editing a core file is a bad idea though, because the next time you upgrade, those changes get erased.  Always a better idea to use a plugin.

    Reply
    • Avatar of Ünsal Korkmaz
      Ünsal Korkmaz says:

      This snippet is not editing core. Its using filters which you can use those filters in a plugin or theme’s functions.php file.

      Reply
  2. Sascha says:

    Hey Ünsal,

    Very cool trick to replace stuff in core without touching the core! But I guess you still need to be careful on updates in case script names/functionalities change.

    Anyway, thanks very much for sharing the knowledge and a Happy New Year to you!

    Reply
    • Avatar of Ünsal Korkmaz
      Ünsal Korkmaz says:

      Its not best solution but it was only solution in that time. Didnt try later. Happy new year :)

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *