ExpressionEngine: Creating a Photo Gallery

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

Building Websites with ExpressionEngine 1.6 — Save 50%

A clear, concise, and practical guide to creating a professional ExpressionEngine website

$23.99    $12.00
by Leonard Murphy | September 2008 | MySQL Content Management PHP

ExpressionEngine comes with a built-in photo gallery module included as part of the purchase fee. With the prevalence of digital cameras, having a place to upload and share photos on your website is a great feature of ExpressionEngine. In this article by Leonard Murphy we will:

  • Install the photo gallery module
  • Design our photo gallery to fit in with the design of the rest of our site
  • Make it easy to upload new photos, add comments and descriptions, and otherwise create a very functional gallery

On our website, we can have multiple photo galleries independent of each other (the photos are in a different folder; the gallery has a different URL) or we can have one gallery for all our photos, using categories to distinguish groups of related photos.
For the purposes of this article we are going to create only one photo gallery, but if desired the same principles can be followed again to create multiple galleries.
To keep our photo gallery visually interesting, we will be straying just slightly from our toast website theme, and will not be using our photo gallery to display slices of toast.
Let's get started!

Install the Photo Gallery Module

The photo gallery in ExpressionEngine is considered a separate module, even though it is included with every personal or commercial ExpressionEngine license. Installing it is therefore very simple:

  1. Log into the control panel using http://localhost/admin.php or http://www.example.com/admin.php, and select Modules from the top of the screen.
  2. About a quarter of the way down the page, we can see the Photo Gallery module. In the far-right column is a link to install it. Click Install.

ExpressionEngine: Creating a Photo Gallery

We will see a message at the top of the screen indicating that the photo gallery module was installed. That's it!

Setting Up Our Photo Gallery

Now that we have installed the photo gallery module, we need to define some basic settings and then create categories that we can use to organize our photos.

Define the Basic Settings

  1. Still in the Modules tab, the photo gallery module should now have become a clickable link. Click on the Photo Gallery.
  2. ExpressionEngine: Creating a Photo Gallery

  3. We are presented with a message that says There are no image galleries. Select to Create a New Gallery.
  4. ExpressionEngine: Creating a Photo Gallery

  5. We are now prompted for our Image Folder Name. For our photo galleries, we are going to create a folder for our photos inside the images folder that should already exist. Navigate to C:xampphtdocsimages (or /Applications/MAMP/htdocs/images if using MAMP on a Mac) or to the images folder on your web server, and create a new folder called photos.
  6. Inside that folder, we are going to create a specific subfolder for our toast gallery images. (This will keep our article photos separate from any other galleries we may wish to create). Call the new folder toast.
  7. If doing this on a web server, set the permissions of the toast folder to 777 (read, write, and execute for owner, group, and public). This will allow everyone to upload images to this folder.
  8. Back in ExpressionEngine, type in the name of the folder we just created (toast) and hit Submit.
  9. ExpressionEngine: Creating a Photo Gallery

  10. We are now prompted to name our template gallery. We will use the imaginative name of toastgallery so that it is distinguishable from any other galleries we may create in the future. This name is what will be used as the default URL to the gallery and will be used as the template group name for our gallery templates. Hit Submit.
  11. ExpressionEngine: Creating a Photo Gallery

  12. We are now prompted to update the preferences for our new gallery. Expand the General Configuration option and define a Photo Gallery Name and Short Name. We are going to use Toast Photos as a Photo Gallery Name and toastphotos as a Short Name. The short name is what will be used in our templates to reference this photo gallery
  13. ExpressionEngine: Creating a Photo Gallery

  14. Next, expand the Image Paths section. Here the Image Folder Name should be the same name as the folder we created earlier (in our case toast). For XAMPP users, the Server Path to Image Directory is going to be C:/xampp/htdocs/images/photos/toast, and the Full URL to Image Directory is going to be http://localhost/images/photos/toast. For MAMP users on a Mac or when using a web server, these paths are going to be different depending on your setup. Verify these settings for correctness, making adjustments as necessary.
  15. ExpressionEngine: Creating a Photo Gallery

  16. Whenever we upload an image into the image gallery, ExpressionEngine creates three copies of the image—a medium-sized and a thumbnail-sized version of the image, in addition to the original image. The thumbnail image is fairly small, so we are going to double the size of the thumbnail image. Expand the Thumbnail Resizing Preferences section, and instead of a Thumbnail Width of 100, choose a width of 200. Check the box (the one outside of the text box) and the height should update to 150.
  17. ExpressionEngine: Creating a Photo Gallery

  18. Hit Submit to save the settings so far. We will review the rest of the settings later.

We have now created our first gallery. However, before we can start uploading photos, we need to create some categories.

Create Categories

For the purposes of our toast website, we are going to create categories based on the seasons: spring, summer, autumn, and winter. We are going to have separate subfolders for each of the categories; these are created automatically when we create the categories.

  1. To do this, first select Categories from the new menu that has appeared across the top of the screen. We will see a message that says No categories exist. Select Add a New Category.
  2. We are going to use a Category Name of Spring and a Description that describes the category—we will later display this description on our site. We are going to create a Category Folder of spring. Leave the Category Parent as None, and hit Submit.
  3. ExpressionEngine: Creating a Photo Gallery

  4. Select Add a New Category, and continue to add three more categories: summer, autumn, and winter in the same way.
  5. ExpressionEngine: Creating a Photo Gallery

  6. After we a re done with creating all the categories, use the up and down arrows to order the categories correctly. In our case, we need to move Autumn down so that it appears after Summer.
  7. ExpressionEngine: Creating a Photo Gallery

We now have the beginnings of a photo gallery. Next, we will upload our first photos so that we can see how the gallery works.

Upload Our First Photos

To upload a photo to a photo gallery is pretty straightforward. The example photos we are working with can be downloaded from the Packtpub support page at http://www.packtpub.com/files/code/3797_Graphics.zip.

  1. To upload a photo, select New Entry from the menu within the photo gallery module.
  2. For the File Name, click the Browse...> button and browse to the photo spring1.jpg. We are going to give this an Entry Title of Spring Flower. For Date, we could either leave it as a default or enter the date that the photo was taken on. We are going to use a date of 2006-04-22. Click on the calendar icon to expand the view to include a calendar that can be easily navigated.
  3. ExpressionEngine: Creating a Photo Gallery

  4. We are going to use a Category of Spring and a Status of Open. Leave the box checked to Allow Comments, and write a Caption that describes the photo. The Views allows us to indicate how many times this image has been viewed—in this case we are going to leave it at 0. Hit Submit New Entry when everything is done.
  5. ExpressionEngine: Creating a Photo Gallery

  6. We are presented with a message that reads Your file has been successfully submitted, and the image now appears underneath the entry information.
  7. In the folder where our image is uploaded, three versions of the same image are made. There is the original file (spring1.jpg), a thumbnail of the original file (spring1_thumb.jpg), and a medium-sized version of the original file (spring1_medium.jpg).

  8. Now, click on New Entry and repeat the same steps to upload the rest of the photos, using appropriate categories and descriptions that describe the photos. There are four example photos for each season (for example, winter1.jpg, winter2.jpg, winter3.jpg, and winter4.jpg). Having a few example photos in each category will better demonstrate how the photo gallery works.

Building Websites with ExpressionEngine 1.6 A clear, concise, and practical guide to creating a professional ExpressionEngine website
Published: July 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

View Our Photo Gallery

Now we've created our photo gallery and uploaded some photos. We have not yet done any customization, but ExpressionEngine creates a default photo gallery right out of the box.

  1. Visit http://localhost/toastgallery (or http://www.example.com/toastgallery), or click the link Visit Gallery at the top-right of the Gallery module menu. We are brought to a category navigation screen where we can select which category we wish to view. At the bottom of the screen are two selections of photos: one set of four random images and one set of the last four images uploaded.
  2. ExpressionEngine: Creating a Photo Gallery

  3. Click on one of the photos at the bottom and a new tab or window is opened with a medium-sized version of the image.
  4. ExpressionEngine: Creating a Photo Gallery

  5. Select Close Window. Now select one of the categories (for example, Summer) by clicking on the category name in the left-hand column of the table. The next page that loads shows all the images in the category. At the top-left are the breadcrumbs that will allow you to return to the previous page, and at the top-right is a drop-down menu to jump to any other category.
  6. ExpressionEngine: Creating a Photo Gallery

  7. Click on one of the images and a new screen is displayed showing the full-sized image. At the top-left are the breadcrumbs, allowing us to jump back to either the main gallery page or the category page. At the top right, we can go to the next image or the previous image directly. Underneath the image, we can see how many times the image has been viewed, and underneath the blue box is the image description that we gave when we uploaded the image.
  8. ExpressionEngine: Creating a Photo Gallery

  9. Click on the sentence No comments have been submitted yet and a new window opens where we can submit comments, similar to the comments on our weblog entries.

This all looks very exciting. However, the image gallery looks nothing like our existing website design. Let us change that now.

Changing the Design of Our Photo Gallery

As with everything in ExpressionEngine, what we are seeing when we visit our photo gallery is powered by templates. The only difference is that these templates were auto-generated when we created the photo gallery, whereas in the previous chapters we were the ones creating the templates from scratch.

This does make it more complicated to fit the gallery into our existing website design. To make it easier, rather than trying to retrofit the automatically generated templates to the outline of our other pages, we will create new templates starting from our normal page outline and gradually add in the gallery features from the auto-generated templates.

Create the Single-Entry Page Layout

The single-entry page is where an individual photograph is displayed, along with the caption and any comments. In the auto-generated templates, there are two single-entry pages: http://localhost/toastgallery/image_med (or http://www.example.com/toastgallery/image_med) and http://localhost/toastgallery/image_full. One displays medium-sized images and the other displays full-sized images.

For our gallery, we are going to create only one single-entry page. This page will have a medium-sized version of our image, along with the caption and any comments. There will be links to the next and the previous photograph in the category. If a visitor wishes to see the full-sized original image (which could often be larger than our site design will accommodate), we will make the medium-sized image clickable and it will open the image file directly.

Create Our Template Outline

The first step will be to create new templates. The auto-generated templates were created in the toastgallery template group. We will continue to work in this template group, but will not use the existing templates. (Later we can either delete or rename these templates so that they cannot be accidentally discovered by visitors.)

  1. In the ExpressionEngine control panel, click on Templates. Then select the toastgallery template group and New Template. Create a new template called photo. Leave the Template Type as Web Page and the Default Template Data as None. Click Submit.
  2. ExpressionEngine: Creating a Photo Gallery

  3. Open the toastgallery/photo template and type the following (adapted from our calendar/index template). We have changed the variables to reflect the photo gallery, but otherwise the page will be a blank version of other pages on our website.
  4. {assign_variable:gallery_name="toastphotos"} 
    {assign_variable:my_template_group="toastgallery"}
    {assign_variable:my_site_wide_templates="toast"}
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Toast for Sale: Toast Gallery</title>
    <link rel='stylesheet' type='text/css' media='all' href=
    '{path={my_site_wide_templates}/toast_css}' />
    <style type='text/css' media='screen'>@import "{path=
    {my_site_wide_templates}/toast_css}";</style>
    <meta http-equiv="content-type" content="text/html;
    charset=UTF-8" />
    </head>
    <body>
    <div id="header">
    <h1>Toast for Sale!</h1>
    </div>
    <div id="content">
    </div>
    <div id="menu">
    {embed={my_site_wide_templates}/.menu}
    </div>
    </body>
    </html>
  5. To view our progress, we will need to get the ID number of a specific photo. If you browse to http://localhost/toastgallery (or http://www.example.com/toastgallery) and drill-down into an actual image, part of the URL will be either image_med or image_full (for example, http://localhost/toastgallery/image_med/38, where 38 is the image ID). Replace the word image_med or image_full with photo and we should see our existing template (for example, http://localhost/toastgallery/photo/38 or http://www.example.com/toastgallery/photo/38).
  6. ExpressionEngine: Creating a Photo Gallery

Create the Headings in Our Template

Now that we have created the outline of our template, let us put in headings that pertain to the actual image we are using. This will be our introduction to the exp: gallery:entries tag that we will be using throughout our photo gallery templates to power our photo gallery.

  1. Next, add the following line after our h1 heading to create a subheading. We want the subheading to be the title of the photograph being displayed, so we use the exp:gallery:entries tag to accomplish this. This tag looks at the photo ID in the URL of the page to determine which photograph we are viewing, and then provides access to a range of variables about that photo (such as the title, the caption, the number of views). At this time, we are only interested in the title of the image.
  2. Note also that log_views is set to off. ExpressionEngine keeps track of how many times an image has been viewed, so we can see how popular different images are. This tracking is done through the exp: gallery:entries tag. Each time an image is called through this tag, ExpressionEngine increments the counter. However as this line is not displaying the image itself (it displays only the title of the image), we do not want to increment the number of views, so we set the log_views to be off.

    <div id="header"> 
    <h1>Toast for Sale!</h1>
    <h2>{exp:gallery:entries gallery="{gallery_name}" log_views=
    "off"}{title}{/exp:gallery:entries}</h2>
    </div>
  3. We will use the same technique in the title of the page, except this time we will display both the title of the image and the category that the image falls under (for example, Summer - Sunrise).
  4. <title>Toast for Sale: Toast Gallery - {exp:gallery:entries 
    gallery="{gallery_name}" log_views="off"}{category} - {title}
    {/exp:gallery:entries}</title>
    <link rel='stylesheet' type='text/css' media='all' href=
    '{path={my_site_wide_templates}/toast_css}' />

    ExpressionEngine: Creating a Photo Gallery

  5. Next, using the same technique, we are going to create an h3 subheading on the page that will show the category and the image name. Add the following code inside the
    section:
  6. <div id="content"> 
    <h3>Toast Gallery&nbsp;<b>&#8250;</b>&nbsp;{exp:gallery:entries
    gallery="{gallery_name}" limit="1" log_views="off"}{category}
    &nbsp;<b>&#8250;</b>&nbsp;{title}{/exp:gallery:entries}</h3>
    </div>

    ExpressionEngine: Creating a Photo Gallery

Display Our Photograph

Now that we have our headings refl ecting the image we are viewing, the logical next step is to also display the image.

  1. After the h3 heading, add the following code. Once again we are using the exp:gallery:entries tag to call the image, though this time we are not using log_views="off" because we do want to count this as viewing the image. We use a couple of variables in our image tag: {medium_url} corresponds to the URL of the medium-sized photo, which is what we display on this page. The tag {image_url} corresponds to the original-sized photo, which we link to directly rather than trying to fit onto this page.
  2. <div id="content"> 
    <h3>Toast Gallery&nbsp;<b>&#8250;</b>&nbsp;{exp:gallery:entries
    gallery="{gallery_name}" limit="1" log_views="off"}{category}
    &nbsp;<b>&#8250;</b>&nbsp;{title}{/exp:gallery:entries}</h3>
    {exp:gallery:entries gallery="{gallery_name}"}
    <div align="center">
    <a href="{image_url}"><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{medium_url}" border="0"
    title="{title}" /></a>
    </div>
    {/exp:gallery:entries}
    </div>
  3. If we view the template in a browser (be sure the URL ends with a photo ID), we will see something akin to the following. Clicking on the image opens the original image directly.
  4. ExpressionEngine: Creating a Photo Gallery

  5. Next, underneath the image we will add the previous and next links. This will allow a visitor to navigate through all the pictures in a given category, without having to constantly return to a page of thumbnails in order to select the next photo. We will use the footnote style that we defined when we were first designing our site to display the links. The codes ‹ and › are the codes that used to render the arrows, and   is the code for a space. ExpressionEngine automatically calculates the next image in a category when we use the exp:gallery:next_entry and exp:gallery: prev_entry tags in combination with hyperlinks that specify which template to use to display the next or previous entry (in our case the toastgallery/photo template).
  6. <div align="center"> 
    <a href="{image_url}"><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{medium_url}" border="0"
    title="{title}" /></a>
    <br />
    <span font-weight="bold" class="footnote">{exp:gallery:
    prev_entry gallery="{gallery_name}"}<a
    href="{path=toastgallery/photo}">&#8249; Previous Image</a>
    &nbsp;&nbsp;{/exp:gallery:prev_entry}{exp:gallery:next_entry
    gallery="{gallery_name}"}&nbsp;&nbsp;<a
    href="{path=toastgallery/photo}">Next Image &#8250;</a>{/exp:
    gallery:next_entry}</span>
    </div>

    ExpressionEngine: Creating a Photo Gallery

    Display Information About Our Photograph

    Now that we have a page that shows the name of the photograph, the photograph itself, and allows us to circle through all our photographs, we still might have other information to display about our photo. In our case, we are going to display the photograph caption (which is where we can include a longer description of the photograph), as well as the number of times the photograph has been viewed.

    All of this can be accomplished through the use of standard ExpressionEngine tags within the exp:gallery:entries tag. Full documentation of what is available can be found at http://expressionengine.com/docs/modules/gallery/variables.html.

    1. Underneath our photograph, we are going to use a contentinner box (a style that we have defined and used on other pages of our site) to place the caption. Add the following code underneath the <div align="center"> code.
    2. <span font-weight="bold" class="footnote">{exp:gallery: 
      prev_entry gallery="{gallery_name}"}<a
      href="{path=toastgallery/photo}">&#8249; Previous Image</
      a>&nbsp;&nbsp;{/exp:gallery:prev_entry}{exp:gallery:next_entry
      gallery="{gallery_name}"}&nbsp;&nbsp;<a
      href="{path=toastgallery/photo}">Next Image &#8250;</a>{/exp:
      gallery:next_entry}</span>
      </div>
      <br />
      <div class="contentinner">
      {caption}
      </div>
      {/exp:gallery:entries}

      ExpressionEngine: Creating a Photo Gallery

    3. Next, we will display the number of times that the image has been viewed. Given that this information is largely irrelevant to the enjoyment of the image, we will use the footnote style for this. We use the conditional statement {if views == 1} so that the word 'time' is correctly pluralized.
    4. <div class="contentinner"> 
      {caption}
      </div>
      <p class="footnote">This image has been viewed {views} {if views
      == 1}time{/if}{if views != 1}times{/if}. Click on the image to
      view the full-size.</p>
      {/exp:gallery:entries}

      ExpressionEngine: Creating a Photo Gallery

    Display Comments on Our Photograph

    In the default ExpressionEngine templates, comments were on a separate page from where the image was housed. For our purposes, we are going to display comments underneath the image. The exp:gallery:comments tag is used to accept and display comments about our image, and more information can be found at http://expressionengine.com/docs/modules/gallery/comments.html.

    1. Add the following code after the caption code and before the closing exp: gallery:entries tag in the last example. We use the total_comments tag to determine whether there are any comments. If there are none, we simply say that in another contentinner box. If there are comments, we display them in a contentinner box.
    2. <p class="footnote">This image has been viewed {views} {if views 
      == 1}time{/if}{if views != 1}times{/if}. Click on the image to
      view the full-size.</p>
      {if allow_comments}
      <h3>Comments ({total_comments})</h3>
      {if total_comments==0}
      <div class="contentinner">
      No comments have been submitted yet
      </div>
      {/if}
      {if total_comments > 0}
      {exp:gallery:comments}
      <div class="contentinner">
      {comment}
      </div>
      <p class="footnote">Posted by {name} on {comment_date
      format='%m/%d'} at {comment_date format='%h:%i %A'}</p>
      {/exp:gallery:comments}
      {/if}
      {/if}
      {/exp:gallery:entries}

      ExpressionEngine: Creating a Photo Gallery

    3. We also want to add a form so that comments can be accepted. Be careful to place the following code in between the correct tags:
    4. <p class="footnote">Posted by {name} on {comment_date 
      format='%m/%d'} at {comment_date format='%h:%i %A'}</p>
      {/exp:gallery:comments}
      {/if}
      <h3>Add Your Comment</h3>
      {exp:gallery:comment_form preview="toastgallery/photo"}
      {if logged_out}
      <p>
      Name:<br />
      <input type="text" name="name" value="{name}" size="50"
      />
      </p>
      <p>
      Email:<br />
      <input type="text" name="email" value="{email}"
      size="50" />
      </p>
      {/if}
      <p>
      <textarea name="comment" cols="50"
      rows="12">{comment}</textarea>
      </p>
      {if logged_out}
      <p><input type="checkbox" name="save_info" value="yes"
      {save_info} /> Remember my personal information</p>
      {/if}
      <p><input type="checkbox" name="notify_me" value="yes"
      {notify_me} /> Notify me of follow-up comments?</p>
      {if captcha}
      <p>Submit the word you see below:</p>
      <p>
      {captcha}
      <br />
      <input type="text" name="captcha" value="" size="20"
      maxlength="20" style="width:140px;" />
      </p>
      {/if}
      <input type="submit" name="submit" value="Submit" />
      <input type="submit" name="preview" value="Preview" />
      {/exp:gallery:comment_form}
      {/if}
      {/exp:gallery:entries}

      ExpressionEngine: Creating a Photo Gallery

    5. Finally, before we can submit any comments, we need to add a small piece of code that will allow us to preview a comment on the page before it is submitted. Add this code between the exp:gallery:comments and the exp: gallery:comment_form tags. This will not have any appreciable difference on the page until we use the Preview button.
    6. <p class="footnote">Posted by {name} on {comment_date 
      format='%m/%d'} at {comment_date format='%h:%i %A'}</p>
      {/exp:gallery:comments}
      {/if}
      {exp:gallery:comment_preview}
      {if comment}
      <h3>Preview Comment</h3>
      <div class="contentinner">
      {comment}
      </div>
      {/if}
      {/exp:gallery:comment_preview}
      <h3>Add Your Comment</h3>
    7. Now go to a photo and try submitting a comment. Before hitting the Submit button, try hitting the Preview button to see a preview of the comment first. The following screenshot shows an example of one comment that has already been submitted and another comment that is being previewed.
    8. ExpressionEngine: Creating a Photo Gallery

    9. One final touch to this template before we are all done. Our main h3 heading at the top of the page looks like a breadcrumb, but it does not have hyperlinks. Let us add hyperlinks to this heading—the hyperlinks will not work right away because we have yet created the templates.
    10. <div id="content"> 
      <h3><a href="{path=toastgallery}">Toast Gallery</a>&nbsp;
      <b>&#8250;</b>&nbsp;{exp:gallery:entries gallery="{gallery
      _name}" limit="1" log_views="off"}<a href="{category_
      path=toastgallery/browse}">{category}</a>&nbsp;<b>
      &#8250;</b>&nbsp;{title}{/exp:gallery:entries}
      </h3>
      {exp:gallery:entries gallery="{gallery_name}"}

    We are now done with creating our single-entry page. Now we will create our category browsing page where visitors can browse all the photos in a category and select the photo that they wish to see.

    Create the Category Page Layout

    The category navigation page needs to attractively display a series of photos so that our visitors can quickly browse to the photos they are most interested in. A visitor browsing our photo gallery may spend a lot of time on this page.

    We are going to take the same approach in redesigning this page as we just did in the last example. Rather than trying to modify the auto-generated templates, we are going to create a new template with an outline of our design, and then add in the gallery components.

    1. In the ExpressionEngine control panel, click on Templates. Then select the toastgallery template group and New Template. Create a new template called browse. Leave the Template Type as Web Page and the Default Template Data as None. Click Submit.
    2. ExpressionEngine: Creating a Photo Gallery

    3. Open the toastgallery/browse template and type in the following code. This is very similar to our starting template for the single-entry page, but instead of using the exp:gallery:entries to retrieve the image name based on the URL, we use the exp:gallery:category_name tag to retrieve the category name, also based on the URL. Typically, a URL would be http://localhost/toastgallery/browse/C1 (or http://www.example.com/toastgallery/browse/C1), where C1 indicates the category. If someone chooses to visit http://localhost/toastgallery/browse without the category identifier, all the photos are displayed. Therefore, the segment_3 logic is used to check for a missing segment_3 (the C1 part of the URL) and display a different heading in that instance.
    4. {assign_variable:gallery_name="toastphotos"} 
      {assign_variable:my_template_group="toastgallery"}
      {assign_variable:my_site_wide_templates="toast"}
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Toast for Sale: Toast Gallery{exp:gallery:
      category_name} - {category}{/exp:gallery:
      category_name}</title>
      <link rel='stylesheet' type='text/css' media='all'
      href='{path={my_site_wide_templates}/toast_css}' />
      <style type='text/css' media='screen'>@import"{path=
      {my_site_wide_templates}/toast_css}";</style>
      <meta http-equiv="content-type" content="text/html;
      charset=UTF-8" />
      </head>
      <body>
      <div id="header">
      <h1>Toast for Sale!</h1>
      {exp:gallery:category_name}<h2>{category}</h2>{/exp:gallery:
      category_name}
      {if segment_3 == ""}<h2>All Photos</h2>{/if}
      </div>
      <div id="content">
      </div>
      <div id="menu">
      {embed={my_site_wide_templates}/.menu}
      </div>
      </body>
      </html>
    5. Go to a category page directly (for example, http://localhost/toastgallery/category/C1/ or http://www.example.com/toastgallery/category/C1), or by clicking on the category breadcrumb on the single-entry page. Notice how the page title and the page heading both reflect the category name.
    6. The Photo Gallery module, unlike the main weblog module in ExpressionEngine, does not support using category names in the URLs—the category ID (for example, C1) must be used instead.

      ExpressionEngine: Creating a Photo Gallery

    7. Next, we are going to create a subheading on the page that will act as a breadcrumb, allowing the visitor to click to go back to the main navigation page. Add the following code inside the
      section:
    8. <div id="content"> 
      <h3><a href="{path=toastgallery}">Toast Gallery</a>{exp:gallery:
      category_name}&nbsp;<b>&#8250;</b>&nbsp;{category}
      {/exp:gallery:category_name}</h3>
      </div>

      Extending Document Management in Alfresco 3

    9. Now let us display the photos. We are going to display the photos inside our contentinner style; this will put a light tan box around our photo collection. We will then use the exp:gallery:entries tag to display our photos, just like we did for the single-entry page. ExpressionEngine determines that we want to display the photos of a specific category automatically from the URL of the page. As different categories have different numbers of photos, the columns="2" and rows="3" parameters indicate how many photos should be displayed per page and how they should be laid out. We don't have much space across our page, so we are limiting ourselves to two photos across.
    10. The code we are using to display the table is very similar to the code we saw when building the calendar in the previous chapter. We have a table, with each row containing a certain number of photos. As the number of rows could vary, we use the {entries} and {row} tag to loop through each row of photos. The {row_start}, {row}, and {row_end} define what we want each row to contain. In our case, we are saying that we want each row of photos to start with , have cells with the image and the corresponding image title, and then end in .

      <div id="content"> 
      <h3><a href="{path=toastgallery}">Toast Gallery</a>{exp:gallery:
      category_name}&nbsp;<b>&#8250;</b>&nbsp;{c ategory}
      {/exp:gallery:category_name}</h3>
      {exp:gallery:entries gallery="{gallery_name}" orderby="date"
      sort="desc" columns="2" rows="3" log_views="off"}
      <div class="contentinner">
      <table cellpadding="6" cellspacing="1" border="0"
      width="99%">
      {entries}
      {row_start}<tr>{/row_start}
      {row}
      <td>
      <a href="{id_path=toastgallery/photo}"><img
      src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{thumb_url}" border="0" title="{title}" /></a>
      <br />
      <div>{title}</div>
      </td>
      {/row}
      {row_end}</tr>{/row_end}
      {/entries}
      </table>
      </div>
      {/exp:gallery:entries}
      </div>

      ExpressionEngine: Creating a Photo Gallery

    11. We have defined three rows and two columns of photos, allowing six photos per page. What happens if a category has more than six photos per page? We need to spread out the photos over multiple pages, and provide links so that the visitor can move between the pages easily. In fact, ExpressionEngine automatically spreads the photos across multiple pages, so all we need to do is add ExpressionEngine tags to provide the links. To do this, let us use the footnote style. Add the following code after the table but before our closing exp:gallery:entries tag:
    12. </table> 
      </div>
      {paginate}
      <div class="footnote">
      <span>Page {current_page} of {total_pages} pages</span>
      <br />
      {pagination_links}
      </div>
      {/paginate}
      {/exp:gallery:entries}
      </div>

      ExpressionEngine: Creating a Photo Gallery

      If there are less than six photos in a single category, the links to other pages will not be visible. However, there will still be a message saying Page 1 of 1 pages. An alternative to pagination is to allow more photos per page—by expanding either the number of rows or the number of columns. To make this work with our site design, we would need to shrink the size of each individual thumbnail.

    13. As a final step to make browsing our galleries as easy as possible, we are going to include the drop-down box that allows visitors to switch between categories without going back to the main category menu. Add the following code after the div class="contentinner" but before the table tag. This code uses the exp:gallery:category_list tag to display a list of every category we have. This list is then combined into a HTML drop-down box, complete with hyperlinks.
    14. <div class="contentinner"> 
      <form>
      <select name="URL" onChange="window.location=this.options
      [this.selectedIndex].value">
      <option value=" ">Category Jump Navigation</option>
      {exp:gallery:category_list gallery="{gallery_name}"}
      <option value="{category_path=toastgallery/browse}
      ">{category_name}</option>
      {/exp:gallery:category_list}
      </select>
      </form>
      <table class="tableBorder" cellpadding="6" cellspacing="1"
      border="0" width="99%">

      ExpressionEngine: Creating a Photo Gallery

    We now have both our single-entry page and our category navigation page redesigned. Now all we need to do is redesign our main index page so that it is more consistent with our overall site design.

Building Websites with ExpressionEngine 1.6 A clear, concise, and practical guide to creating a professional ExpressionEngine website
Published: July 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Create the Main Index Page

The index page is the main jumping off point for visitors to our photo gallery. They are presented with a list of categories to choose from. In the original design, the categories are listed in a table, and underneath are eight random images. Also in the table next to each category were statistics regarding number of images, number of comments, number of views, and last file upload.

These statistics are going to be fairly meaningless to the average visitor trying to choose a category. So rather than doing this, we are going to display our categories as a list, and display a sample of photos from each category.

Unlike the previous two templates that we could create from scratch, we are going to modify the existing index template.

Backup the Existing Index Template

First, as we are modifying a template that was auto-generated, let us back up the existing gallery index template.

  1. In the ExpressionEngine control panel, click on Templates. Then select the toastgallery template group, and select to edit the index template of that group (click on the name index).
  2. Select all the text in the main white box where we type our template code. Expand the Template Notes section and do a cut-and-paste. Cut all the code from the main template and paste it into the notes section.
  3. The Template Notes section is a scratch-pad where we can write anything,  and it is saved with the template. What we put in the notes section does not appear anywhere else on our site.

    ExpressionEngine: Creating a Photo Gallery

  4. Now hit Update. The template should now appear blank, but if we need access to what it used to look like, we can always copy the Template Notes section back into the main template.

Create the Main Page for Our Photo Gallery

Now let's change our template so that we are displaying a list of the categories along with their descriptions, which are hyperlinked to the corresponding category page.

  1. Still in the index template of the toastgallery template group, type the following. This will place our normal header and our normal menu on the page, but nothing else.
  2. {assign_variable:gallery_name="toastphotos"} 
    {assign_variable:my_template_group="toastgallery"}
    {assign_variable:my_site_wide_templates="toast"}
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Toast for Sale: Toast Gallery</title>
    <link rel='stylesheet' type='text/css' media='all'
    href='{path={my_site_wide_templates}/toast_css}' />
    <style type='text/css' media='screen'>@import"{path=
    {my_site_wide_templates}/toast_css}";</style>
    <meta http-equiv="content-type" content="text/html;
    charset=UTF-8" />
    </head>
    <body>
    <div id="header">
    <h1>Toast for Sale!</h1>
    <h2>Toast Gallery</h2>
    </div>
    <div id="content">
    </div>
    <div id="menu">
    {embed={my_site_wide_templates}/.menu}
    </div>
    </body>
    </html>

    ExpressionEngine: Creating a Photo Gallery

  3. Next, we will display a list of the categories that we have. We are going to display the list in a table, with each category name in the h3 heading style. The code we are using is very similar to the code in the browse template. We have a table, with each row representing a different category. As the number of categories could vary, we use the {category_row} and {row} tag to loop through each category we defined, and display the category heading (using the {category} tag). Type in the following code:
  4. <div id="content"> 
    {exp:gallery:categories gallery="{gallery_name}"}
    <table cellspacing="50">
    {category_row}
    {row}
    <tr>
    <td>
    <h3>{category}</h3>
    </td>
    </tr>
    {/row}
    {/category_row}
    </table>
    {/exp:gallery:categories}
    </div>

    ExpressionEngine: Creating a Photo Gallery

  5. Next up, let us make these category headings hyperlinks so that when we click on them we are taken to the relevant category page. Change the following line to add the highlighted code. Note that toastgallery may need to be changed to the name of the photo gallery your site is using.
  6. <td> 
    <h3><a href="{category_path=toastgallery/browse}" title="Jump to
    {category}">{category}</a></h3>
    </td>
  7. Now let us add a description underneath the category name. We will use the {category_description} tag to grab the description that was created when we created our categories. Add the following code:
  8. <td> 
    <h3><a href="{category_path=toastgallery/browse}" title="Jump to
    {category}">{category}</a></h3>
    <br />
    <i>{category_description}</i>
    </td>

    ExpressionEngine: Creating a Photo Gallery

  9. Now we are going to add the photo to the right of each category. We are going to display a random photo from each category, so the page looks different at each visit. We are going to use the thumbnail version of the image by using the code src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{thumb_url}". The image is hyperlinked to the category page in the same way that our h3 heading was in the last example. Add the following code:
  10. <tr> 
    <td>
    <h3><a href="{category_path=toastgallery/browse}" title="Jump
    to {category}">{category}</a></h3>
    <br />
    <i>{category_description}</i>
    </td>
    <td>
    {exp:gallery:entries gallery="{gallery_name}" orderby="random"
    category="{category_id}" log_views="off"}
    <a href="{category_path=toastgallery/browse}"><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="
    {thumb_url}" alt="{title}" title="{title}" border="0" /></a>
    {/exp:gallery:entries}
    </td>
    </tr>

    ExpressionEngine: Creating a Photo Gallery

    This code is a little unusual within the exp:gallery:categories tag. Typically, we cannot display images inside this tag-only information about the category (such as the description, number of files and number of views). The exp:gallery:entries tag is the tag used to display images in a photo gallery. By embedding it within the categories tag with the parameter category="{category_id}", we allow photos to be displayed but restrict the photos to the corresponding category. Without this parameter, we could display photos, but the photos would be from any category.

We have now completed the main navigation page for our photo gallery, and with that, our photo gallery is complete. We've integrated the pages into our site's existing look and feel, and changed each page so that we use less templates but each template has more functionality.

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

Building Websites with ExpressionEngine 1.6
Building Websites with ExpressionEngine 1.6

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

Mastering phpMyAdmin 2.11 for Effective MySQL Management
Mastering phpMyAdmin 2.11 for Effective MySQL Management

Drupal 6 Social Networking
Drupal 6 Social Networking

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

PHP 5 CMS Framework Development
PHP 5 CMS Framework Development

Django 1.0 Website Development
Django 1.0 Website Development

Practical Plone 3: A Beginner's Guide to Building Powerful Websites
Practical Plone 3: A Beginner's Guide to Building Powerful Websites


 

Your rating: None Average: 4.4 (5 votes)
informative and helpful article by
really found it so much informative and helpful as i want to have an website which based on photography so there must be an image gallery and your tips will be useful for it thanks
Thanks by
I really appreciate with the above information. Thanks for this interesting information.
I really appreciate with the by
I really appreciate with the above information. Thanks for this interesting information.
Excellent information. by
You have managed the contents in a well mannered.
Thanks for the tutorial. by Karen Guz
Thanks for the tutorial.
Square peg web by
We need to spread out the photos over multiple pages, and provide links so that the visitor can move between the pages easily. In fact, ExpressionEngine automatically spreads the photos across multiple pages.Square Peg Web
Square peg web by
Next up, let us make these category headings hyperlinks so that when we click on them we are taken to the relevant category page. Change the following line to add the highlighted code. Note that toastgallery may need to be changed to the name of the photo gallery your site is using.
Great article. I really like by
Great article. I really like it. Thanks for information a lots. True Blood

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
d
1
Y
M
c
e
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