wake-up-neo.net

Zulassen mehrerer Vorlagenansichten auf der Seite "Galerieeinstellungen" bei Verwendung des visuellen Editors

Ich versuche, dieses answer zu erweitern, indem ich es möglich mache, Shortcode-Attribute von der Benutzeroberfläche zu wechseln und das Galerie-Markup basierend auf diesen Attributen zu ändern.

[gallery owl="true" link="none" size="medium" ids="378,377,376,375,374,373"]

In diesem Fall würde, wenn owl auf true gesetzt ist, ein Eulenkarussell an der Stelle der Galerie gerendert, was auch der Fall ist. Aber wie bei jedem Shortcode muss man sich die richtigen Attribute merken. Angesichts der Tatsache, dass ich auch die Möglichkeit haben möchte, Karussells zu tauschen, um iDangerous Swiper zu sagen, ist das Attribut owl begrenzt und kann sich aufgrund des unterstützten Funktionsumfangs nur schwer merken.

Zum Glück habe ich ein Snippet gefunden, mit dem ich ~ benutzerdefinierte Felder ~ zur Galerie hinzufügen kann, indem ich sample verwende.

add_action('print_media_templates', function(){

  // define your backbone template;
  // the "tmpl-" prefix is required,
  // and your input field should have a data-setting attribute
  // matching the shortcode name
  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('My setting'); ?></span>
      <select data-setting="my_custom_attr">
        <option value="foo"> Foo </option>
        <option value="bar"> Bar </option>
        <option value="default_val"> Default Value </option>
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){

      // add your shortcode attribute and its default value to the
      // gallery settings list; $.extend should work as well...
      _.extend(wp.media.gallery.defaults, {
        my_custom_attr: 'default_val'
      });

      // merge default gallery settings template with yours
      wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('my-custom-gallery-setting')(view);
        }
      });

    });

  </script>
  <?php

});

Leider ist die Post> 2 Jahre alt und geschlossen.

DieHerausforderunglautet: Wenn ich die Vorlagenansicht durch meine Einstellungen ersetze, ist es unmöglich, die von einem anderen Plugin oder Thema festgelegten Einstellungen zu erweitern. Die zuletzt als template: festgelegte Ansicht ist immer der Gewinner.

DieFrage: Wie kann ich dies codieren, um mehr Flexibilität zu ermöglichen, wobei nicht nur meine Einstellungen angezeigt werden, sondern auch die Möglichkeit für andere Plugins/Themenänderungen nicht blockiert wird?

plugin-developmentshortcodegalleryattributemedia-settings
3
jgraup

Es scheint, dass die Vorlagen in Skriptform vorliegen

<script type="text/html" id="tmpl-my-custom-gallery-setting">

Zum Rendern der obigen Vorlage wäre erforderlich

wp.media.template('my-custom-gallery-setting')(view)

Da wir die template:-Logik ersetzen, müssen wir nur eine Liste mit Vorlagen-IDs speichern.

if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
wp.media.gallery.templates.Push('my-custom-gallery-setting');

Durchlaufen Sie dann alle verfügbaren Ansichten

wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
    template: function (view) {
        var output = '';
        for (var i in wp.media.gallery.templates) {
            output += wp.media.template(wp.media.gallery.templates[i])(view);
        }
        return output;
    }
});

ERGEBNIS

Der Client muss sich also keine Shortcode-Attribute mehr merken, um die Galerie zu ändern, da der Benutzeroberfläche alle Optionen als Dropdowns hinzugefügt wurden.

[gallery link="none" type="owl" shape="square" ids="7228,7227,7226,7128,7127"]

Als Bonus wird die Liste der unterstützten Typen durch einen Filter geleitet, sodass Sie die Auswahlmöglichkeiten aus einer Drittanbieterquelle hinzufügen oder reduzieren können.

 enter image description here 

STANDORT A

add_action('print_media_templates', function() {

    // define your backbone template;
    // the "tmpl-" prefix is required,
    // and your input field should have a data-setting attribute
    // matching the shortcode name
    $gallery_types = apply_filters('print_media_templates_gallery_settings_types',
                                   array(
                                       'swiper'      => ' Swiper',
                                       'owl'         => ' Owl Carousel',
                                       'revolution'  => ' Revolution Slider',
                                       'default_val' => ' Default'));
    ?>
    <script type="text/html" id="tmpl-custom-gallery-type-setting">
        <label class="setting">
            <span><?php _e('Layout Type'); ?></span>
            <select data-setting="type"><?php
                foreach($gallery_types as $key => $value) {
                    echo "<option value=\"$key\">$value</option>";
                }
                ?>
            </select>
        </label>
    </script>

    <script>

        jQuery(document).ready(function () {

            // add your shortcode attribute and its default value to the
            // gallery settings list; $.extend should work as well...
            _.extend(wp.media.gallery.defaults, {
                type: 'default_val'
            });

            // join default gallery settings template with yours -- store in list
            if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
            wp.media.gallery.templates.Push('custom-gallery-type-setting');

            // loop through list -- allowing for other templates/settings
            wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
                template: function (view) {
                    var output = '';
                    for (var i in wp.media.gallery.templates) {
                        output += wp.media.template(wp.media.gallery.templates[i])(view);
                    }
                    return output;
                }
            });

        });

    </script>
    <?php
});

STANDORT B ​​

add_action('print_media_templates', function() {

    // define your backbone template;
    // the "tmpl-" prefix is required,
    // and your input field should have a data-setting attribute
    // matching the shortcode name
    $gallery_types = apply_filters('print_media_templates_gallery_settings_shapes',
                                   array(
                                       'circle'      => ' Circle',
                                       'rectangle'   => ' Rectangle',
                                       'square'      => ' Square',
                                       'default_val' => ' Default'));
    ?>
    <script type="text/html" id="tmpl-custom-gallery-shapes">
        <label class="setting">
            <span><?php _e('Shapes'); ?></span>
            <select data-setting="shape"><?php
                foreach($gallery_types as $key => $value) {
                    echo "<option value=\"$key\">$value</option>";
                }
                ?>
            </select>
        </label>
    </script>

    <script>

        jQuery(document).ready(function () {

            // add your shortcode attribute and its default value to the
            // gallery settings list; $.extend should work as well...
            _.extend(wp.media.gallery.defaults, {
                shape: 'default_val'
            });

            // join default gallery settings template with yours -- store in list
            if (!wp.media.gallery.templates) wp.media.gallery.templates = ['gallery-settings'];
            wp.media.gallery.templates.Push('custom-gallery-shapes');

            // loop through list -- allowing for other templates/settings
            wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
                template: function (view) {
                    var output = '';
                    for (var i in wp.media.gallery.templates) {
                        output += wp.media.template(wp.media.gallery.templates[i])(view);
                    }
                    return output;
                }
            });

        });

    </script>
    <?php
});
4
jgraup