cp_render_media_image_template()
Renders the template for the modal content for the media image widget
Return
(string)
Source
File: wp-includes/widgets/class-wp-widget-media-image.php
function cp_render_media_image_template() {
ob_start();
?>
<template id="tmpl-edit-image-modal">
<div id="image-modal-content">
<div class="modal-image-details">
<div class="media-embed">
<div class="column-settings">
<div class="setting alt-text has-description">
<label for="image-details-alt-text" class="name"><?php esc_html_e( 'Alternative Text' ); ?></label>
<textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
</div>
<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener"><?php esc_html_e( 'Learn how to describe the purpose of the image' ); ?><span class="screen-reader-text"> <?php esc_html_e( '(opens in a new tab)' ); ?></span></a><?php esc_html_e( '. Leave empty if the image is purely decorative.' ); ?></p>
<div class="setting caption">
<label for="image-details-caption" class="name"><?php esc_html_e( 'Caption' ); ?></label>
<textarea id="image-details-caption" data-setting="caption"></textarea>
</div>
<h3><?php esc_html_e( 'Display Settings' ); ?></h3>
<fieldset>
<div class="setting size">
<label for="image-details-size" class="name"><?php _e( 'Size' ); ?></label>
<select id="image-details-size" class="size" name="size" data-setting="size">
<option value="custom">Custom Size</option>
</select>
</div>
<div class="custom-size wp-clearfix hidden">
<div class="custom-size-setting">
<label for="image-details-size-width"><?php esc_html_e( 'Width' ); ?></label>
<input type="number" id="image-details-size-width" aria-describedby="image-size-desc" data-setting="customWidth" step="1" value="">
</div>
<span class="sep" aria-hidden="true">×</span>
<div class="custom-size-setting">
<label for="image-details-size-height"><?php esc_html_e( 'Height' ); ?></label>
<input type="number" id="image-details-size-height" aria-describedby="image-size-desc" data-setting="customHeight" step="1" value="">
</div>
<p id="image-size-desc" class="description"><?php esc_html_e( 'Image size in pixels' ); ?></p>
</div>
<div class="setting link-to">
<label for="image-details-link-to" class="name"><?php esc_html_e( 'Link To' ); ?></label>
<select id="image-details-link-to" name="link-type" data-setting="link">
<option value="none" selected><?php esc_html_e( 'None' ); ?></option>
<option value="file"><?php esc_html_e( 'Image URL' ); ?></option>
<?php
// Enable Attachment page option only if available.
if ( '1' === get_option( 'wp_attachment_pages_enabled' ) ) {
?>
<option value="post"><?php esc_html_e( 'Attachment Page' ); ?></option>
<?php
}
?>
<option value="custom"><?php esc_html_e( 'Custom URL' ); ?></option>
</select>
<div id="link-to-url" hidden>
<label for="image-details-link-to-custom" class="name"><?php esc_html_e( 'URL' ); ?></label>
<input type="url" id="image-details-link-to-custom" class="link-to-custom" placeholder="https://" data-setting="linkUrl">
</div>
</div>
</fieldset>
<details class="advanced-section">
<summary><h3><?php esc_html_e( 'Advanced Options' ); ?></h3></summary>
<div class="advanced-settings">
<div class="advanced-image">
<div class="setting title-text">
<label for="image-details-title-attribute" class="name"><?php esc_html_e( 'Image Title Attribute' ); ?></label>
<input type="text" id="image-details-title-attribute" data-setting="title" value="">
</div>
<div class="setting extra-classes">
<label for="image-details-css-class" class="name"><?php esc_html_e( 'Image CSS Class' ); ?> </label>
<input type="text" id="image-details-css-class" data-setting="extraClasses" value="">
</div>
</div>
<div class="advanced-link">
<div class="setting link-target">
<input type="checkbox" id="image-details-link-target" data-setting="linkTargetBlank" value="_blank">
<label for="image-details-link-target" class="checkbox-label"><?php esc_html_e( 'Open link in a new tab' ); ?></label>
</div>
<div class="setting link-rel">
<label for="image-details-link-rel" class="name"><?php esc_html_e( 'Link Rel' ); ?></label>
<input type="text" id="image-details-link-rel" data-setting="linkRel" value="">
</div>
<div class="setting link-class-name">
<label for="image-details-link-css-class" class="name"><?php esc_html_e( 'Link CSS Class' ); ?></label>
<input type="text" id="image-details-link-css-class" data-setting="linkClassName" value="">
</div>
</div>
</div>
</details>
</div>
<div class="column-image">
<div class="image">
<img src="<?php echo esc_url( includes_url() . 'images/blank.gif' ); ?>" draggable="false" alt="">
<div class="actions">
<button id="edit-original" type="button" class="edit-attachment button" data-href="<?php echo esc_url( home_url( '/wp-admin/post.php?item=xxx&mode=edit' ) ); ?>"><?php esc_html_e( 'Edit Original' ); ?></button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="widget-modal-footer">
<div class="widget-modal-footer-buttons">
<button id="media-button-update" type="button" class="button media-button button-primary button-large media-button-select" disabled><?php esc_html_e( 'Update' ); ?></button>
</div>
</footer>
</template>
<?php
return ob_get_clean();
}
Changelog
| Version | Description |
|---|---|
| CP-2.5.0 | Introduced. CP-2.5.0 |