CMS Photo Album plugin with PrettyPhoto lightbox
Posted: Mon Sep 09, 2013 11:03 pm
Hello all,
After granting permission from Pablo, here is a tutorial on how you can make the CMS Photo Album plugin display images in a lightbox gallery.
First, you need to be familiar with CMS tools. Please read here: http://wysiwygwebbuilder.com/cms_tools.html
I am going to explain the process with "PrettyPhoto" lightbox. Am using this lightbox because it is the only lightbox that can reduce large images to fit the screen resolution.
Now let's start:
1. Make sure the database details are ready (database name, username, password and host).
2. Create a page and add the "CMS view" object and the "CMS menu" object and set their properties. Do not forget to set the page extension to php. Now, right-click on the page and choose "Page HTML". In "Between <head></head> tags" paste this code:
This code it to initiate the PrettyPhoto script.
3. Create another page for the "CMS admin" object, set its properties and in the "Behavior" section, go to "Plugins" and choose "photoalbum". Do not forget to set the page extension to php.
4. Publish the files to the server. For demonstration purpose, create a folder called "galleryimages".
5. Add some photos to the folder "galleryimages".
6. Access the admin area and create a new page, enter the title, and just beside "General" tab above, click on the "Photo album" tab.
7. Enable the Photo Album plugin, and set the images folder to "./galleryimages/", then save it.
8. Now if you preview the page, when you click on an image you will see that the image is opened in a new window (tab) and placed on the top left corner. You don't want that, do you?!!
OK, now let's start the real work:
9. Go back to WWB and create a dummy page, place a "Photo gallery" object, add some photos, and in the "Behavior" section, choose "Gallery mode : Light Box Gallery", and "Type : prettyPhoto".
10. Publish this page ONLY to a folder on your hard drive. Open this folder, you will find a folder called "prettyPhoto", copy this folder and paste to where you published the CMS site to.
11. Now go the published files, you will find a folder called "plugins", then go to "photoalbum" folder and open "plugin.php" with any advanced text editor, I use Notepad++.
12. Go to line 58, it has this code:
Change it to:
13. Now, go back to the CMS page where you added the Photo album plugin, refresh the page and click on an image, it will open in a lightbox.
Extras
1. If you add a portrait photo in a middle of landscapes ones, its thumbnail will not be as the same dimension as the landscape photos, so if you want to make them the same size, do the following:
- In the "plugin.php" file, go to line 70 with this code:
You can see that the width and height are calculated within the script, so let's say that you want the width of the thumbnail to be 120px and the height to be 80px, replace:
".$thumbnail_width." with 120
and
".$thumbnail_height." with 80
so the code will be:
2. You might have noticed that when clicking on an image, when it opens in a lightbox, there is no description for the image. Well I found a workaround (might not be the best solution, but it is good so far) to display some text (description) for the image. This description will be displayed from the image name, so if the image name is "01.jpg", the lightbox will display "01.jpg". Now you don't want ".jpg" to be displayed in the description. Ok, do the following:
- In the "plugin.php" file, go to line 56 with this code:
go to the end of the line and press enter to create another line just under it, and add this code:
Now "$f" will be added in another code later, but it means to display the name WITHOUT its extension.
Now go to line 60 (which was 58 in step 12) and replace it with this code:
you can see in the end of this code that title=\"$f\" is added to the end of the code. This code will display the file name as title (description) without the photo extension (.jpg).
That was all. Hope it is useful for you guys
After granting permission from Pablo, here is a tutorial on how you can make the CMS Photo Album plugin display images in a lightbox gallery.
First, you need to be familiar with CMS tools. Please read here: http://wysiwygwebbuilder.com/cms_tools.html
I am going to explain the process with "PrettyPhoto" lightbox. Am using this lightbox because it is the only lightbox that can reduce large images to fit the screen resolution.
Now let's start:
1. Make sure the database details are ready (database name, username, password and host).
2. Create a page and add the "CMS view" object and the "CMS menu" object and set their properties. Do not forget to set the page extension to php. Now, right-click on the page and choose "Page HTML". In "Between <head></head> tags" paste this code:
Code: Select all
<link rel="stylesheet" href="prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_PhotoGallery1']").prettyPhoto({theme:'facebook',social_tools:false});
});
</script>3. Create another page for the "CMS admin" object, set its properties and in the "Behavior" section, go to "Plugins" and choose "photoalbum". Do not forget to set the page extension to php.
4. Publish the files to the server. For demonstration purpose, create a folder called "galleryimages".
5. Add some photos to the folder "galleryimages".
6. Access the admin area and create a new page, enter the title, and just beside "General" tab above, click on the "Photo album" tab.
7. Enable the Photo Album plugin, and set the images folder to "./galleryimages/", then save it.
8. Now if you preview the page, when you click on an image you will see that the image is opened in a new window (tab) and placed on the top left corner. You don't want that, do you?!!
OK, now let's start the real work:
9. Go back to WWB and create a dummy page, place a "Photo gallery" object, add some photos, and in the "Behavior" section, choose "Gallery mode : Light Box Gallery", and "Type : prettyPhoto".
10. Publish this page ONLY to a folder on your hard drive. Open this folder, you will find a folder called "prettyPhoto", copy this folder and paste to where you published the CMS site to.
11. Now go the published files, you will find a folder called "plugins", then go to "photoalbum" folder and open "plugin.php" with any advanced text editor, I use Notepad++.
12. Go to line 58, it has this code:
Code: Select all
$link = "<a href=\"$photoalbum_images_folder$filename\" target=\"_blank\">";Code: Select all
$link = "<a href=\"$photoalbum_images_folder$filename\" rel=\"prettyPhoto_PhotoGallery1[PhotoGallery1]\">";Extras
1. If you add a portrait photo in a middle of landscapes ones, its thumbnail will not be as the same dimension as the landscape photos, so if you want to make them the same size, do the following:
- In the "plugin.php" file, go to line 70 with this code:
Code: Select all
$cms_content .= "<td align=\"center\" valign=\"bottom\">$link<img src=\"".$photoalbum_images_folder.$filename."\" alt=\"\" class=\"photoalbum_img\" style=\"width:".$thumbnail_width."px;height:".$thumbnail_height."px\"></a></td>\r\n";".$thumbnail_width." with 120
and
".$thumbnail_height." with 80
so the code will be:
Code: Select all
$cms_content .= "<td align=\"center\" valign=\"bottom\">$link<img src=\"".$photoalbum_images_folder.$filename."\" alt=\"\" class=\"photoalbum_img\" style=\"width:120px;height:80px\"></a></td>\r\n";- In the "plugin.php" file, go to line 56 with this code:
Code: Select all
}Code: Select all
$info = pathinfo($filename);
$f = basename($filename,'.'.$info['extension']);Now go to line 60 (which was 58 in step 12) and replace it with this code:
Code: Select all
$link = "<a href=\"$photoalbum_images_folder$filename\" rel=\"prettyPhoto_PhotoGallery1[PhotoGallery1]\" title=\"$f\">";That was all. Hope it is useful for you guys