छवियों के लिए एक संरेखण विकल्प जोड़ें


11

एक दुर्लभ घटना - मैं वर्डप्रेस में कुछ करना चाहता हूं, लेकिन इसके बारे में जाने का कोई विचार नहीं है और खोज शब्दशः कुछ भी नहीं है।

जब आप किसी पोस्ट में एक छवि सम्मिलित कर रहे होते हैं, तो आपको संरेखण विकल्प मिलते हैं: 'कोई नहीं', 'बाएं', 'दाएं', 'केंद्र'। छवि में ये परिणाम संरेखण से संबंधित CSS वर्ग के साथ डाले जा रहे हैं, जैसे 'संरेखित', 'संरेखित' या 'संरेखण'।

महान।

क्या होगा यदि मेरा विषय थोड़ा अधिक जटिल था और मैं यहां कुछ विकल्प जोड़ना चाहता था, जो कि मुख्य विकल्पों की तरह, सिर्फ सम्मिलित चित्रों में एक नया सीएसएस वर्ग जोड़ देगा? उदाहरण के लिए - एक 'सही मार्जिन' विकल्प जिसे मैं कुछ फैंसी सीएसएस के साथ स्टाइल कर सकता हूं ताकि कुछ और जटिल लेआउट मिल सकें?

कोई संकेत जहां मैं शुरू कर सकता हूं?


आप कस्टम / जटिल लेआउट को कैसे परिभाषित / चयन करते हैं?
चिप बेनेट

जवाबों:


2

मैं david-binda से सहमत हूँ - महान प्रश्न! मैं इस समस्या पर कई मौकों पर दौड़ चुका हूं और एक ऐसा समाधान लेकर आया हूं जो बहुत अच्छा काम करता है। जबकि मुझे पावलोस-बिज़िमिस द्वारा सुझाए गए वर्गों के साथ छवि सम्मिलित करने के लिए एक शोर्ट जोड़ने का विचार पसंद है, मुझे नहीं लगता कि यह वास्तव में समस्या को हल करता है जैसे कि छवि संपादित करें पॉपअप में विकल्प जोड़ना (उदाहरण के लिए आपके पास शायद होगा) अपने शोर्ट में छवि को लपेटें जब तक कि आप मैन्युअल रूप से छवि आईडी दर्ज करना पसंद नहीं करते)। इसके अलावा, मेरे कुछ ग्राहकों के लिए यहां तक ​​कि एक शोर्ट भी बहुत जटिल है (जिस स्थिति में आप इसे टिनीएमसीई बटन पर बाँध सकते हैं)।

वैसे भी, आगे की हलचल के बिना - यहाँ मेरे पाँच सेंट हैं। मैं इस समाधान का उपयोग एक स्लाइड शो प्लगइन में करता हूं जो मुझे स्लाइडशो से छवि को शामिल करने / बाहर करने के लिए विकल्प देता है और कुछ छवि मेटा फ़ील्ड की सामग्री दिखाने वाले ओवरले के लिए पृष्ठभूमि रंग सेट करता है। मूल रूप से यह में हुक attachment_fields_to_editऔर attachment_fields_to_saveइनपुट फ़ील्ड जोड़ सकते हैं और क्रमश: प्रपत्र डेटा को बचाने के क्रम में। यह डेटा अटैचमेंट पोस्ट के लिए मानक पोस्ट मेटा के रूप में उपलब्ध होगा (यानी आप जो चित्र संपादित कर रहे हैं)। यह बहुत अच्छा है क्योंकि यह get_post_meta()हमेशा की तरह उपयोग करना आसान है । और आपको एक फिल्टर भी जोड़ना चाहिए wp_get_attachment_image_attributesया image_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);

अद्यतन : मैंने अभी इस कोड का उपयोग एक प्रोजेक्ट में बॉयलरप्लेट के रूप में उपयोग करने के लिए किया है, जिस पर मैं काम कर रहा हूं। जैसा कि आप शायद कोड को देखकर मुझे बता सकते हैं कि मैं अपनी पोस्ट मेटा कुंजियों को परिभाषित स्थिरांक में संग्रहीत करना पसंद करता हूं। जब मैं ऐसा करता हूं तो मैं हमेशा _इसे मेटा फील्ड्स एडिटर में दिखाने से रोकने के लिए वैल्यू को प्राथमिकता देता हूं , लेकिन इस अभ्यास से कुछ समस्याएं हो सकती हैं attachment_fields_to_save$form_fieldsसरणी में कुंजियाँ प्रारंभ नहीं_ हो सकती हैं, इसलिए सरणी और मेटा मानों के लिए अलग-अलग कुंजियों का उपयोग करने के लिए सावधान रहें और अनुलग्नक फ़ील्ड के साथ काम करते समय किसी भी अंडरस्कोर को ट्रिम करें। चूंकि SLIDESHOW_EXCLUDE_IMAGE_KEYमेरे उदाहरण में भी परिभाषित नहीं किया गया है, कोड की नकल करते समय यह शायद कोई बड़ी बात नहीं है, लेकिन मुझे लगा कि मैं इसका उल्लेख करूंगा। मुझे यह पता लगाने में थोड़ा समय लगा (और दूसरी बार, उस समय)।


यह प्रस्तावित सबसे अच्छा समाधान की तरह लगता है। मैं इसे आज़माता हूँ और आपको बताता हूँ कि यह कैसे जाता है। मेरे साथ अपना कोड साझा करने के लिए बहुत बहुत धन्यवाद।
नेटलीमैक

1

अच्छा प्रश्न। और इस सवाल का हल मिल गया है। हो सकता है कि नीचे दिया गया कोड बहुत लंबा हो, लेकिन कोई छोटा नहीं हो सकता। मुद्दा यह है, कि आप wp_footer और wp_admin_footer हुक को wp_print_media_templates फ़ंक्शन के लिए हटा सकते हैं और इसे कस्टम विकल्पों के साथ अपने स्वयं के wp_print_media_templates फ़ंक्शन से बदल सकते हैं। बस अपने functions.php में नीचे दिए गए कोड को रखने orginial समारोह को पार कर जाएगी और आप HTML टिप्पणी के साथ लाइन के बाद कक्षाओं को संशोधित करने की अनुमति देता है <! - सेटअप अपनी कक्षाओं यहाँ -> वर्ग इस तरह से गैलरी शोर्ट में डाला जाता है:

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' );
}

यदि आप "संरेखित" उपसर्ग के बिना कक्षाएं सेट करना चाहते हैं, तो आपको जावास्क्रिप्ट को पोस्ट की सामग्री टेक्स्टारिया में शोर्टकोड को संशोधित करना होगा और सीएसएस में अपनी कक्षाओं का नाम बदलने की तुलना में यह बहुत जटिल हो सकता है। Enyoj!


3
मुझे चिंता है कि पूरी तरह से अपने स्वयं के संस्करण के साथ एक कोर फ़ंक्शन को बदलने के लिए बहुत ही आगे बढ़ने योग्य नहीं होने वाला है। क्या होगा अगर वहाँ कुछ प्रमुख ओवरहाल या मुख्य समारोह के पुनर्लेखन है?
नेटलीमैक

आप सही हैं, और मुझे आशा है कि वहाँ होंगे - फ़िल्टर और एक्शन हुक के साथ। लेकिन जब तक, मुझे डर नहीं होगा क्योंकि मेरे ग्राहक मुझसे संपर्क कर सकते हैं और मैं एक त्वरित सुधार प्रदान करूंगा।
david.binda

हाँ, लेकिन क्या होगा यदि कोई अन्य प्लगइन इस कोड को उसी तरह से कस्टमाइज़ कर रहा है? जिस तरह से आप वर्णन कर रहे हैं वह केवल एक प्लगइन द्वारा किया जा सकता है, बिना संघर्ष के।
NoBugs

किसी भी विचार अगर यह वर्डप्रेस के आधुनिक संस्करणों में अब संभव है? "पूर्ण-चौड़ाई" संरेखण विकल्प को जोड़ने का तरीका जानने की कोशिश कर रहा है, और जैसा @NatalieMac ने कहा, मैं पूरे फ़ंक्शन को ओवरराइड नहीं करना पसंद करूंगा।
जैकोबडेव

0

हो सकता है कि आपको वर्ग विशेषताओं के साथ छवि सम्मिलित करने के लिए एक शोर्ट बनाना चाहिए। मैंने इसे बहुत सारे व्यावसायिक विषयों में देखा है।


2
अधिक विस्तार से यह एक बेहतर उत्तर होगा .. शायद एक उदाहरण शोर्ट।
s_ha_dum

थीम्स को पोस्ट_ कॉन्टेंट शॉर्टकोड नहीं जोड़ना चाहिए। जब उपयोगकर्ता थीम स्विच करता है, तो उन शॉर्टकोड को पार्स नहीं किया जाएगा, और परिणामी / अनपेक्षित पोस्ट सामग्री आउटपुट में परिणाम होगा।
चिप बेनेट

चिप से सहमत - मैं शोर्ट रूट से नीचे नहीं जाना चाहता क्योंकि अगर वे थीम बदलते हैं तो वे सभी टूट जाएंगे। कम से कम अगर मैं सिर्फ छवियों के लिए एक सीएसएस वर्ग जोड़ देता हूं, तो सबसे खराब यह हो सकता है कि अगर वह थीम बदलता है तो इसे नजरअंदाज कर दिया जाएगा।
नेटलीमैक

-3

आप विशिष्ट छवियों को व्यक्तिगत रूप से स्टाइल करने के लिए अद्वितीय छवि आईडी का उपयोग कर सकते हैं।


1
मुझे यकीन नहीं है कि यह सवाल का जवाब देता है। @NatalieMac व्यक्तिगत रूप से छवियों को स्टाइल करने का एक तरीका नहीं लगता है, जो बहुत श्रम गहन है, लेकिन मार्कअप में अधिक कक्षाएं जोड़ने के लिए।
s_ha_dum

सच है, कि मैं कर सकता था, लेकिन यह बहुत लचीला नहीं है। मुझे कुछ ऐसा चाहिए जो क्लाइंट आसानी से अपने आप अपडेट कर सके।
नेटलीमैक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.