building websites with expressionengine 2 - · pdf filebuilding websites with expressionengine...

Building Websites with ExpressionEngine 2

Leonard Murphy

Chapter No. 8

"Creating a Photo Gallery"

In this package, you will find: A Biography of the author of the book

A preview chapter from the book, Chapter NO.8 "Creating a Photo Gallery"

A synopsis of the book’s content

Information on where to buy this book

About the Author 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 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.

I would like to thank everyone who helped me with this book (and the

companion first edition). The staff at Packt (including Sneha, Swapna,

Kartikey, Lata, and Douglas) has been especially patient with me as I

juggled the demands of work, writing, and a new baby. There are

countless others at Packt that I don't work with directly but that I also

know have contributed to this book—thank you all.

Next, I'd like to give a big thank-you to my technical reviewers: Sarah

Peterson and Bob Sutton. It is thanks to their meticulous and honest

feedback that the book is as good as it is. Any errors, of course, remain

completely and utterly my fault.

For More Information: www.packtpub.com/building-websites-with-expressionengine-2/book

https://www.packtpub.com/building-websites-with-expressionengine-2/book

I'd also like to acknowledge EllisLab and the wider ExpressionEngine

community—I'm proud to be able to contribute to the community and

appreciate all the support and encouragement I receive. Special thanks

must go to Mark Bowen and Ron McElfresh.

Next, I would like to thank my readers: I especially want to thank those

who take the time to get in touch and let me know what they like or

don't like, those who submit errata, as well as those who take the time

to post about my book on their own website or in a review on Amazon.

One of the great joys of writing a book is hearing from people from all

over the world, and from all professions.

Finally, and most importantly, I would like to thank my wife, Megan.

There are not too many women who, in the final stages of their first

pregnancy, would want to hear their husband say "Honey, right after

you give birth, I was thinking I'd write a book…"



Building Websites with ExpressionEngine 2 ExpressionEngine is a content management system designed to make it easy to manage

engaging, interactive websites for your visitors.

This book provides step-by-step directions to take you from the basics of setting up

ExpressionEngine to building a fully functional ExpressionEngine website. You will

learn how to enhance your website so you can accept comments, allow members to

register, create news feeds, mark content as member-only, build an events calendar,

display your photos in a photo gallery and set up mailing lists your visitors can sign-up

for. In the process, you will quickly become familiar with the ExpressionEngine control

panel; learning how to use templates, channels, categories, custom fields, status groups,

snippets and variables like an expert.

Each chapter is packed with hints and tips so that you can become truly confident using

ExpressionEngine.

What This Book Covers Chapter 1, Introduction to ExpressionEngine introduces you to ExpressionEngine – what

it is, what it can do, and how it compares to other content management systems.

Chapter 2, Getting Installed walks you through installing and configuring

ExpressionEngine, including renaming the system folder and removing or renaming the

index.php file that appears in ExpressionEngine URLs.

Chapter 3, The ExpressionEngine Tour provides a short tour of the ExpressionEngine

control panel, with an introduction to channels and templates.

Chapter 4, Moving a Website to ExpressionEngine walks you through setting up a

website in ExpressionEngine, with an introduction to embedded templates, snippets and

global variables.

Chapter 5, Creating a Fully-Equipped Channel takes what you have learned one step

further, creating a more advanced channel with content organized by category. You will

learn how to allow comments on your channel entries and how to create a news feed.

Chapter 6, Members provides an overview of all the member functionality that comes

with ExpressionEngine. You will learn how to set up member groups, how to customize

the Publish page and how to create member-only content.



Chapter 7, Creating a Calendar shows you how to build an events calendar in

ExpressionEngine, using a jQuery lightbox to display information about events when

they are clicked. The concept of Related Entries is also introduced.

Chapter 8, Creating a Photo Gallery shows you how to build a photo gallery in

ExpressionEngine, using channels, categories and the jQuery module. An overview

of the file manager and native image editing functionality within ExpressionEngine is

also provided.

Chapter 9, Beyond the Basics introduces many extra modules that come bundled with

ExpressionEngine. You will learn how to set-up mailing lists your visitors can opt into,

how to enable searching on your website, how to create a contact form and a tell-a-friend

form, how to start a wiki and how to post channel entries from your phone.

Chapter 10, Extending ExpressionEngine talks you through many of the essentials that

come with running an ExpressionEngine website: how to back-up (and restore) your

database and how to upgrade the software. You will also learn about some of the best free

and commercial add-ons available.

Appendix A, Installing WampServer walks you through setting up WampServer, so that

you can run ExpressionEngine locally rather than following along on an actual website.

Appendix B, Solutions to Exercises gives you answers to the exercises that are found at

the end of most chapters.



Creating a Photo GalleryAlthough 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 chapter, you will create a photo gallery channel, use fi le manager to manage your photos, and use jQuery to display the photos on your website.

This chapter uses the FancyBox jQuery plugin that you set up in the previous chapter. If you did not follow the previous chapter, please follow the instructions in Chapter 7, Creating a Calendar under Setting up FancyBox

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

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 fi elds 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 fi elds for the photos and 20 custom fi elds for the descriptions. This solution works, but is not the most fl exible (that is, to add 21 photos to a gallery, you would have to modify your custom fi elds and your templates).



Creating a Photo Gallery

[ 200 ]

An alternative approach to accommodate multiple photos per entry without creating an abundance of custom fi elds 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 defi ne 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 fi elds, or using a third party add-on, this chapter 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 fi rst need to defi ne where your photos will be stored.

File manager The fi le 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 fi rst 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 fi le.

2. Next, you need to tell ExpressionEngine where this directory is. Inside the control panel, select Content and then File Manager.



Chapter 8

[ 201 ]

3. On the left-hand side of the screen, you will see the directory or directories where you can currently upload fi les to (if any), along with the fi les currently in each directory. In the toolbar on the right-hand side, underneath File Tools, select Create New Upload Destination.

4. Enter a descriptive name of Photo Gallery. The Server Path and URL may be pre-fi lled, however, you should make sure they point 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.




[ 202 ]

5. All the fi elds that begin with maximum can be left blank. These fi elds 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 fi le that exceeds these limits, you will see an error message such as The fi le 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 fi elds allow you to enter code that appears inside, before, and after the img tag. However, you can format your img tag as needed inside your template.

7. The File Properties, File Pre, and Post Formatting can be ignored for now as they only apply to non-image fi les that you upload (and you have specifi ed that you are only allowing images in your photo gallery).

8. If desired, you can allow certain member groups to upload fi les. The member groups you see listed (if any) will depend on the member groups you have. Set all the member groups to Yes except for Members, which should be set No.



Chapter 8

[ 203 ]

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

Creating your photo gallery channel Now that you have created a place to store your photos, you can create your photo gallery channel. As with every other channel you have created in this book, you will follow the same basic steps—creating custom fi elds and categories, creating your channel, publishing some entries, and then building your templates.

Creating your custom fi elds Since you are going to have one photo per channel entry, you have a lot of fl exibility to create as many custom fi elds for each photo as you see fi t—for example, you could have fi elds 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 fi elds 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.




[ 204 ]

4. The fi eld type will be File. The fi eld label will be Photo and the fi eld name will be photos_photo (the fi rst part representing the fi eld group name). In the instructions for the fi eld, indicate that photos in the photo gallery should be no more than 600x800 pixels (so that they fi t 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-size it using fi le manager.

5. The fi eld should be required, but not searchable, and should be shown by default. The fi eld display order should be 1 and the fi le type should be Image. Click Submit.

6. Click Create a New Custom Field again. This time, the fi eld type should be Textarea, the fi eld label Caption, and the fi eld name photos_caption. The fi eld instructions can be left blank. Answer Yes to it being a required fi eld, 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 be left as left-to-right.



Chapter 8

[ 205 ]

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 fi eld.

N ow that you have your custom fi elds, you can defi ne your categories.

Creating your categories As discussed at the beginning of this chapter, 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 fi eld 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 fi ne too). Click Submit.

3. Back on the Category Management screen, select Add/Edit Categories for the Photo Categories category group.




[ 206 ]

4. Click Create a New Category. The fi rst 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 set to None, and click Submit.

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.

Now that you have your category group and custom fi eld group defi ned, you can go ahead and create your channel.



Chapter 8

[ 207 ]

Creating your channel The process of creating your channel is 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 fi eld group.

3. Answer 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 fi rst photos There are three ways to upload photos to your website. Your fi rst 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 fi le. Both of these options are convenient since they use the built-in ExpressionEngine fi le manager to upload your fi le—you never have to leave the control panel. However, you can upload only one photo at a time and you may run into issues if you try and upload very large photos (greater than 2 MB).




[ 208 ]

The third option for uploading photos is to do so directly, using FTP, just as you would upload any fi les 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. That is the method we will use here.

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

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 chapter.

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 fi rst screen to appear in the Upload File screen. Since you have already uploaded the fi les, you can simply select the photo gallery option in the left-hand menu.

If no photos appear under the photo gallery, or the fi les 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 fi les—the fi rst time you access the fi les after uploading via FTP, ExpressionEngine has to create the thumbnails).



Chapter 8

[ 209 ]

6. Select local1.jpg.

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.

Creating your templates As with everythin g 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.




[ 210 ]

Creating the singl e-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.



Chapter 8

[ 211 ]

If you did not follow Chapter 5, Creating a Fully-Equipped Channel completely and do not have an faqs/browse template to duplicate, it 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 fi rst 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="{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 defi ned 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 fi eld instructions ask that photos be no bigger than 600x800, they may still be too big to fi t nicely into the #content area without overlapping the sidebar. The max-width property proportionally 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.




[ 212 ]

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. Refer to Chapter 5, Creating a Fully-Equipped Channel for more information on single and multiple-entry pages and how they work.If something does not look right in your single-entry page page, compare your code with the fi nal code for the template, downloadable at either http://www.packtpub.com/support or http://www.leonardmurphy.com/book2/chapter8.



Chapter 8

[ 213 ]

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.

Crea ting 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 that you used in the previous chapter. 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.

If you did not follow the previous chapter, please, at least, follow the instructions under the heading Chapter 7, Creating a Calendar under the Setting up FancyBox section.

Rather than re-inventing the wheel, you can base the multiple-entry page template on the calendar/index template that you created in the last chapter. (If you did not follow the previous chapter, you can download the template 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 & Eg Financial Advisors</title>




[ 214 ]

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. Specifi cally, 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.



Chapter 8

[ 215 ]

Adding content to your multiple-entry page There are going to be two ways to browse your photos—visitors may go to the main photos/index page, where they will see all your photos. Alternatively, they can go to a category-specifi c 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 the 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 & right arrow keys to scroll between photos and the escape key to exit enlarged mode.</p>

{/if}




[ 216 ]

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 specify only 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[document.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.



Chapter 8

[ 217 ]

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 fi ve 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 superfl uous 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 fi rst 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 on every fi fth thumbnail the row will 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>




[ 218 ]

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.

7. The next step is to replace the placeholder text with actual thumbnails. When designing your custom fi elds, you did not include a fi eld 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—signifi cantly impacting page load times. Instead, you can use thumbnails that are automatically generated by ExpressionEngine.

8. Whether you upload photos via FTP or via fi le manager, ExpressionEngine automatically creates thumbnails of any photos in a _thumbs subdirectory (/images/photos/_thumbs) when you fi rst view them in fi le 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 fi eld (photos_photo) as a tag pair instead of as a single tag. This allows you to access the different components of each fi le (the path, the fi lename, and the extension) in each entry separately. By doing this, you can then insert the _thumbs subdirectory to the end of the path, and prefi x the fi lename with the thumbs_ prefi x that is automatically added to the thumbnails.



Chapter 8

[ 219 ]

For more information about using the File custom fi eld as a tag pair instead of as a single tag, please visit http://expressionengine.com/user_guide/modules/channel/custom_fields.html#file_fields

9. 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="{photos_photo}{path}_thumbs/thumb_{filename}.{extension}{/photos_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 fi le manager. Make sure you can see the thumbnail in your entry before you submit it.

10. 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.




[ 220 ]

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 fi les in your browser (if not, check your .htaccess fi le). Next, verify that the paths in the photos/index template point to the script/CSS fi les in the FancyBox directory and check the fi lenames 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 in your browser.

11. The fi nal 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>

12. Now visit your photo gallery page and you will fi nd the new hyperlinks. Click on one to confi rm 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.



Chapter 8

[ 221 ]

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.

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 fi les. If you click again, the fi le list will expand. This can help reduce screen clutter.

3. If you select a fi lename (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 fi fth column from the left).




[ 222 ]

5. At the top-right, there are three modes (Crop, Resize, and Rotate). Select Crop Mode.

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.



Chapter 8

[ 223 ]

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 fi rst 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 fl y in ExpressionEngine, rather than shrinking them in advance or uploading them and using the fi le manager to resize them.

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

Photo gallery add-ons In this chapter, 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 fl exible 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 chapter as a useful add-on for designing a photo gallery with multiple photos per channel entry. In addition, the following add-ons are specifi c to editing photos (though they are by no means representative of all the add-ons that are available. Please see Chapter 10, Extending ExpressionEngine for more information on the wide variety of 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 fl y. Please see Chapter 10, Extending ExpressionEngine for more information on the wide variety of add-ons that are available.




[ 224 ]

Channel Imageshttp://devot-ee.com/add-ons/channel-images/

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

ChallengesThese 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 chapter, but with the knowledge gained from the chapter, plus the ExpressionEngine documentation, you should have all the tools you need at your disposal to fi gure them out.

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

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 a 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.



Chapter 8

[ 225 ]

SummaryIn this chapter, 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 fl exibility than a separate photo gallery module might offer—with unlimited custom fi elds, 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.

This chapter wraps up the step-by-step introduction to ExpressionEngine. By now, you should be fairly comfortable with the basics of ExpressionEngine—channels, templates, tags, custom fi elds, categories, status groups, and so on. In the next chapter, you will be introduced to some more specialized fi rst party modules that you may fi nd useful.



Where to buy this book You can buy Building Websites with ExpressionEngine 2 from the Packt Publishing

website: https://www.packtpub.com/building-websites-with-expressionengine-2/book

Free shipping to the US, UK, Europe and selected Asian countries. For more information, please

read our shipping policy.

Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and

most internet book retailers.

www.PacktPub.com



http://www.packtpub.com/Shippingpolicy

building websites with expressionengine 2 - · pdf filebuilding websites with expressionengine...

Documents