How to make WordPress galleries Bootstrap responsive

Using WordPress native gallery is pretty convenient if you don’t need something really fancy. The main issue with it is that it’s not natively responsive.

So how to make your gallery responsive if you’re developing under Bootstrap?

I did a long research and most of the plugins use old versions of Bootstrap with span classes rather using col classes.

The one I found working with Bootstrap version 3 and up, WordPress version 3.6 and up, and ultimately used in one of my projects is called Twitter Bootstrap Galleries. It wraps WP galleries in Bootstrap grid and makes them fully responsive.

The plugin is very simple, you don’t need to change anything in your code or [gallery] shortcode. The only thing you need to do is change the number of columns to show per row. Navigate to Settings -> Twitter Bootstrap Galleries settings and choose the number.

Choosing number of columns per row

Here’s the grid matrix for the plugin:

[code]
/* the grid display */
/*
| columns | mobile | tablet | desktop |per page |
—————————————————-|———–|
| 1 | 1 | 1 | 1 | 10 |
|—————————————————|———–|
| 2 | 1 | 2 | 2 | 10 |
|—————————————————|———–|
| 3 | 1 | 1 | 3 | 9 |
|—————————————————|———–|
| 4 | 1 | 2 | 4 | 12 |
|—————————————————|———–|
| 5 | n/a | n/a | n/a | n/a |
|—————————————————|———–|
| 6 | 2 | 4 | 6 | 12 |
|—————————————————|———–|
| >=6 | n/a | n/a | n/a | n/a |
|—————————————————————|
*
*
*/
[/code]

That’s it! Super simple!

Enjoy your responsive galleries!

How to solve small image size thumbnail generation issues in WordPress

Working with images is perhaps one of the most annoying things in WordPress, well, at least for me. Websites with thousands of images are a pain in the ass. Why? Because you have to regenerate thumbnails for newly added image sizes. Let’s not even start with the cases when the regeneration is already over and you realize you have to add another image size!

You probably know that image sizes are defined by add_image_size() function in functions.php file (already reserved names for image sizes in WordPress are thumb, thumbnail, post-thumbnail, medium, large). Here’s an example, from one of my latest projects:

[html]
<?php // Image sizes
if ( function_exists( ‘add_image_size’ ) ) {
add_image_size( ‘full-image’, 1920, 1080, true ); //(cropped)
add_image_size( ‘half-image’, 960, 640, true ); //(cropped)
add_image_size( ‘third-image’, 768, 528, true ); //(cropped)
} ?>
[/html]

As you can see, I have pretty large sizes defined. And guess what! Thousands of images already uploaded to the website are not large enough, simple Regenerate Thumbnails plugin won’t help: during regeneration whenever the plugin sees an image with smaller dimensions than your defined image size it will skip the image, and you won’t get your thumbnails. Same goes to newly uploaded small images.

But having all the right sized images is very important, especially in grid layouts.

Now, you have 2 options: replace all your small images with large ones (a tedious task!) or go upscaling.

Sometimes you have to go the easy way and let the images just upscale. Note, that you will lose in quality. If it’s a client’s website, you can follow the directions below, then let the client know that they need to replace/upload larger images if they want sharper display.

You will need 2 plugins instead of Regenerate Thumbnails.

First find and install Thumbnail Upscale plugin. After installing, all your future small media attachments will be upscaled and cropped automatically, that is, if you set cropping in your add_image_size() function to true, like I have in the example above.

But if you have older images you need to crop, too, install Force Regenerate Thumbnails plugin and run it. The plugin deletes all old image sizes and generates new thumbnails, upscaling if necessary.

Voilà, you now have all the sizes you need!

Repeatable WordPress custom fields in a metabox

I once developed a website for a branding company who wanted to add as many boxes to a page as they desired. Boxes could contain text or images.

The obvious solution to this is using custom metaboxes.

But how do you make fields in a metabox repeat themselves, over and over? I wanted to have a button on the metabox, called something like “Add box”, and create a new box with one click.

I usually use WebDevStudios’ Custom Metaboxes and Fields for WordPress for my projects. It’s light, easy to use, well documented, and will satisfy almost every task you may have in mind involving metaboxes. And it did satisfy all my projects, until I hit the wall of repeatable fields.

For days I searched for other snippets, plugins, but none had the functionality I needed.

And then I came across Advanced Custom Fields (ACF) plugin. It’s like a GUI layer for custom fields. If you’re not comfortable with code snippets or modifying your functions.php file, ACF is the perfect plugin for you even if you don’t need repeatable fields for your metaboxes.

The plugin only by itself has very standard functionality: you create your metaboxes, name them, sort them, use them. However, the plugin offers a number of very useful add-ons, like Date and Time picker, Gallery field, Options page and others. The add-on I needed was called Repeater Field.

Some of the add-ons are free, but a couple cost $25. I payed for Repeater Field and I don’t regret a cent I invested in it. It saved me days of (maybe unsuccessful) work!

Go to plugin repository from your WordPress Dashboard, search for Advanced Custom Fields and install the plugin.

Purchase Repeater Field from plugin website, and upload the zip file from Plugins -> Add New -> Upload.

Now we’re ready to build our metabox with repeating fields!

Go to Custom Fields from your Dashboard and create a new field group by clicking Add New.

Enter the title. I’ll name mine Box.

Choose which post types should show your custom box. Mine should show up on pages, so in my case post type is equal to page.

Customize bottom options to your needs. I just change Style to Standard (WP metabox), it will ensure the proper look of my metaboxes.

Advance Custom Fields: Adding Field Group

Advance Custom Fields: Field Group Options

Now scroll up to top and let’s add fields to your field group. Click on Add Field.

Name the Field Label. I just put there Box, too.

Now, if the fields in your metabox are going to be repeatable you have to correctly choose your Field Type. Select Repeater from the dropdown.

Advance Custom Fields: Field Type - Repeater

Fill in Field Instructions if you want to.

My Box metabox is not really required so I’ll choose No.

Now go ahead and create all the subfields of your repeater field you need. You can choose subfield types, selection options if you need to have a dropdown list or a radio selection, you can fill in instructions for each subfield, choose layout, etc.

Here is my list of subfields and an example of one detailed subfield as a radio selection.

Advance Custom Fields: Repeater Fields

Advance Custom Fields: Repeater field details

Here’s a video showing how to work with the plugin and Repeater Field add-on.

Now that you created your repeatable fields in metabox, it’ll show up in post types you chose, in my case – pages.

Advance Custom Fields: Metabox in page editor

I’m going to click on Add Box and fill in the details I need.

Advance Custom Fields: Repeater subfields

Add as many boxes as you need.

Now that it’s done, you need to integrate the values of your fields into your template, in other words – let’s loop through the metabox and call field values for each repeatable field.

When your fields aren’t repeatable, just a regular metabox, you’ll need the_field() and get_field() functions to display and return the values of a specified field.

However with Repeater Field and Flexible Content Field add-ons you’re going to need the_sub_field() and get_sub_field() functions, because your fields are inside a repeater field already, which makes them subfields.

Here’s what my code ended up to be. You need to run a loop. It’s just like a regular WordPress loop, only using have_rows() instead of have_posts(). The script goes through all the boxes and checks whether they have this or that value, and according to conditions wraps subfield values in appropriate placeholders.

[html]
<?php if( have_rows(‘box’) ): //Let’s check if we added any boxes
while ( have_rows(‘box’) ) : the_row(); //Metabox loop
$box_size = get_sub_field(‘box_size’); //Starting to check values of different subfields and wrapping them accordingly ?>
<div class="box<?php if ( $box_size == ‘big’ ) { ?> w2<?php } ?><?php if ( $box_size == ‘rectangular’ ) { ?> w2h1<?php } ?>" style="background: <?php if ( get_sub_field(‘background_image’) ) { ?> url(‘<?php the_sub_field(‘background_image’); ?>’) <?php } ?><?php if ( get_sub_field(‘background_color’) ) { ?> #<?php the_sub_field(‘background_color’); } ?>;">
<?php if ( get_sub_field(‘image_link’) ) { ?>
<a class="white-font" href="<?php the_sub_field(‘image_link’); ?>">
<?php } ?>
<?php if ( get_sub_field(‘image_text’) ) { ?>
<div class="box-text box-text-grey-bg"><?php echo apply_filters(‘the_content’,get_sub_field(‘image_text’));?></div>
<?php } ?>
<span class="linked"></span>
<?php if ( get_sub_field(‘image_link’) ) { ?>
</a>
<?php } ?>
<?php $box_padding = get_sub_field(‘box_padding’);
if ( $box_padding == "small" ) { ?>
<div class="box-text">
<?php }
else if ( $box_padding == "medium" ) { ?>
<div class="box-text2">
<?php }
else if ( $box_padding == "big" ) { ?>
<div class="box-text4">
<?php }
else { ?>
<div class="box-text">
<?php }
echo apply_filters(‘the_content’,get_sub_field(‘box_text’)); ?>
</div>
</div>
<?php endwhile; // Close the loop
endif; ?>
[/html]

Here’s all you need to know about ACF and Repeater Field:

General ACF documentation
Repeater Field add-on
have_rows() function
the_field() function
get_field() function
the_sub_field() function
get_sub_field() function

I will still continue using WebDevStudios’ snippet for creating custom metaboxes up to the point where they can’t solve a specific problem because I prefer small scripts over plugins. But if it comes to repeatable metabox fields, ACF is the solution!

Have you ever wanted to create repeatable custom fields in metaboxes? How did you solve that problem? If you have any alternatives to Advanced Custom Fields plugin and Repeater field add-on, please, share your solutions below, I’d love to know your approach!

Have you had any experience with Advanced Custom Fields plugin and Repeater Field add-on before? How was it?

If you have any questions regarding ACF or custom metaboxes in general, leave a comment below and I’ll try to answer it.