Additional Lightbox items for Karma Theme’s Galleries

Posted in: ,

Introduction

Karma Theme offers the ability to create a Gallery using Gallery Posts. For each Gallery Post, there is a limit of 5 Lightbox items.
See screenshot:
Edit Gallery Post

This Tutorial provides instructions on how to increase the number of Lightbox items.

Important Note

We do not recommend adding too many Lightbox items, simply because your server may not be able to handle the processing of these additional images. Therefore, we recommend that you to add one item at a time and test out your Gallery Page.
In the event of “server overload”, you may experience slow Page loading or in the case of memory exhaust, you will either see the fatal error message or a blank screen.

Also, we highly recommend using images of a standard size of 800 x 600 pixels.

If you are unable to understand or implement this Tutorial, please feel free to engage a developer from one of our trusted partners to assist you:
app.codeable.io and wpquestions.com.
You may provide the link to this Tutorial as a reference.

Instructions

Step 1 – Adding Lightbox item input

1) Access your server via FTP and locate wp-content/themes/Karma/framework/custom-metaboxes.php

2) Open the file, go to line 761 and you will find the following code for Lightbox item 5:

array(
	'name' => __('Lightbox Item 5','truethemes_localize'),
	'id' => 'truethemes_gallery_lightbox_5',
	'type' => 'file'
),

array(
	'name' => __('Title','truethemes_localize'),
	'id'   => 'truethemes_gallery_lightbox_title_5',
	'type' => 'text_medium'
),

3) Start a new line bellow that, copy the above code, then paste below it.
Chang the number 5 to 6. Do not change other codes.
You should have the following code for Lightbox item 6:

array(
	'name' => __('Lightbox Item 6','truethemes_localize'),
	'id' => 'truethemes_gallery_lightbox_6',
	'type' => 'file'
),

array(
	'name' => __('Title','truethemes_localize'),
	'id'   => 'truethemes_gallery_lightbox_title_6',
	'type' => 'text_medium'
),

4) Now, save the file and view your Add New Gallery Post view in WordPress Admin, you should have a new Lightbox item 6.
See below screenshot:
Edit Gallery Post2

Step 2 – Adding Lightbox output in Gallery Template

1) In this example we will use Template Name: Filterable Gallery.

2) Open up template-filterable-gallery.php, the file path is as follows.
Karma/template-filterable-gallery.php

3) Go to line 74 and you will find the following codes, that are responsible for getting the input from Add New Gallery Post in WordPress admin and cropping the image to the correct size:

$lightbox5           = get_post_meta($post->ID,'truethemes_gallery_lightbox_5',true);
$lightboxtitle5      = get_post_meta($post->ID,'truethemes_gallery_lightbox_title_5',true);

4) Start a new line bellow that, copy the above code, then paste below it.
Change the number 5 to 6. Do not change other codes.
You should have the following code for Lightbox item 6:

$lightbox6          = get_post_meta($post->ID,'truethemes_gallery_lightbox_6',true);
$lightboxtitle6      = get_post_meta($post->ID,'truethemes_gallery_lightbox_title_6',true);

5) Go further down the file to line 218 and find this code:

for($i=2;$i<6;$i++){

Note the number 6 in the code. Increase it by the number of additional Lightbox items you have added.
In this case we will increase it to 7 since we only added 1 additional Lightbox item.

for($i=2;$i<7;$i++){

For instance, if you added 3 additional Lightbox items, the number would be 9

6) Now save the file and access your WordPress admin to add a new Gallery Post to test out the Lightbox item 6.

7) Publish the page and view it online.

Additional Notes

Now that Karma Theme’s core files have been modified, please remember to keep a copy of the modified files.
This is because, in the event of upgrading the Theme, all your modifications will be overwritten.

When we provide a Theme upgrade, there may be additional codes in any function file or template file, therefore it is recommended that you use a file diff tool to compare the differences and merge back your modifications to the new theme files.

Or you can always revisit this tutorial and rebuilt your modifications.