为图像添加对齐选项

时间:2013-01-29 作者:NatalieMac

一件罕见的事——我想在WordPress中做点什么,但不知道怎么做,搜索结果几乎一无所获。

将图像插入帖子时,会得到对齐选项:“无”、“左”、“右”、“中”。这些导致图像插入与对齐相关的CSS类,如“alignleft”、“alignright”或“aligncenter”。

太棒了

如果我的主题稍微复杂一点,我想在这里添加几个选项,就像核心选项一样,只需向插入的图像添加一个新的CSS类,该怎么办?例如,一个“右边距”选项,我可以用一些花哨的CSS来设计,以获得一些更复杂的布局?

有没有关于我从哪里开始的建议?

4 个回复
SO网友:Simon

我同意david-binda - 好问题!我曾多次遇到这个问题,并提出了一个效果很好的解决方案。虽然我确实喜欢这样的想法,即添加一个快捷码来插入带有类的图像,如pavlos-bizimis 我认为它并没有像在图像编辑弹出窗口中添加选项那样优雅地解决这个问题(例如,除非您喜欢手动输入图像ID,否则您可能需要将图像包装在快捷码中)。此外,对于我的一些客户来说,即使是短代码也太复杂了(在这种情况下,您可以将其绑定到一个不正常的TinyMCE按钮)。

无论如何,没有进一步的麻烦-这是我的五美分。我在一个幻灯片放映插件中使用了这个解决方案,该插件为我提供了从幻灯片放映中包括/排除图像的选项,并为显示某些图像元字段内容的覆盖设置了背景色。基本上它与attachment_fields_to_editattachment_fields_to_save 以分别添加输入字段和保存表单数据。此数据将作为附件帖子(即您正在编辑的图像)的标准帖子元数据提供。这很好,因为使用get_post_meta() 像往常一样。您还应该向wp_get_attachment_image_attributesimage_send_to_editor 这将允许您在每次输出图像时自动添加适当的类。

为了便于阅读,我对代码做了一些修改,因此有些部分可能不完整/错误。

/**
 * Adds a form field for excluding images from slideshow
 *
 * @param array $form_fields Array of form fields
 * @param object $post The post to show
 * @return array Array of form fields
 * @author Simon Fransson
 **/
function hs_attachment_fields_to_edit($form_fields, $post = null)
{

    $val = (boolean)get_post_meta($post->ID, SLIDESHOW_EXCLUDE_IMAGE_KEY, true);
    $id = SLIDESHOW_EXCLUDE_IMAGE_KEY . "-" . $post->ID;
    $markup = sprintf(\'<label for="%s"><input type="checkbox" class="checkbox" id="%s" name="attachments[%s][%s]" value="true" %s /> %s</label>\', $id, $id, $post->ID, SLIDESHOW_EXCLUDE_IMAGE_KEY, checked($val, true, false), __(\'Exclude from slideshow\', \'slideshow\'));

    $form_field = array(
        \'label\' => __(\'Slideshow\', \'slideshow\'),
        \'input\' => \'html\',
        \'html\' => $markup,
        \'value\' => $val,
        \'helps\' => __(\'Excludes the image from slideshows.\', \'slideshow\'),
    );

    $form_fields[SLIDESHOW_EXCLUDE_IMAGE_KEY] = $form_field; // See update notice below code block!

    return $form_fields;
}
add_filter(\'attachment_fields_to_edit\', \'hs_attachment_fields_to_edit\', 10, 2);



/**
 * Save the images exclude status meta value when saving attachment data
 *
 * @param object $post Post object
 * @param  array $attachment Field values
 * @return object Post object
 * @author Simon Fransson
 **/
function hs_attachment_fields_to_save($post, $attachment = null)
{
    update_post_meta($post[\'ID\'], SLIDESHOW_EXCLUDE_IMAGE_KEY, intval(isset($attachment[SLIDESHOW_EXCLUDE_IMAGE_KEY])));

    return $post;
}
add_filter(\'attachment_fields_to_save\', \'hs_attachment_fields_to_save\', 10, 2);


/**
 * Generate metadata for newly uploaded attachment.
 * This is here simply because we are dealing with a boolean,
 * which means that for SQL related reasons a value NEEDS to
 * exist even when noting has been specified in the options 
 *
 * @param  array $metadata Array of meta data
 * @param int $attachment_id ID of attachment post
 * @return array Array of meta data
 * @author Simon Fransson
 **/
function hs_generate_attachment_metadata($metadata, $attachment_id = null)
{
    $exclude = intval(get_post_meta($attachment_id, SLIDESHOW_EXCLUDE_IMAGE_KEY, true));
    update_post_meta($attachment_id, SLIDESHOW_EXCLUDE_IMAGE_KEY, $exclude);

    return $metadata;
}
add_filter(\'wp_generate_attachment_metadata\', \'hs_generate_attachment_metadata\', 10, 2);
UPDATE: 我只是复制了这段代码,将其用作我正在进行的项目中的样板。从代码中可以看出,我喜欢将post元键存储在定义的常量中。当我这样做时,我总是用_ 防止它显示在元字段编辑器中,但这种做法可能会导致以下问题attachment_fields_to_save. 中的键$form_fields 大堆cannot start with _, 因此,在处理附件字段时,请小心为数组和元值使用不同的键,或者修剪任何下划线。自从SLIDESHOW_EXCLUDE_IMAGE_KEY 在我的示例中甚至没有定义这在复制代码时可能不是什么大问题,但我想我还是要提到它。我花了一段时间才弄明白这一点(这是第二次)。

SO网友:david.binda

问得好。这个问题有了答案。也许下面的代码太长了,但不能再短了。关键是,您可以删除wp\\u print\\u media\\u templates函数的wp\\u footer和wp\\u admin\\u footer挂钩,并将其替换为具有自定义选项的您自己的wp\\u print\\u media\\u templates函数。只需将下面的代码放入函数中即可。php将重写orginial函数,并允许您在使用HTML注释行之后修改类<!-- SETUP YOUR CLASSES HERE --> 类以以下方式插入到库快捷码中:

设置为MyClass1的值将生成alignMyClass1。

remove_action( \'wp_footer\', \'wp_print_media_templates\' );
remove_action( \'admin_footer\', \'wp_print_media_templates\' );
add_action( \'admin_footer\', \'my_wp_print_media_templates\' );
add_action( \'wp_footer\', \'my_wp_print_media_templates\' );

function my_wp_print_media_templates() {
global $is_IE;
$class = \'media-modal wp-core-ui\';
if ( $is_IE && strpos($_SERVER[\'HTTP_USER_AGENT\'], \'MSIE 7\') !== false )
    $class .= \' ie7\';
?>
<script type="text/html" id="tmpl-media-frame">
    <div class="media-frame-menu"></div>
    <div class="media-frame-title"></div>
    <div class="media-frame-router"></div>
    <div class="media-frame-content"></div>
    <div class="media-frame-toolbar"></div>
    <div class="media-frame-uploader"></div>
</script>

<script type="text/html" id="tmpl-media-modal">
    <div class="<?php echo $class; ?>">
        <a class="media-modal-close" href="#" title="<?php esc_attr_e(\'Close\'); ?>"><span class="media-modal-icon"></span></a>
        <div class="media-modal-content"></div>
    </div>
    <div class="media-modal-backdrop"></div>
</script>

<script type="text/html" id="tmpl-uploader-window">
    <div class="uploader-window-content">
        <h3><?php _e( \'Drop files to upload\' ); ?></h3>
    </div>
</script>

<script type="text/html" id="tmpl-uploader-inline">
    <# var messageClass = data.message ? \'has-upload-message\' : \'no-upload-message\'; #>
    <div class="uploader-inline-content {{ messageClass }}">
    <# if ( data.message ) { #>
        <h3 class="upload-message">{{ data.message }}</h3>
    <# } #>
    <?php if ( ! _device_can_upload() ) : ?>
        <h3 class="upload-instructions"><?php _e(\'The web browser on your device cannot be used to upload files. You may be able to use the <a href="http://wordpress.org/extend/mobile/">native app for your device</a> instead.\'); ?></h3>
    <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
        <h3 class="upload-instructions"><?php _e( \'Upload Limit Exceeded\' ); ?></h3>
        <?php do_action( \'upload_ui_over_quota\' ); ?>

    <?php else : ?>
        <div class="upload-ui">
            <h3 class="upload-instructions drop-instructions"><?php _e( \'Drop files anywhere to upload\' ); ?></h3>
            <a href="#" class="browser button button-hero"><?php _e( \'Select Files\' ); ?></a>
        </div>

        <div class="upload-inline-status"></div>

        <div class="post-upload-ui">
            <?php
            do_action( \'pre-upload-ui\' );
            do_action( \'pre-plupload-upload-ui\' );

            if ( 10 === remove_action( \'post-plupload-upload-ui\', \'media_upload_flash_bypass\' ) ) {
                do_action( \'post-plupload-upload-ui\' );
                add_action( \'post-plupload-upload-ui\', \'media_upload_flash_bypass\' );
            } else {
                do_action( \'post-plupload-upload-ui\' );
            }

            $upload_size_unit = $max_upload_size = wp_max_upload_size();
            $byte_sizes = array( \'KB\', \'MB\', \'GB\' );

            for ( $u = -1; $upload_size_unit > 1024 && $u < count( $byte_sizes ) - 1; $u++ ) {
                $upload_size_unit /= 1024;
            }

            if ( $u < 0 ) {
                $upload_size_unit = 0;
                $u = 0;
            } else {
                $upload_size_unit = (int) $upload_size_unit;
            }

            ?>

            <p class="max-upload-size"><?php
                printf( __( \'Maximum upload file size: %d%s.\' ), esc_html($upload_size_unit), esc_html($byte_sizes[$u]) );
            ?></p>

            <?php if ( ( $GLOBALS[\'is_IE\'] || $GLOBALS[\'is_opera\']) && $max_upload_size > 100 * 1024 * 1024 ) :
                $browser_uploader = admin_url( \'media-new.php?browser-uploader&post_id=\' ) . \'{{ data.postId }}\';
                ?>
                <p class="big-file-warning"><?php printf( __( \'Your browser has some limitations uploading large files with the multi-file uploader. Please use the <a href="%1$s" target="%2$s">browser uploader</a> for files over 100MB.\' ),
                    $browser_uploader, \'_blank\' ); ?></p>
            <?php endif; ?>

            <?php do_action( \'post-upload-ui\' ); ?>
        </div>
    <?php endif; ?>
    </div>
</script>

<script type="text/html" id="tmpl-uploader-status">
    <h3><?php _e( \'Uploading\' ); ?></h3>
    <a class="upload-dismiss-errors" href="#"><?php _e(\'Dismiss Errors\'); ?></a>

    <div class="media-progress-bar"><div></div></div>
    <div class="upload-details">
        <span class="upload-count">
            <span class="upload-index"></span> / <span class="upload-total"></span>
        </span>
        <span class="upload-detail-separator">&ndash;</span>
        <span class="upload-filename"></span>
    </div>
    <div class="upload-errors"></div>
</script>

<script type="text/html" id="tmpl-uploader-status-error">
    <span class="upload-error-label"><?php _e(\'Error\'); ?></span>
    <span class="upload-error-filename">{{{ data.filename }}}</span>
    <span class="upload-error-message">{{ data.message }}</span>
</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.caption }}" class="describe" data-setting="caption"
                placeholder="<?php esc_attr_e(\'Caption this image&hellip;\'); ?>" {{ 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&hellip;\'); ?>"
                <# } else if ( \'audio\' === data.type ) { #>
                    placeholder="<?php esc_attr_e(\'Describe this audio file&hellip;\'); ?>"
                <# } else { #>
                    placeholder="<?php esc_attr_e(\'Describe this media file&hellip;\'); ?>"
                <# } #> {{ maybeReadOnly }} />
        <# } #>
    <# } #>
</script>

<script type="text/html" id="tmpl-attachment-details">
    <h3>
        <?php _e(\'Attachment Details\'); ?>

        <span class="settings-save-status">
            <span class="spinner"></span>
            <span class="saved"><?php esc_html_e(\'Saved.\'); ?></span>
        </span>
    </h3>
    <div class="attachment-info">
        <div class="thumbnail">
            <# if ( data.uploading ) { #>
                <div class="media-progress-bar"><div></div></div>
            <# } else if ( \'image\' === data.type ) { #>
                <img src="{{ data.size.url }}" draggable="false" />
            <# } else { #>
                <img src="{{ data.icon }}" class="icon" draggable="false" />
            <# } #>
        </div>
        <div class="details">
            <div class="filename">{{ data.filename }}</div>
            <div class="uploaded">{{ data.dateFormatted }}</div>

            <# if ( \'image\' === data.type && ! data.uploading ) { #>
                <# if ( data.width && data.height ) { #>
                    <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
                <# } #>

                <# if ( data.can.save ) { #>
                    <a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( \'Edit Image\' ); ?></a>
                    <a class="refresh-attachment" href="#"><?php _e( \'Refresh\' ); ?></a>
                <# } #>
            <# } #>

            <# if ( ! data.uploading && data.can.remove ) { #>
                <a class="delete-attachment" href="#"><?php _e( \'Delete Permanently\' ); ?></a>
            <# } #>

            <div class="compat-meta">
                <# if ( data.compat && data.compat.meta ) { #>
                    {{{ data.compat.meta }}}
                <# } #>
            </div>
        </div>
    </div>

    <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? \'\' : \'readonly\'; #>
        <label class="setting" data-setting="title">
            <span><?php _e(\'Title\'); ?></span>
            <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
        </label>
        <label class="setting" data-setting="caption">
            <span><?php _e(\'Caption\'); ?></span>
            <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
        </label>
    <# if ( \'image\' === data.type ) { #>
        <label class="setting" data-setting="alt">
            <span><?php _e(\'Alt Text\'); ?></span>
            <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
        </label>
    <# } #>
        <label class="setting" data-setting="description">
            <span><?php _e(\'Description\'); ?></span>
            <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
        </label>
</script>

<script type="text/html" id="tmpl-media-selection">
    <div class="selection-info">
        <span class="count"></span>
        <# if ( data.editable ) { #>
            <a class="edit-selection" href="#"><?php _e(\'Edit\'); ?></a>
        <# } #>
        <# if ( data.clearable ) { #>
            <a class="clear-selection" href="#"><?php _e(\'Clear\'); ?></a>
        <# } #>
    </div>
    <div class="selection-view"></div>
</script>

<script type="text/html" id="tmpl-attachment-display-settings">
    <h3><?php _e(\'Attachment Display Settings\'); ?></h3>

    <# if ( \'image\' === data.type ) { #>
        <label class="setting">
            <span><?php _e(\'Alignment\'); ?></span>
            <select class="alignment"
                data-setting="align"
                <# if ( data.userSettings ) { #>
                    data-user-setting="align"
                <# } #>>

                <option value="left">
                    <?php esc_attr_e(\'Left\'); ?>
                </option>
                <option value="center">
                    <?php esc_attr_e(\'Center\'); ?>
                </option>
                <option value="right">
                    <?php esc_attr_e(\'Right\'); ?>
                </option>
                <option value="none" selected>
                    <?php esc_attr_e(\'None\'); ?>
                </option>
                <!-- SETUP YOUR CLASSES HERE -->
                <option value="MyClass1"> <!-- set value produces class alignMyClass1 -->
                    <?php esc_attr_e(\'My class 1\'); ?> <!-- label for your Class -->
                </option>
            </select>
        </label>
    <# } #>

    <div class="setting">
        <label>
            <span><?php _e(\'Link To\'); ?></span>
            <select class="link-to"
                data-setting="link"
                <# if ( data.userSettings ) { #>
                    data-user-setting="urlbutton"
                <# } #>>

                <option value="custom">
                    <?php esc_attr_e(\'Custom URL\'); ?>
                </option>
                <option value="file" selected>
                    <?php esc_attr_e(\'Media File\'); ?>
                </option>
                <option value="post">
                    <?php esc_attr_e(\'Attachment Page\'); ?>
                </option>
                <option value="none">
                    <?php esc_attr_e(\'None\'); ?>
                </option>                   
            </select>
        </label>
        <input type="text" class="link-to-custom" data-setting="linkUrl" />
    </div>

    <# if ( \'undefined\' !== typeof data.sizes ) { #>
        <label class="setting">
            <span><?php _e(\'Size\'); ?></span>
            <select class="size" name="size"
                data-setting="size"
                <# if ( data.userSettings ) { #>
                    data-user-setting="imgsize"
                <# } #>>
                <?php

                $sizes = apply_filters( \'image_size_names_choose\', array(
                    \'thumbnail\' => __(\'Thumbnail\'),
                    \'medium\'    => __(\'Medium\'),
                    \'large\'     => __(\'Large\'),
                    \'full\'      => __(\'Full Size\'),
                ) );

                foreach ( $sizes as $value => $name ) : ?>
                    <#
                    var size = data.sizes[\'<?php echo esc_js( $value ); ?>\'];
                    if ( size ) { #>
                        <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, \'full\' ); ?>>
                            <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
                        </option>
                    <# } #>
                <?php endforeach; ?>
            </select>
        </label>
    <# } #>
</script>

<script type="text/html" id="tmpl-gallery-settings">
    <h3><?php _e(\'Gallery Settings\'); ?></h3>

    <label class="setting">
        <span><?php _e(\'Link To\'); ?></span>
        <select class="link-to"
            data-setting="link"
            <# if ( data.userSettings ) { #>
                data-user-setting="urlbutton"
            <# } #>>

            <option value="file" selected>
                <?php esc_attr_e(\'Media File\'); ?>
            </option>
            <option value="post">
                <?php esc_attr_e(\'Attachment Page\'); ?>
            </option>
        </select>
    </label>

    <label class="setting">
        <span><?php _e(\'Columns\'); ?></span>
        <select class="columns" name="columns"
            data-setting="columns">
            <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
                <option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>>
                    <?php echo esc_html( $i ); ?>
                </option>
            <?php endfor; ?>
        </select>
    </label>

    <label class="setting">
        <span><?php _e( \'Random Order\' ); ?></span>
        <input type="checkbox" data-setting="_orderbyRandom" />
    </label>
</script>

<script type="text/html" id="tmpl-embed-link-settings">
    <label class="setting">
        <span><?php _e(\'Title\'); ?></span>
        <input type="text" class="alignment" data-setting="title" />
    </label>
</script>

<script type="text/html" id="tmpl-embed-image-settings">
    <div class="thumbnail">
        <img src="{{ data.model.url }}" draggable="false" />
    </div>

    <?php if ( ! apply_filters( \'disable_captions\', \'\' ) ) : ?>
        <label class="setting caption">
            <span><?php _e(\'Caption\'); ?></span>
            <textarea data-setting="caption" />
        </label>
    <?php endif; ?>

    <label class="setting alt-text">
        <span><?php _e(\'Alt Text\'); ?></span>
        <input type="text" data-setting="alt" />
    </label>

    <div class="setting align">
        <span><?php _e(\'Align\'); ?></span>
        <div class="button-group button-large" data-setting="align">
            <button class="button" value="left">
                <?php esc_attr_e(\'Left\'); ?>
            </button>
            <button class="button" value="center">
                <?php esc_attr_e(\'Center\'); ?>
            </button>
            <button class="button" value="right">
                <?php esc_attr_e(\'Right\'); ?>
            </button>
            <button class="button active" value="none">
                <?php esc_attr_e(\'None\'); ?>
            </button>
        </div>
    </div>

    <div class="setting link-to">
        <span><?php _e(\'Link To\'); ?></span>
        <div class="button-group button-large" data-setting="link">
            <button class="button" value="file">
                <?php esc_attr_e(\'Image URL\'); ?>
            </button>
            <button class="button" value="custom">
                <?php esc_attr_e(\'Custom URL\'); ?>
            </button>
            <button class="button active" value="none">
                <?php esc_attr_e(\'None\'); ?>
            </button>
        </div>
        <input type="text" class="link-to-custom" data-setting="linkUrl" />
    </div>
</script>

<script type="text/html" id="tmpl-attachments-css">
    <style type="text/css" id="{{ data.id }}-css">
        #{{ data.id }} {
            padding: 0 {{ data.gutter }}px;
        }

        #{{ data.id }} .attachment {
            margin: {{ data.gutter }}px;
            width: {{ data.edge }}px;
        }

        #{{ data.id }} .attachment-preview,
        #{{ data.id }} .attachment-preview .thumbnail {
            width: {{ data.edge }}px;
            height: {{ data.edge }}px;
        }

        #{{ data.id }} .portrait .thumbnail img {
            max-width: {{ data.edge }}px;
            height: auto;
        }

        #{{ data.id }} .landscape .thumbnail img {
            width: auto;
            max-height: {{ data.edge }}px;
        }
    </style>
</script>
<?php

do_action( \'print_media_templates\' );
}
如果你想设置没有“align”前缀的类,你必须修改javascript,在帖子的内容文本区域插入短代码,这可能比在CSS中重命名类太复杂了。Enyoj!

SO网友:Pavlos Bizimis

也许您应该创建一个用于插入具有类属性的图像的快捷码。我在很多商业主题中都看到了这一点。

SO网友:user1925594

您可以使用唯一的图像ID来单独设置特定图像的样式。

结束

相关推荐

Re-process Images

我有a blog 它拥有嵌入帖子中的所有图像的最高分辨率版本,而不是链接到图像附件页的缩略图。您能告诉我如何重新处理所有嵌入的图像,以便将它们输出为缩小尺寸的缩略图,链接到自己的附件页(这是WordPress的默认设置)吗?我认为我可以让Regenerate Thumbnails 这个插件?