Creating a Photo Gallery with ExpressionEngine 2

Exclusive offer: get 50% off this eBook here
Building Websites with ExpressionEngine 2

Building Websites with ExpressionEngine 2 — Save 50%

A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere

$26.99    $13.50
by Leonard Murphy | October 2010 | Content Management Web Development

Although ExpressionEngine 2 does not come with a built-in photo gallery module, it does have many features designed to make working with photos easier. In this article by Leonard Murphy, author of Building Websites with Expression Engine 2.X, you will create a photo gallery channel, use file manager to manage your photos, and use jQuery to display the photos on your website.

Although this article focuses on building a tool for Ed & Eg to share their personal photos, the techniques in this article will be useful in any situation where you want to display images—whether personal photos, a portfolio of your work or items for sale.

 

Building Websites with ExpressionEngine 2

Building Websites with ExpressionEngine 2

A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere

  • Learn all the key concepts and terminology of ExpressionEngine: channels, templates, snippets, and more
  • Use RSS to make your content available in news readers including Google Reader, Outlook, and Thunderbird
  • Manage your ExpressionEngine website, including backups, restores, and version updates
  • Written in an easy-to-follow step-by-step style, with plenty of examples and exercises
        Read more about this book      

(For more resources on ExpressionEngine, see here.)

Designing your photo gallery

There are many different ways you can approach creating a photo gallery in ExpressionEngine. At the most basic level, you have a choice between each channel entry containing only one photo (and a description) or each channel entry containing a set of photos. If you allow only one photo per entry, you can use categories to organize the photos into galleries (and you can even include the same photo in more than one gallery). If you allow multiple photos per channel entry, each entry represents a photo gallery by itself.

 

One way to accommodate multiple photos per entry is to create as many custom fields as the photos you think you will have in a gallery. For example, if you know each gallery will have a maximum of 20 photos, then you could create 20 custom fields for the photos and 20 custom fields for the descriptions. This solution works, but is not the most flexible (that is, to add 21 photos to a gallery, you would have to modify your custom fields and your templates).

An alternative approach to accommodate multiple photos per entry without creating an abundance of custom fields is to use a third party add-on such as Matrix by Pixel & Tonic (http://pixelandtonic.com/matrix). This add-on allows for tabular data in channel entries—you define the column headings (such as the photo and the description) and then add a row in the table for each photo. In each channel entry, you can create as many rows as you need. For example, you can create one entry with 12 photos and another entry with 25 photos.

Rather than creating lots of custom fields, or using a third party add-on, this article will show you a simple and elegant way to create a photo gallery using the one photo per entry design and then will use categories to organize the photos into galleries.

Before you create your photo gallery channel, you first need to define where your photos will be stored.

File manager

The file manager is where you can upload new photos or crop, resize, rotate, or delete the images you have already uploaded, all from within the ExpressionEngine control panel. For this photo gallery, you will create a new upload destination—this is the directory on your server where ExpressionEngine will store your photos.

  1. The first step in creating a new upload destination is to create the new directory on your server. Create a new directory called photos in /images. If you are following along on an actual web server, ensure that the new directory has 777 permissions (usually right-clicking on the directory in your FTP client will allow you to set permissions).

    If, instead of creating a new sub-directory inside the "/images" directory, you prefer to create a new top-level directory and you are using the ".htaccess" exclude method to remove the "index.php" from ExpressionEngine URLs, then be sure to add the new directory to your ".htaccess" file.

  2. Next, you need to tell ExpressionEngine where this directory is. Inside the control panel, select Content and then File Manager.
  3. On the left-hand side of the screen, you will see the directory or directories where you can currently upload files to (if any), along with the files currently in each directory. In the toolbar on the right-hand side, underneath File Tools, select Create New Upload Destination.

    Building Websites with Expression Engine 2

  4. Enter a descriptive name of Photo Gallery. The Server Path and URL may be pre-filled, however, you should make sure it points to the actual directory you just created (/images/photos). If you are following along in a localhost environment, the URL would be http://localhost/images/photos. Leave Allowed File Types as Images only.

    Building Websites with Expression Engine 2

  5. All the fields that begin with maximum can be left blank. These fields allow you to restrict the size, height, and width of photos. If you do enter values in here, and then later try to upload a file that exceeds these limits, you will see an error message such as The file you are attempting to upload is larger than the permitted size.
  6. Set the Image Properties, Image Pre Formatting, and Image Post Formatting to be blank. These fields allow you to enter code that appears inside, before, and after the img tag. However, you will format your img tag as needed inside your template.

    Building Websites with Expression Engine 2

  7. The File Properties, File Pre, and Post Formatting can be ignored for now as they only apply to non-image files that you upload (and you have specified that you are only allowing images in your photo gallery).
  8. If desired, you can allow certain member groups to upload files. The member groups you see listed (if any) will depend on the member groups you have. Set all the member groups to Yes except Members, which should be set as No.

    Building Websites with Expression Engine 2

  9. Click Submit and your new upload destination will be ready to go. Go back to the file manager and you can see the new photo gallery upload destination with no files.

    Building Websites with Expression Engine 2

Creating your photo gallery channel

Now that you have created a place to store your photos, you can create your photo gallery channel. You will follow the same basic steps—creating custom fields and categories, creating your channel, publishing some entries, and then building your templates.

Creating your custom fields

Since you are going to have one photo per channel entry, you have a lot of flexibility to create as many custom fields for each photo as you see fit—for example, you could have fields to capture the location of the photograph, the subject of the photo, the type of camera that was used, the name of the photographer, and so forth. However, to keep things simple, you will only create two custom fields right now—one for the photo itself and one for the description.

  1. From the main menu of the control panel, select Admin, Channel Administration, and then Custom Fields.
  2. Select Create a New Channel Field Group and call the new group photos. Click Submit.
  3. Next to the new group, select Add/Edit Custom Fields and then select Create a New Custom Field.
  4. The field type will be File. The field label will be Photo and the field name will be photos_photo (the first part representing the field group name). In the field instructions, indicate that photos in the photo gallery should be no more than 600x800 pixels (so that they fit on a typical computer screen without scrolling).

    You could also prevent photos that are bigger than 600x800 pixels from being uploaded by specifying the maximum width and height in the File Upload Preferences for the photo gallery upload destination. You have not done this here because it would prevent you from being able to upload a larger photo and then re-sizing it using file manager.

    Building Websites with Expression Engine 2

  5. The field should be required, but not searchable, and should be shown by default. The field display order should be 1 and the file type should be Image. Click Submit.
  6. Click Create a New Custom Field again. This time, the field type should be Textarea, the field label Caption, and the field name photos_caption. The field instructions can be left blank. Answer Yes to it being a required field, being searchable and being shown by default. The Field Display Order should be 2.
  7. The number of rows can be left as 6 and the default text formatting should be set to Auto <br /> (this will prevent unwanted whitespace in your captions due to extra paragraph tags being added, but will also allow multi-line captions). Say No to allowing an override on the Publish page. The text direction can also be left as left-to-right.
  8. Finally, say Yes to Formatting Buttons, Spellcheck, and Write mode. Say No to Smileys, Glossary, and the File Chooser. Click Submit to create the new field.

Now that you have your custom fields, you can define your categories.

Creating your categories

As discussed at the beginning of this article, you are going to use categories to distinguish between photo galleries. To start with, you are going to create two photo galleries—one for vacation photos and one for local photos. You can always come back and add more galleries later.

  1. Still in the control panel, select Admin, Channel Administration, and then Categories.
  2. Select Create a New Category Group and name it Photo Categories. Select Allow All HTML in the category field formatting and check the boxes to allow other member groups to edit (or delete) categories as appropriate. (If you see a message saying that there are no member groups allowed to edit/delete categories, this is fine too). Click Submit.

    Building Websites with Expression Engine 2

  3. Back on the Category Management screen, select Add/Edit Categories for the Photo Categories category group.
  4. Click Create a New Category. The first category will be called Local Photos. The Category URL will default to local_photos. Type in a category description (you will later display this on your website), leave the Category Image URL blank, leave the Category Parent as None, and click Submit.

    Building Websites with Expression Engine 2

  5. Select Create a New Category again. This time call the new category Vacation Photos, with a URL of vacation_photos. Type in a category description such as A selection of vacation photos taken by Ed & Eg. Leave the category image URL blank and the category parent as None. Click Submit.

    Building Websites with Expression Engine 2

Now that you have your category group and custom field group defined, you can go ahead and create your channel.

Creating your channel

The actual creating of your channel is very straightforward.

  1. Select Admin | Channel Administration | Channels.
  2. Select Create a New Channel. Call the new channel Photos with a short name of photos. Do not duplicate an existing channel's preferences. Select Yes to Edit Group Preferences and select Photo Categories for the category group, Statuses for the status group, and photos for the field group.

    Building Websites with Expression Engine 2

  3. Select No to creating new templates and then click Submit.

Your channel is created! Now you can start creating some content and displaying the photos on your website.

Uploading your first photos

There are three ways to upload photos to your website. Your first option is to go to File Manager (under the Content menu) and select File Upload on the right-hand toolbar. Alternatively, you can go to publish an entry in the Photos channel, click on Add File, and upload a file. Both of these options are convenient since they use the built-in ExpressionEngine file manager to upload your file—you never have to leave the control panel. However, you can only upload one photo at a time and you may run into issues if you try and upload very large photos (greater than 2 MB).

The third option for uploading photos is to do so directly, using FTP, just as you would upload any files to your website. Since this requires another tool, it is less convenient than uploading a single photo from within ExpressionEngine, but if you are uploading lots of photos, then using FTP is a lot faster to do. This is the method we will use here.

The built-in file manager also allows you to crop, resize, and rotate images (although you can take advantage of these tools even if you do not use file manager to upload the files).

  1. Download the example photos (local1.jpg through local8.jpg and vacation1.jpg through vacation8.jpg) from either the Packtpub support page at http://www.packtpub.com/support or from http://www.leonardmurphy.com/book2/chapter8. (Or you can substitute your own photos).
  2. Copy or FTP the photos into the /images/photos directory that you created earlier in the article.
  3. Back in the ExpressionEngine control panel, select Content | Publish and then select the Photos channel.
  4. Type in a title of Fireworks and a caption Fireworks exploding with a bang. Then select Add File.
  5. The first screen to appear in the Upload File screen. Since you have already uploaded the files, you can simply select the photo gallery option in the left-hand menu.

    If no photos appear under the photo gallery, or the files appear but no thumbnails appear, try logging out of the control panel and logging back in. (This helps to refresh ExpressionEngine so it recognizes the new files—the first time you access the files after uploading via FTP, ExpressionEngine has to create the thumbnails).

  6. Select local1.jpg.

    Building Websites with Expression Engine 2

  7. On the Categories tab, select Local Photos. Then click Submit.
  8. Now, repeat the same steps to create entries for the rest of the photos, using appropriate captions that describe the photos. Be sure to select a category for each photo. There are 16 example photos (eight local and eight vacation photos). Having several example photos in each category will demonstrate how the photo gallery works better.
Building Websites with ExpressionEngine 2 A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere
Published: September 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on ExpressionEngine, see here.)

Creating your templates

As with everything in ExpressionEngine, everything that appears on your website must be coded in a template. Your photo gallery is no exception.

You will now create new templates in a design very similar to the one used by the FAQs channel—a single-entry template called comment so that visitors can leave comments on individual images, and a multiple-entry page where visitors can browse and view images by category. You will start with the single-entry page.

Creating the single-entry page

The single-entry page is where an individual photograph is displayed, along with the caption and any comments. In this section, you will create a new template group called photos and then create a new template called comment (since the primary reason to visit the single-entry template will be to view and post comments).

  1. From the main menu, select Design, Templates, Edit, and then Create Group. Call this template group photos. Do not duplicate a group and do not make the index template in this group your homepage. Click Submit.
  2. Next, with the photos group highlighted on the left-hand side, select New Template. Call the template comment and leave the template type as Web Page. Since your single-entry page here will be very similar to the single-entry page you created for the FAQs channel, select Duplicate an existing template and then choose the faqs/browse template to duplicate. Click Create and Edit.

    Building Websites with Expression Engine 2

    The faqs/browse template to duplicate can be downloaded from http://www.packtpub.com/support or from the chapter 5 page at http://www.leonardmurphy.com/book2/chapter5.

  3. Whenever you copy a template, the first thing to update is the Preload Text Replacements at the top. Update them to the following:

    {preload_replace:my_channel="photos"}
    {preload_replace:my_template_group="photos"}
    {preload_replace:my_single_entry_template="comment"}

  4. Further down in the template, delete all the code between (but not including) the <h1>{title}</h1> and the {/exp:channel:entries}.
  5. Replace the deleted code with the following code to display your image and your image caption (centered), along with a link to your multiple-entry photos/index template (which is still blank):

    <br /
    <p class="center"><img class="limited"
    src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{photos_photo}"/>
    <br />
    <em>{photos_caption}</em></p>
    <p><a href={path={my_template_group}}
    title="Back to photos">Browse all photos</a></p>

    The limited class is defined in your site/site_css stylesheet as having the property max-width: 555px;. This value matches the width of the #content ID container. Although the channel field instructions ask that photos be no bigger than 600x800, they may still be too big to fit nicely into the #content area without overlapping the sidebar. The max-width property proportionality shrinks images if they are too big, but otherwise leaves the image alone.

  6. A lot further down, underneath the line {/exp:comment:form}, remove the Other Questions Like This section: everything from the < br /> to the {/exp:channel:entries} inclusive.
  7. Click Update and visit an example photo (such as http://localhost/photos/comment/fireworks).

If you uploaded photos with different titles, then remember that because this is a single-entry page, the last part of the URL (in this case, fireworks) is actually the URL Title from the entry to be displayed. You can replace this with the URL Title of another entry in your channel, and that entry will appear instead.
If something does not look right in your single-entry page page, compare your code with the final code for the template, downloadable at either http://www.packtpub.com/support or http://www.leonardmurphy.com/book2/chapter8

Building Websites with Expression Engine 2

Your single-entry page is complete! Go ahead and try adding comments if you like—both as a member and a visitor. Next up, you will create your multiple-entry page where visitors will be able to browse photos by category.

Creating the multiple-entry page

The multiple-entry page needs to attractively display a series of photos so that your visitors can quickly browse to the photos they are most interested in. A visitor browsing your photo gallery will likely spend a lot of time on this page.

Although you will use thumbnails to display the photos on your multiple-entry page, you do not have to force visitors to go to your single-entry page in order to view a larger image. Instead, you can use jQuery and the FancyBox plugin. When a visitor clicks on a photo, a full-size version will appear in a FancyBox overlay, complete with caption. Visitors will be able to quickly scroll through the larger images directly from the FancyBox plug-in. Underneath each thumbnail, a link can take visitors who wish to leave comments to the single-entry page where they can do so.

Rather than re-inventing the wheel, you can base the multiple-entry page template on the calendar/index template that you can download from http://www.packtpub.com/support or from http://www.leonardmurphy.com/book2/chapter7).

  1. In the ExpressionEngine control panel, copy the calendar/index template code and paste it into the photos/index template. You will see a message indicating that no closing tag was found for {exp:jquery. Ignore this message as this tag is one of those that do not require a closing tag.
  2. Update the Preload text replacement at the top to the following:

    {preload_replace:my_channel="photos"}

  3. Update the <title> to be Photo Galleries as follows:

    <title>Photo Galleries - Ed &amp; Eg Financial
    Advisors</title>

  4. The calendar/index template used its own stylesheet with extra calendar formatting—since you do not need to do this, change the stylesheet back to includes/site_css:

    <link href="{stylesheet=includes/site_css}"
    rel="stylesheet" type="text/css" media="screen" />

  5. Your calendar uses a pop-up class attribute to display links in a pop-up iFrame FancyBox. Since you will be displaying images rather than an entire page in this FancyBox, you can set different options. Specifically, you should remove the type of iFrame, display the caption inside the pop-up box (on the calendar you had it display outside so that it did not blend in with the iFrame content), and set cyclic to true—meaning that as someone cycles through the images, once they reach the end of the set, the images will loop back to the start. Finally, do not set any limitations on the width or height of the FancyBox—you can allow the pop-up to auto-size itself to the size of the image being displayed. To accomplish all this, replace everything currently between < script type="text/javascript"> and </script> with the following (leave the < script> tags as-is):

    $(document).ready(function() {
    $("a.gallery").fancybox({
    'cyclic': true,
    'titlePosition': 'inside',
    'overlayShow': true,
    'hideOnContentClick': true,
    'overlayOpacity': 0.7,
    'transitionIn': 'none',
    'transitionOut': 'none'
    });
    });

    For more information on FancyBox, including what the different options mean, you can visit http://fancybox.net/.

  6. Finally, remove all the code that appears between (and including) <h1>Seminar Calendar</h1> and {/exp:channel:calendar}. This is where your photo gallery thumbnails will eventually go. Click Update to save your work so far.

At this point, you have a blank page (with a relevant page title and a FancyBox script that is ready for you to start using). Now you can start adding content.

Adding content to your multiple-entry page

There are going to be two ways to browse your photos—visitors can either be on the main photos/index page, where they will see all your photos. Alternatively, they will be on a category-specific page, where they will only see photos that fall into that category. Just like you did with your faqs/index template, you are going to use conditional statements to distinguish between when a visitor is on a category browsing page versus when they are not. (Remember that a category browsing page will have the word category in segment 2 of the URL).

  1. Still in the photos/index template, add the following code after < div id="content">. If you are on a category browsing page, this code displays the category name, category description, and a link back to the non-category version of your multiple-entry template. If you are on the non-category browsing page, then it will display a generic title of photo galleries and some instructions on how to browse the photos.


    {if segment_2=="category"}
    {exp:channel:category_heading
    channel="{my_channel}"}
    <h1>{category_name}</h1>
    <p>
    {category_description}
    <br />
    <a href={path=photos} title="Back to
    photos">Browse all photos</a>
    </p>
    {/exp:channel:category_heading}
    {if:else}
    <h1>Photo Galleries</h1>
    <p><strong>Instructions</strong>: Select a
    gallery to view or click on a photo to see enlarged. When viewing
    in enlarged mode, use your left &amp; right arrow keys to scroll
    between photos and the escape key to exit enlarged mode.</p>
    {/if}

  2. Next, you can create a drop-down category selector to allow visitors to jump quickly to a given category. This code is adapted from the Channel Categories Tag documentation viewable at http://expressionengine.com/user_guide/modules/channel/categories.html#dropdown. It essentially uses a standard HTML drop-down form, populated with options from the channel categories tag that link to the photos/index template (though you only specify the template group photos, ExpressionEngine knows you mean photos/index because the index template is the default template). Add the following immediately after the previous code:

    <form name="catmenu" action="">
    <div>
    <select
    name="selcat"onchange="location=document.catmenu.selcat.options[do
    cument.catmenu.selcat.selectedIndex].value;">
    <option value="">--Select Gallery--</option>
    {exp:channel:categories channel="{my_channel}"
    style="linear"}
    <option
    value="{path='photos'}">{category_name}</option>
    {/exp:channel:categories}
    </select>
    </div>
    </form>

  3. Click Update and then visit your photo gallery (at http://localhost/photos). Verify that you can browse between categories and that when you are on a category page, you see the category information, and when you are not, you see the generic instructions. (JavaScript must be enabled in your browser for the drop-down menu to work).

    Building Websites with Expression Engine 2

  4. It makes sense to display the thumbnails in a table. Since every gallery could have a different number of thumbnails, it is impossible for you to know in advance how many rows your table might need. You will therefore use a suggestion from Mark Bowen in the ExpressionEngine wiki (http://expressionengine.com/wiki/Entries_In_Table/) to use the {switch} variable to insert a row break (</tr> <tr>) after every five photos. You will combine this with a conditional statement that checks to see if the current entry is the last entry, in order to prevent a superfluous row being added at the end of your table.

    Remember that the switch variable allows you to insert different code for different entries. Typically, it might be used to alternate the background color of entries (for example, {switch="blue|red"} would mean your first entry is blue, your second entry is red, and your third entry is blue again. The different pieces of code that are alternated are separated by a pipe (|). When there are more entries than pipes, ExpressionEngine starts again from the beginning. {switch="|||</tr><tr>"}| means that only on every fifth thumbnail will the row be ended and a new one started—there is no code between any of the other pipes.
    For more information on the switch parameter, please visit http://expressionengine.com/user_guide/modules/channel/variables.html#var_switch.

  5. Add the following code immediately after the </form>:

    <table>
    <tr>
    {exp:channel:entries channel="{my_channel}"}
    <td style="text-align: center; height:
    100px; width: 100px;">
    ***Image will go here***
    </td>
    {if
    count!=total_results}{switch="||||</tr><tr>"}{/if}
    {/exp:channel:entries}
    </tr>
    </table>

  6. If you visit your website now, you will see a table where your images will go as well as some placeholder text. If you browse between the different galleries, you will see a different number of table rows depending on the number of images that are in that category.

    Building Websites with Expression Engine 2

  7. The next step is to replace the placeholder text with actual thumbnails. When designing your custom fields, you did not include a field for a thumbnail. Whilst you could include the full-size image with a small width/height, your visitors would then have to download all the full-size images in order to see this page—significantly impacting page load times. Instead, you can use thumbnails that are automatically generated by ExpressionEngine.
  8. Whether you upload photos via FTP or via file manager, ExpressionEngine automatically creates thumbnails of any photos in a _thumbs subdirectory (/images/photos/_thumbs) when you first view them in file manager. These thumbnails are used internally by ExpressionEngine, but you can also use them on your visitor-facing pages. To do this, you will use the custom File field (photos_photo) as a tag pair instead of as a single tag. This allows you to access the different components of each file (the path, the filename, and the extension) in each entry separately. By doing this, you can then insert the _thumbs subdirectory to the end of the path, and prefix the filename with the thumbs_ prefix that is automatically added to the thumbnails.
  9. For more information about using the File custom field as a tag pair instead of as a single tag, please visit http://expressionengine.com/user_guide/modules/channel/custom_fields.html#file_fields

  10. Replace the ***Image will go here*** placeholder text with the following code:

    <a class="gallery" rel="group"
    href="{photos_photo}" title="{photos_caption}"><img
    src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{photos_photo}{path}_thumbs/thumb_{filename}.{extension}{/pho
    tos_photo}" alt="{caption}" /></a>

    If, after doing this, you have some thumbnails that are not showing up, you may need to log into ExpressionEngine, edit the entry in question, and re-add the photo using file manager. Make sure you can see the thumbnail in your entry before you submit it.

  11. Visit your website again, and you will see thumbnails instead of the placeholder text you had before. Additionally, if you click an image, it will pop up in a FancyBox lightbox, with the caption underneath. This is because you gave the link a class attribute of gallery (which matches the class attribute you used in your FancyBox script). You can scroll through the photos in the FancyBox by clicking the left and right arrows or by using your mouse scroll wheel—this is because all the photos on the page have the same rel attribute, letting FancyBox know this is an image gallery. FancyBox treats whatever is in the title attribute as a caption—in this case, you included the {photos_caption} caption.

    Building Websites with Expression Engine 2

    If your image does not appear in a pop-up overlay, but rather opens in a separate window or tab, you can check for a number of things. First, verify that the FancyBox directory is at the root of your website and that you can access the FancyBox files in your browser (if not, check your .htaccess file). Next, verify that the paths in the photos/index template point to the script/CSS files in the FancyBox directory and check the filenames for misspellings. Then, compare the photo/index template you have created with the photo/index template that is available for download from http://www.packtpub.com/support or http://www.leonardmurphy.com/book2/chapter8. Look carefully for any spelling mistakes or typos, especially in the code <head> and <script> sections, as well as in the <a> link code for the thumbnails. Finally, ensure that JavaScript is enabled on your browser.

  12. The final step is to include a link to your single-entry page for visitors who want to leave comments. This can be accomplished by using a hyperlink underneath each photo that will mention how many comments have already been made. Add the following code immediately before the </td> in your template:

    <br />
    <a
    href="{title_permalink=photos/comment}">{if comment_total=="1"}1
    comment{if:else}{comment_total} comments{/if}</a>

  13. Now visit your photo gallery page and you will find the new hyperlinks. Click on one to confirm that you are taken to the single-entry page. Add a comment and verify the total increments correctly.

If you have comment moderation turned on, you will have to mark the comments as open before they will be included in these counts (although if you are logged in as a Super Admin, you will be able to see the comments on the single-entry page). To mark a comment as open, select Recent Comments from the View section of the control panel home page, click on the comment you wish to open and then click View Comments. Here you can check all the comments you wish to open, and from the drop-down box, select Open Selected and click Submit.

Building Websites with Expression Engine 2

Your photo gallery is complete. You now have an easy way for visitors to browse your photos quickly, either from the main photos/index page or by gallery. It is also easy to see which photos already have comments and for visitors to add their own.

Building Websites with ExpressionEngine 2 A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere
Published: September 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on ExpressionEngine, see here.)

Image editing features

Now that you have gone through the process of creating a photo gallery, uploading images, and creating the corresponding templates, it is a good time to discuss how photos can be cropped, resized, and rotated all from within ExpressionEngine.

  1. From the Content menu in the control panel, select File Manager.
  2. If you have multiple upload destinations, it is good to know that if you click on the title of one (such as About), it will collapse the list of files. If you click again, the file list will expand. This can help reduce screen clutter.
  3. If you select a filename (such as local6.jpg), a FancyBox pop-up will appear with the full size image. (Press Escape or click the x in the top-right to close).
  4. For the photo local6.jpg, select Edit (in the fifth column from the left).
  5. At the top-right, there are three modes (Crop, Resize, and Rotate). Select Crop Mode.

    Building Websites with Expression Engine 2

  6. The picture on the left will darken. To crop the photo, you can drag the rectangle over the picture until the part of the picture you want is framed. The rectangle can be resized or repositioned as needed. On the right-hand side, you can see information about the width, height, and X/Y coordinates of your crop.

    Building Websites with Expression Engine 2

  7. Once the rectangle is placed, click Save Image on the right-hand side to save your changes.
  8. You can also resize the photo by clicking on the Resize option. In this case, setting a width will automatically adjust the height so the photo stays in proportion (and setting the height will automatically change the width). This feature is extremely useful if you want to upload a full-sized image, but then manually adjust it so the width is no more than a certain size (for example).

    When you upload a photo for the first time from the Publish page, you also have the option to resize an image. In this way, you can upload full-size images directly, and resize them on the fly in ExpressionEngine, rather than shrinking them in advance or uploading them and coming into the file manager to resize them.

Rotate mode is also fairly self-explanatory. However, be aware that selecting a different rotation (or flipping the image horizontally or vertically) automatically saves the image.

Photo gallery add-ons

In this article, you have walked through how to build a photo gallery in ExpressionEngine without using any third party add-ons. As you can see, the functionality in ExpressionEngine is very robust and flexible out of the box.

That said, there are times when an add-on can be useful—especially if images are a large part of the content of your website. Pixel & Tonic's Matrix was already mentioned at the beginning of the article as a useful add-on for designing a photo gallery with multiple photos per channel entry. In addition, the following add-ons are specific to editing photos (though they are by no means representative of all the add-ons that are available).

Image sizer

http://devot-ee.com/add-ons/image-sizer/

Written by David Rencher, this plugin takes a large image, dynamically resizes it, and caches the resized image (to reduce page load times). Using this add-on in your template saves you from having to manually resize every image you upload (and eliminates the risk of breaking your page layout if you forget). Instead, images are resized on the fly.

Channel Images

http://devot-ee.com/add-ons/channel-images/

For a small fee, Channel Images by DevDemon allows you to batch-upload multiple files from within the ExpressionEngine control panel and simplifies image management on the Publish page.

Challenges

These challenges are designed to stretch your knowledge and get you to work hands-on with ExpressionEngine. The answers will not necessarily be found within the article, but with the knowledge gained from the article, plus the ExpressionEngine documentation, you should have all the tools you need at your disposal to figure them out.

Since the photo gallery uses the same tools as all the other sections of your website, these exercises are not so much specific to photo galleries, but are a good reminder of the techniques learnt.

  1. The main page of the photo gallery works great when there are only a handful of photos. However, over time, you could end up with hundreds and hundreds of photos in your channel, all of which would get displayed on your main page. Change the main page so that it limits the number of photos that are displayed and randomizes which photos are shown.
  2. ExpressionEngine has the ability to track how many times a channel entry has been viewed on a single-entry page (Entry Views). Using a conditional statement, indicate on your multiple-entry template which photos are ***popular*** photos, based on the number of single-entry page views. For now, consider more than ten single-entry page views to be the sign of a popular photo.
  3. The form for submitting comments and the code for displaying comments on your single-entry page are almost identical to the form for submitting comments and the code for displaying comments on your FAQs channel. In the spirit of reducing repetition, choose between a Preload Text Replacement, a Global Variable, a Snippet, or an Embedded Template and extract the code from both photos/comment and faqs/browse, so that both templates use the same code for submitting and displaying comments.

Summary

In this article, you took a look at how to adapt the channel functionality of ExpressionEngine to a photo gallery. The lack of a formal photo-gallery module can make ExpressionEngine seem less functional. However, as you can quite clearly see, the standard channel functionality is more than adequate for the task, and indeed allows for a lot more flexibility than a separate photo gallery module might offer—with unlimited custom fields, a multitude of ways that you can organize photos within your channel (using categories and/or status groups), and with no restriction on how you can build your templates, the sky is the limit. By now, you should be fairly comfortable with the basics of ExpressionEngine—channels, templates, tags, custom fields, categories, status groups, and so on.


Further resources on this subject:


About the Author :


Leonard Murphy

Leonard Murphy was one of the earliest adopters of ExpressionEngine when it was first released in 2004, and was the author of a series of free tutorials that helped other new users to see what ExpressionEngine had to offer. The tutorials were a hit, and over the years, ExpressionEngine became more and more popular, so in 2008 Leonard expanded his tutorials into the first edition of Building Websites with ExpressionEngine. Two years later, with the release of ExpressionEngine 2, Leonard is back with a completely revised new edition.

Leonard started his career in the UK, graduating from the University of Wales, Aberystwyth. In 2004, he moved to the United States and currently works for Summit Credit Union (a not-for-profit financial institution headquartered in Madison, Wisconsin). He also provides consulting and technical support for small business websites.

Books From Packt


jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Object-Oriented Programming in ColdFusion
Object-Oriented Programming in ColdFusion

High Availability MySQL Cookbook
High Availability MySQL Cookbook

Drupal 7
Drupal 7

ColdFusion 9 Developer Tutorial
ColdFusion 9 Developer Tutorial

CMS Design Using PHP and jQuery
CMS Design Using PHP and jQuery

PHP 5 E-commerce Development
PHP 5 E-commerce Development

Joomla! 1.5 Top Extensions Cookbook
Joomla! 1.5 Top Extensions Cookbook


Your rating: None Average: 5 (1 vote)
Final step not working! by
Hello, Fantastic tutorial. The only problem I'm having is getting the thumbnails and captions to populate in the gallery view. Have you ran into this? I tried your suggestions but no luck. If you have and ideas, I am open to hear them :) aparroccini@gmail.com

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
3
S
A
Z
V
8
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software