Wordpress gallery: Added css and custom markup

[emaia]

Related #1228

In this PR:

• Added a basic css style for the compatibility of default Wordpress image gallery with Foundation.
• Added a PHP function to make little changes in html markup of the Wordpress image gallery and simplify the use of 3rd party modal window plugins like Venobox. Wordpress image gallery options in admin panel (number of columns; link destination, image size and order) are functional.

Example with Venobox (https://github.com/nicolafranchini/VenoBox):

$ npm install venobox --save

in app.scss add:
@import "../../../node_modules/venobox/venobox/venobox.css";

in app.js add:

import '../../../node_modules/venobox/venobox/venobox';
$(document).ready(function(){
    $('.fp-gallery-lightbox').venobox();
});

$ npm run build

In gallery option (admin) define to point to media file.

Additional: if you want to add a custom select field for gallery small and medium columns in the Wordpress settings, add code bellow in the /wp-includes/media-template.php (after line 751).

<label class="setting">
            <span><?php _e('Columns'); ?> (small)</span>
            <select class="columns" name="columns-small"
                    data-setting="columns-small">
				<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
                    <option value="<?php echo esc_attr( $i ); ?>" <#
                    if ( <?php echo $i ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
                    #>>
					<?php echo esc_html( $i ); ?>
                    </option>
				<?php endfor; ?>
            </select>
        </label>

        <label class="setting">
            <span><?php _e('Columns'); ?> (medium)</span>
            <select class="columns" name="columns-medium"
                    data-setting="columns-medium">
				<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
                    <option value="<?php echo esc_attr( $i ); ?>" <#
                    if ( <?php echo $i ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
                    #>>
					<?php echo esc_html( $i ); ?>
                    </option>
				<?php endfor; ?>
            </select>
        </label>

[AmyGail]

This is great. Thanks!
I did have to remove the apostrophe at the end of the import line like so:
import '../../../node_modules/venobox/venobox/venobox'; $(document).ready(function(){ $('.fp-gallery-lightbox').venobox(); });

[emaia]

I did have to remove the apostrophe at the end of the import line like so:
import '../../../node_modules/venobox/venobox/venobox'; $(document).ready(function(){ $('.fp-gallery-lightbox').venobox(); });

My mistake. I fixed.
Thanks

[AmyGail]

This is very helpful.
Thank you.
I really appreciate how you commented the function so I can figure out how to implement my html params for the lightbox.

I do find that I prefer to ignore the WP gallery columns setting so I can use breakpoints like so. (but I'm happy to have the option to use the columns)

.gallery {
@include xy-grid;
@include flex-align(center);
@include xy-grid-layout(2, '.gallery-item', true);

@include breakpoint(medium){
@include xy-grid-layout(4, '.gallery-item', true);
    }
}
.gallery-icon {
@include thumbnail;
}

[colin-marshall]

@emaia did you look into using the Block Grid for this?
https://foundation.zurb.com/sites/docs/xy-grid.html#block-grids

[nitrokevin]

I tried to adapt this so that is works with WP gallery column setting, but id didn't work, probably missing something obvious

.gallery {
@include xy-grid;
 @include xy-grid-layout(4, '.gallery-item', true); 
// @include flex-align(justify);

 &.gallery-columns-2 {
      @include breakpoint(small) {
							@include xy-grid-layout(12, '.gallery-item', true);
      }
       @include breakpoint(medium) {  
        @include xy-grid-layout(6, '.gallery-item', true); 
      }
   }
 &.gallery-columns-3 {
      @include breakpoint(small) {
							@include xy-grid-layout(12, '.gallery-item', true);
      }
       @include breakpoint(medium) {  
        @include xy-grid-layout(4, '.gallery-item', true); 
      }
   }
 &.gallery-columns-4 {
      @include breakpoint(small) {
							@include xy-grid-layout(12, '.gallery-item', true);
      }
       @include breakpoint(medium) {  
        @include xy-grid-layout(3, '.gallery-item', true); 
      }
   }
&.gallery-columns-6 {
      @include breakpoint(small) {
							@include xy-grid-layout(12, '.gallery-item', true);
      }
       @include breakpoint(medium) {  
        @include xy-grid-layout(2, '.gallery-item', true); 
      }
   }
 .gallery-item {
      padding: 0.5rem 0;
      @include flex-align-self($y:middle);
    }
}

.gallery-icon {
@include thumbnail;
}

[emaia]

Hi @colin-marshall . Today I checked this and update my PR. Aditionaly, I added the possibility to use dynamic sizes for columns in small and medium screens but I could not do that without a hardcode in Wordpress media-template.php. Anyway, this works with default values in case not use the hardcode. What you think?

@nitrokevin check my code now.