Jul 292013
 

I’ve been working on a responsive website for a client, and I have come across a situation where I needed to get a WordPress Gallery to resize itself according to the space made available to it by the containing element. If I leave it up to the Media Manager, I can only set a specific number of columns – 1 thru 9 – and what I really wanted was to be able to set zero columns so that all the items just floated left and filled the available space as best they could (no BR elements getting in the way!). Now, I could easily do this by editing the HTML and manually setting the columns attribute, but I am handing this over to the client and I don’t particularly want them to have to edit HTML : they should really be able to do this from the UI interface (Media Manager, when creating/editing the Gallery), but for some unknown reason WP doesn’t make zero columns available as an option!? So I wrote a fix for it…

option for zero columns appended to selectIf you want to use the above code, feel free.

If you have a child theme, simply add the code to your functions.php (you can take out the comments section at the top).

Alternatively, you can install it as plugin (leave the comments section in) :

  1. save the above code to a file called (for example) media-gallery-zero-columns.php
  2. create a folder called (for example) media-gallery-zero-columns and place the new file in it
  3. upload the media-gallery-zero-columns folder to your WP’s wp-content/plugins/ folder
  4. in the admin backend of your WP site : go to Plugins, find the new Media Gallery Zero Columns plugin, and Activate it!

Note that it is only relevant to WP v3.5+ (the Media Manager being introduced at v3.5.0) and will also work for v3.6. It’s set to be nigh-on the last action taken, and it includes a safeguard against adding the zero-columns option if there’s already one there.

A final word of warning : if any other plugin modifies the Javascript wp.media.view.Settings.Gallery function then it is highly likely (read “certain”) to conflict with this code, and one or the other will fail! I don’t know of any other plugin that changes this function, but then the number of plugins I know nothing about is 99.99% of them!

Edit, 20th Feb 2014

It has just come to my attention that, although zero columns is a perfectly valid setting (according to the Gallery Shortcode documentation), some themes seem to forget that it can be set – the Twenty Fourteen theme being an example. Therefore, if you are using zero columns, you may also need to add some css to your stylesheet so as not to break your layout!

WordPress adds a class – gallery-columns-N – to the div.gallery container, where N is the number of columns set; for zero columns, that class will therefore be gallery-columns-0. If your theme is at all responsive, you may well find that there are styles defined for certain numbers of columns that set maximum widths for the contained images and/or gallery-items that wrap them, and if there is no default, or no specific rule for gallery-columns-0, then you might need to add one. This is just an example (it’s very much theme-dependent!) …

 Edit, 9th June 2014

Hmm … it has been brought to my attention that the closing SCRIPT tag within the function had an extraneous single quote and semi-colon following it (before switching back into PHP mode) : I have now corrected the code sample … my apologies for the oversight.

Edit, 2nd November 2104

The script has been corrected so that it now works with WordPress v3.9+ & v4.0. Apologies for the oversight, and thanks to Marton for pointing it out.

Share
 Posted by at 1:27 pm

  20 Responses to “How to Add a Gallery Option for Zero Columns to WordPress Media Manager”

Comments (19) Pingbacks (1)
  1. Thank you! Solved my problem!

  2. Hi I keep getting errors when installing there seems to be some confusion with the php and js endings, plus (I’m new at this) and can’t quite understand how you’re combining JS and PHP in a php function file ??

    any help appreciated .

    • How are you installing it? Into your (child) theme’s functions.php file, or as a plugin?
      What errors are you getting?
      Are you pasting the initial <?php into code that is already in PHP mode? If so, don’t.

      The PHP code outputs the SCRIPT tags (and contents) into your page, and the browser then runs the javascript. If you look at the PHP function – mgzc_media_gallery_zero_columns_script – the first and last lines of the function come out of PHP mode and go back into PHP mode respectively. Anything in between is sent to the browser and interpreted there.

      • oh great, thanks for the update, just tried the plugin option and it works . I was confused because the last three lines looked like a mistake(?) and so I can’t quite determine where to start-stop copy-pasting to functions.php – as in actuality what I would really like to do is figure out how to jquery prepend menu items to the columns menu for alternative gallery plugins:

        ‘Slider’ and maybe even modify 2, 3, and 4 …
        ‘Stax’ , ‘Scrub’ etc

        I’ve already figured out working jquery code to adapt and reconfigure the wp gallery html output so this would be a great help for back-end usability . So far I’ve scoured overflow and exchange and this is by far so far the best solution

  3. $s.find(‘option[value=”1″]’).text(‘Slide’); this works for me (a major leap and now I can sleep) but still no joy with functions.php

    • I’ve made one small edit to the code sample : I noticed that the closing SCRIPT tag (within the function) had a single quote and a semi-colon after it (before switching back into PHP mode) – they shouldn’t have been there so I have removed them.
      If you are copy-pasting into an existing functions.php, take everything from the inline comment (“// 3.5+ media gallery…”) through to the bottom (the closing curly bracket of the function definition). For a plugin, copy-paste the entire code.
      If you want to prepend items to the SELECT, you could just use $s.prepend() instead of $s.append()?

      • incredible! it’s done . I didn’t think it would be possible, many thanks I used :

        $s.find(‘option[value=”1″]’).text(‘Slide’);
        $s.find(‘option[value=”2″]’).text(‘Stack’);
        $s.find(‘option[value=”3″]’).text(‘Scrub’);
        $s.find(‘option[value=”4″]’).text(‘Strips’);

        next task is to work out how to change the ‘columns’ text …

        • $s.find(‘option[value=”5″]’).remove();
          $s.find(‘option[value=”6″]’).remove();
          $s.find(‘option[value=”7″]’).remove();
          $s.find(‘option[value=”8″]’).remove();
          $s.find(‘option[value=”9″]’).remove();
          $s.siblings(‘span’).text(‘Gallery Type:’);

          perfect .

  4. When edit Gallery Settings with this script the Attachment Details is disappear.

    • I’ve just re-checked on a WordPress v4.0 installation and the Attachment Details section – on the Create Gallery page – appears fine. On the Edit Gallery page – where the affected columns dropdown is – the Link To selector also still appears. Do you have a bit more information? WordPress version? Other installed plugins?

      • WordPress 4.0, twentyfourteen theme without plugins.

        Add Media button
        Create Gallery Tab (select images)
        Create a new gallery button
        Edit Gallery Tab

        when select one image, in right side only Gallery Settings visible, and the Attachment Details is disappear.
        picture: http://i.imgur.com/Z295uoh.png

  5. WordPress 4.0, twentyfourteen theme without plugins.

    Add Media button
    Create Gallery Tab (select images)
    Create a new gallery button
    Edit Gallery Tab

    when select one image, in right side only Gallery Settings visible, and the Attachment Details is disappear.
    picture: http://i.imgur.com/Z295uoh.png

  6. You know, this worked. I was up all night trying to figure out how to solve this problem. And this actually WORKED!!!!

    I can’t thank you enough.

    Take care,
    Denise

  7. Thank you very much!

  8. Hi This is great,

    I now know how to change the default gallery settings and also know how to write new gallery settings. But i’m stil strugling how to get the values to the frontend. Can you explain how to get this value on the frontend? Thank you verry much.

    • I’m not sure how to answer this, because I don’t really understand the question.
      The only thing that reaches the frontend is the output resulting from WordPress’s processing of the gallery shortcode.
      If the gallery shortcode has columns=0 set (which is the point of the code above) then the output will have a class of gallery-columns-0, and it won’t have any BR elements – all of which is done automatically by WordPress.
      How the gallery looks in the frontend is very much theme dependent : if your theme declares support HTML5 markup for gallery output, then your theme is solely responsible for styling the output … and it may need tweaking; if your theme doesn’t declare HTML5 support then WordPress provides default gallery styling … and that too will probably need to be overridden for zero columns.
      If I haven’t answered your query, I apologise, and maybe you could expand on your problem?

  9. Hi Wizzud,

    I mean’t this:
    With the help of your tutorial and some other tutorial i was able to create new gallery settings by this code:

    Default gallery
    Slideshow
    Masonry gallery

    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, {
    slideshow_attr: ‘zzlslideshow’
    });

    // 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(‘slideshow-gallery-settings’)(view);
    }
    });

    });

    This code provides the shortcode on the backend of wordpress. But i do’nt now how to get the values of the chosen options to the frondend. for example if people choose option slideshow i want to turn the gallery in a flexslider. Hope you understand my problem now

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)