Boost:Photo Gallery Module

From Metro Studios Knowledgebase

Jump to: navigation, search

Contents

[edit] Back-end Development

Here are the sql CREATE statements for the tables required by boost photo gallery:

CREATE TABLE `tbl_gallery` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(255) NOT NULL default '',
  `description` text,
  `url` varchar(255) NOT NULL default '',
  `created_at` datetime NOT NULL default '0000-00-00 00:00:00',
  `updated_at` datetime NOT NULL default '0000-00-00 00:00:00',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
 
 
CREATE TABLE `tbl_gallery_image` (
  `id` int(11) NOT NULL auto_increment,
  `gallery_id` int(11) NOT NULL,
  `filename` varchar(255) NOT NULL,
  `filename_tn` varchar(255) NOT NULL,
  `is_main` tinyint(4) NOT NULL,
  `caption` text,
  `sort` int(11) NOT NULL,
  `updated_at` datetime NOT NULL,
  `created_at` datetime NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=30 DEFAULT CHARSET=utf8;

Extract/Merge the following resources in your site's root directory: Media:Photo-gallery.zip

Now all you've got left is to create the front-end page for the gallery.

[edit] Front-end Development

[edit] Boost Admin Setup

Now that the Database has been created within the site and you have extracted/merged the zip file, we need to set up the Admin section to handle this new Gallery Function. Start by navigating through the site files to :

/_boost/site/admin/includes/

and edit the file within called:

global-menu.php

Within this file, you will need to add another list item to the navigation bar such as:

            <li>
                <a>Photo Galleries</a>
                <ul>
                    <li><a href="index.php?v=manage&m=_Gallery" class="dialog">Update</a></li>            
                    <li><a href="index.php?v=create&m=_Gallery" class="dialog">Create</a></li>
                </ul>
            </li>

Note: _Gallery is the name of the Boost Model we created for this Photo Gallery

After you save and push these changes through Git, there will be a new tab in the Boost Admin section with this information you entered here.
Note: If you are developing this locally, you do not need to push through Git to view these changes. To pull a site down and work locally, refer to Local Development

[edit] Create Gallery Page

Now that the Database and Admin sections are ready to go, we need to start setting up the page the Gallery will be on. Start by extracting/merging Media:Front-end.zip within the site files. Once this has been completed, we need to start setting the page up. Create a directory that this Gallery will be located. Such as:

/before-and-after

There are a couple of different paths you can take here:

  1. You can copy an index.php file from another directory and paste it into your new directory so you will have all the include files you need (i.e. Header, Navigation, Footer) or
  2. You can create the page from scratch making sure to include all necessary CSS and Javascript and php files.

Option 1 is much less time consuming and easier.
Now that you have a template page, paste:

<?php 
    require_once('bootstrap.php');
    $galleries = bstModel::all(_Gallery::MODEL);    		            		                   
?>

at the very top of the page (Even before the <head> is declared).
Paste this code within the <head> tag before the <body> tag is declared:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/js/thirdparty/tn3/skins/tn3a/tn3a.css"></link>
<script type="text/javascript" src="/js/jquery-ui-1.8.13.custom.min.js"></script>
<!-- include tn3 plugin -->
<script type="text/javascript" src="/js/thirdparty/tn3/js/jquery.tn3.min.js"></script>
 
 
<!--  initialize the TN3 when the DOM is ready -->
<script type="text/javascript">
	$(document).ready(function() {
		var tn1 = $('.mygallery').tn3({
			startWithAlbums:true,
		    skinDir:"/js/thirdparty/tn3/skins",
			skin:"tn3a",
		    imageClick:"fullscreen",
		    image:{
			maxZoom:1.5,
			crop:true,
			clickEvent:"dblclick",
			transitions:[{
			    type: "fade",
			    easing: "easeInSine",
			    duration: 1000
			}]
		    },
		    thumbnailer: {
			overMove: true,
			speed: 3
		    }
 
		});
	});
</script>

Double check to make sure that all directories/files being referenced in this code exist. If the files do not exist in the location specified, change the links as needed

If you chose Option 1 above, remove the old code within the

<div id="content">

and paste

<div class="mygallery">
        <?php 
        if ((count($galleries) != 0)):
            foreach ($galleries as $gallery): 
                $main_img = $gallery->findMainImage();
                $images = $gallery->allImages();
        ?>
	            <div class="tn3 album">
	                <h4><?php echo $gallery->title; ?></h4>
	                <div class="tn3 description"><?php echo $gallery->description; ?></div>
	                <div class="tn3 thumb">/files/images/galleries/<?php echo $main_img->filename_tn; ?></div>
	                <ol>
                    <?php
                        foreach ($images as $image):                   
                    ?>
		                <li>
		                    <h4><?php echo $gallery->title; ?></h4>
		                    <div class="tn3 description"><?php echo $image->caption; ?></div>
 
		                    <a href="/files/images/galleries/<?php echo $image->filename; ?>">
			                <img src="/files/images/galleries/<?php echo $image->filename_tn; ?>" />
		                    </a>
		                </li>
                    <?php endforeach; ?>
	            </ol>
	    </div>
        <?php endforeach; ?> 
        <?php endif; ?>
           </div>

into the content div tag.
At this point, the Gallery is nearly finished. You may need to add in some custom formatting to keep the page consistent with the rest of the site (i.e. Headings, Breadcrumbs)

[edit] Modify CSS to fit Gallery to Page

If the gallery fits nicely on the page as is, then you can completely skip this section.

If the Gallery does not fit nicely with the style of the page, you will need to navigate to:

/js/thirdparty/tn3/skins/tn3a/

and open/edit

tn3a.css

This file and location can vary depending on what skin you are using (we are using tn3a here)

Within this CSS file, you will need to make some adjustments to the dimensions of the various elements of the Gallery. One easy way you can find the current dimensions through the browser is to "Inspect Element". To enter this view, press F12 (this works in Chrome, Firefox, IE) and look at the various styling elements on this page. This part can vary greatly per site, so giving exact instructions is virtually impossible as almost every site is different from one another. Some experimentation may be required to get the gallery to look the way you want it to.


The most important thing to remember as you are changing dimensions of the Gallery: Maintain Aspect Ratio. If you do not do this, the images will look distorted. If you do not know how to figure out what the dimensions should be given either a width or height dimension refer to an Aspect Ratio Calculator.

Once you have the Gallery styled like you want it, we can move on to the final steps of this process.

[edit] Final Steps

There are only a few things you have to check before this is pushed onto the live site. First, go to the root of the site files and open/edit

.gitignore

Within this file, add an entry called

files/

if it is not already there. This entry will stop Git from pushing/pulling this entire directory along with its sub-directories being that this directory can be modified without using Git.

Next, we need to add a directory to the server to handle the images. Being that we Git Ignored the files/ directory, we will need to manually add these directories and contents via FTP:

files/temp/
files/images/galleries/

Once these directories have been added to the server, open up an SSH connection (using putty for instance) with the server this site is located on. Navigate to the root of the site files. i.e.

cd /var/www/vhosts/DOMAIN/httpdocs

Once you are in here we will need to grant all permissions to the files/ directory so it can be externally modified. Being that your account probably does not have root access, you will need to log in as root by typing:

su

then copy/paste the root password contained within KeePass for the server your are working on (i.e. web4). Once you are logged in as root, you simply need to type the command:

chmod -R 777 files/

Test this functionality to make sure everything works!
After testing is complete, the last thing you need to do is push the files via Git onto the server.
This concludes this tutorial.

[edit] Examples

http://overheadcric.com/before-and-after/
http://www.crdrhomes.com/gallery/new-index.php
Any of the photo galleries on http://bureshconstruction.com

Personal tools
Namespaces
Variants
Actions
Wiki Navigation
Knowledgebase
Toolbox