CODEWITHSUNDEEP
javascriptphpjquerywordpressgallery
Erehr
Erehr

Reputation: 21

Wordpress custom gallery settings - conditional display

Using print_media_templates i add some settings into wordpress gallery creator that allow me to chose gallery shortcode output (default gallery, masonry, slider) based on additional shortcode parameters.

My code so far :

<?php

add_action('print_media_templates', function(){ ?>

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

    <label class="setting">
        <span>Gallery Type</span>
        <select name="type" data-setting="type" onchange="getval(this);">
            <option value="default">Default</option>
            <option value="masonry">Masonry</option>
            <option value="slider">Slider</option>
        </select>
    </label>

<div id="slider-settings">
    <label class="setting">
        <span>Animation</span>
        <select id="gallery-type" name="animation" data-settings="animation">
            <option value=""></option>
            <option value="fade">Fade</option>
            <option value="slide">Slide</option>
        </select>
    </label>
</div>

</script>

<script>

    jQuery(document).ready(function() {

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

</script>

<?php

});

?>

It's only small part as example since there's much more options to each gallery type. Since there's lot of options i want to display only one corresponding to selected gallery type. In this example i want to display #slider-settings only when #gallery-type select value == "slider".

As for checking select value i found this code:

<script>
    function getval(sel) {
        if (sel.value == "slider") {
          alert(sel.value);
        }
    }
</script>

with return selected type value (along with onchange="" on #gallery-type select) and display it if it's set to "slider".

But when i want to hide #slider-settings like :

function getval(sel) {
    if (sel.value != "slider") {
        $('#slider-settings').hide();
    }
}

it's not hiding at all.

Upvotes: 2

Views: 1034

Answers (2)

Yusuf Bayrak
Yusuf Bayrak

Reputation: 61

You have to handle native update function. Update function is fired for each label when a single change is made. (media-views.js line 7232)

var oldUpdate = wp.media.view.Settings.Gallery.prototype.update;

wp.media.view.Settings.Gallery.prototype.update = function(key) {

    if( key === "type" ) {
        var value = this.model.get( key );
        if ( value === "slider" ) {
            setTimeout(function(){
                jQuery("#slider-settings").css({"display":"block"});
            });
        } else {
            setTimeout(function(){
                jQuery("#slider-settings").css({"display":"none"});
            });
        }
    }
    // Initialize native code.
    oldUpdate.apply(this, arguments);
};

Upvotes: 1

Erehr
Erehr

Reputation: 21

Somehow i managed to get it work by hiding #slider-settings using not jQuery but javascript :

<script>

    function getval(sel) {
        if (sel.value != "slider") {
          document.getElementById('slider-settings').style.display = 'none'; 
        } else {
          document.getElementById('slider-settings').style.display = 'block'; 
        }
    }

</script>

But to get value it's has to change (since it's onselect=) so first time i display settings it's not hiding. And as i searched there's seems to be not anything like onload= i can use with .

Or is there a way to just reselect it on load ?

Upvotes: 0

Related Questions