Last year Carrie Stack of the Say Yes Institute and a certified Life Coach, asked me about helping her to launch a s site for her new project entitled EO.  EO stands for Emotional Orgasm which is a term she and her business partner Michele Lazcano came up with to describe a moment when you connect with another person and the both of you realize that the connection has moved both of you forward to living your life fully.

I have to say I had a few EO’s of my own with this project.  In collaborating with Katharine Navins of Tallow Studio for the visual aspects of the site, I came to realize that the “splash page”, long considered a no-no among designers, can actually be a very effective tool in focusing the user’s attention on the site’s various sections before they dive right into the content.  Katharine’s use of the gentle blue and white gradient tile in the background and the clean look of the EO logo makes for a very soothing inital impression and prepares the viewer for a relaxing enjoyable time spent reading about Carrie and Michele’s vision of how we can all connect with each other and live our lives more fully.

One thing that was a fun challenge in developing the site was finding a way to display the beautiful navigational buttons Katharine designed without having to resort to javascript or tables.  I found that giving the unordered list that contained the navigation its own id and then using relative positioning to place it on the page, then allowed me to style all of the links with some universal styles, such as visibility, borders, margins, padding and line-height (to fool IE into expanding the clickable area to cover the entire button).  Then, giving each list item its own id gave me precise control over where the link was displayed via absolute positioning and also allowed me to display a different background (the various buttons) for each link.

Social networking, by its very nature, is also a big part of EOyourlife’s focus.  In addition to the text links to Twitter and Facebook at the bottom of each page, I also installed the Add-to-Any plugin so users can easily share the site with friends.  Also in use are the plugins; MailChimp/Analytics 360 to help maintain the newsletter email list and monitor site traffic, Cforms, for the site’s contact forms and All-in-One SEO pack to enhance the use of page titles and optimize the site’s content.

Check out EOyourlife.com and share the good vibes!

Once you have downloaded, installed and activated the NextGen Gallery Plugin, when you go to your WP dashboard, it appears at the bottom left like so:

NextGen's Location in the WP Dashboard

Clicking next to the plugin’s name will open a list of tools and settings for NextGen:

NextGen Gallery Tools and Settings

Here’s a quick guide to the various areas of the NextGen toolbox:
1: Overview
2: Add Gallery/Images
3: Manage Gallery
4: Album
5: Tags
6: Options
7: Style
8: Set Up
9: Roles
10: About

1: Overview

Opens a page that contains general info about Next Gen. You can see a count of your albums, galleries and images, the names of recent donors to the plugin’s author (some nice exposure in exchange for a little support-these things don’t write themselves), updates from Alex Rabe’s blog, related plugins (good to check out for ways to extend Next Gen) and your Graphic Library settings.

Step 1. Click on Upload Images

2: Add Gallery/Images

Fairly self-explanatory, this is where you would go to create a new gallery or add images to an existing gallery. Click on “browse” to select an image from your computer. Then, select the gallery they will be uploaded to.

Step 2. Select your images

3. Manage Gallery

This brings you to a list of all your galleries. Click one of your galleries to edit the following settings:

Title: The title your gallery will have when it’s displayed on a page.

Description: A brief summary of the gallery’s content

Path: The file path for your gallery.

Page Link To: When the gallery is displayed as the content of an Album, choosing a page here will create a linked image and title that can be clicked on to go directly to that gallery’s page.

Preview Image: Lets you choose which image will be displayed when the gallery is shown in an Album.

Author: Lets you show the Gallery’s author.

Create Page: This feature allows you to create a page for the Gallery if you need to.

Below those options is a dropdown menu of Actions. If you need to make changes to several or all the images at once, this will save you time:

No Action: the default

Set Watermark: Allows you to embed text onto the image to mark it as yours.

Create New Thumbnails: This is what you need to use if you have changed your Thumbnails settings under Options (see below).

Re-size Images: You may need to re-size images to fit your site’s style.

Delete Images: Allows you to perform a batch delete on selected images.

Import Metadata: Allows you to import metadata (e.g. EXIF, IPTC, or XMP data) from images and set it in the alternate title text field. (Thanks Dave!)

Rotate Images Clockwise/Counter-Clockwise: Fairly self-explanatory.

Copy To: Lets you copy the selected images to a different gallery.

Move To: Lets you move the images from one gallery to another.

Add/Delete/Overwrite Tags: Allows you to batch-edit tags-keywords associated with the images that can enable the images to be selected by keyword-based searches.

If you have selected one of these actions, just click on Apply to put the changes in effect. You can also choose to Sort the Gallery which takes you to a page where you can re-arrange your images. To return to the Gallery editing window, just click Return to Previous Page on the far right. Also, if you did change anything, make sure you click “Save Changes” to put all your edits into effect.

The bottom of the Manage Gallery page contains a list of all that Gallery’s images. If you just need to edit one image, or, if each image needs individual editing, you can do that here.

4. Album

If you need to sort your Galleries into categories, then you need to create Albums. The analogy at work here is that you can have a family album entitled “Vacations” and perhaps another entitled “Weddings” and into those albums you would put collections of photos (or galleries) called “Disneyworld09″ and “Phyllis & Mike”.

Click and drag an album from the right window to place it in the left window for editing.

Once you have selected which album you want to edit, just drag it over to the far left window to add galleries via the drag and drop method.

Click Update to place the Galleries into the Album selected.

5. Tags

This allows you to edit existing tags, re-name tags, delete tags and also edit the tags’ slug (the way it will be written into the page’s URL). For example: if you had tagged an image as “Family Vacations”, the slug could be specified as family-vacations. Choosing your slugs wisely makes you site more “search friendly”.

This makes the image likely to show up in a search for the terms "home" AND "interior".

6. Options:

This is where you go to control the following settings:
General: set the gallery path, delete image files (check to remove the images from the database when you remove a gallery, activate permalinks, select a graphic library, activate an rss feed for your images and activate some Javascript effects for your galleries to create certain displays of images. Another feature you can edit here is how your images can be attached to posts that shares certain search terms, either by categories or tags.

Thumbnails: Here you can set the dimensions and the quality of your galleries’ thumbnails. Just be sure to go to Manage Galleries > Select a gallery > Actions and select “Create New Thumbnails” after you do this.

Images: Here you can edit your images’ size, quality, enable caching of images when someone browses a gallery and also clear the cache folder in case you change certain image settings.

Gallery: You can set a large array of options for your galleries here. Deactivate a gallery page’s link, set the number of images per page, set the number of image columns, integrate Slideshow settings, choose to show either a slideshow or a list of thumbnails, simply show the imagebrowser, add hidden images, enable Ajax pagination and choose Sort options.

Effects: This is where you can set the way images will be displayed once their thumbnails in a Gallery are clicked. Note: the only two options that will work automatically are Thick Box (which displays the image with a thick white border over a sheer gray background) and Shutter (similar display but with no border). Highslide and Lightbox effects can only be generated when certain javascript is inserted into your content folder. For an example of the Highslide effect, click here and then click one of the images under Galleries.
To see what the Lightbox effect is go here and select one of the images.

Watermark: Here you can edit your settings for displaying watermarks such as whether yo want to use an image or text to protect your images from theft.

Slideshow: Set your slideshows’ appearance. Note: you will need to download an auxiliary plugin named JW Image Rotator to get the slideshows to function.

7. Style:

Style allows you to choose from 7 different stylesheets for your Album and Gallery displays as well as customize the CSS to suit your site’s look and layout. The available readymade styles aren’t radically different from each other, but here is a series of screenshots with the various choices in effect.

Gallery displaying the default style

Black Minimalism Theme

DKret 3 Theme

Hovereffect Styles

K2 Theme

Shadow Effect

Shadow Effect with Description Text

Not stunningly different in appearance I know, but, look at things this way. You can select a style, customize it any way you like via CSS and then, if things get hairy, you can always select another style to revert your design to something similar to its original state.

8. Set Up:

This page gets a little lost in translation for me. One would expect it to contain info about folders and ports and such but this is actually where you go to fully remove any images/galleries/album info from your database. That first line you see:
“You don’t like NextGEN Gallery ?” always reminds me that awkward moment when you have to tell your mother-in-law “No thanks” when offered a helping of her special “Spam ‘n Cheezwiz Surprise”. I wish this section was called “Uninstall” instead.

9. Roles:

This is a nice touch. If you run a site that has several administrators/editors/contributors (the basic Wordpress roles), this is where you can assign different levels of access to the NextGen galleries for different people.

10. About:

Here’s where the credits roll. If you are burning with desire to see who contributed to this plugin’s development and/or economic survival, then this is the section for you. And, if you find NextGen so fabulous that you want to throw some cash their way, there’s a “Make a Donation” button right under the heading “How to Support?”.

Related Links:

Hungry for more? Here’s a list of links to other NextGen-related articles that I have gathered in the course of working with the NextGen plugin:

Vuthy.com: Guide to Using NextGen’s Albums and Galleries

Scotproof’s: Inserting a NextGen gallery or slideshow in a custom field

Narasopa Media’s: Adding Title and Description to NextGen Gallery Thumbnails

And stay tuned for the next article in my NextGen series: “Customizing Your Gallery”!

I really want to get out of this gloomy dark green theme get some uniformity across the various sites and networks that I manage. The past year has been so crazy, what with running after a toddler, getting new projects out the door and keeping up with what’s happening on the web, that when I look at this site now, I see the haphazardness of it all. As each new tool or feature came onboard, they were sort of randomly thrown into the left or right sidebar, and now I’m ready to make cohesive design sense of it all.

I had a couple of white-knuckle moments at the keyboard during some key points in development. The first was when I tried to install WP on a subfolder so I could let others track the new site’s progress. At first the install didn’t work, but after a little digging, it turned out that GoDaddy.com is responsible for that little comment on the wp-configure file that says “define(’DB_HOST’,'localhost’);//99.9% chance you won’t need to change this”. But on a Godaddy site, you DO have to change that to a particular address. When IE users told me that the Resources page wasn’t displaying properly, I had to dip into the IE7.css a little and tweak some stuff. Then, when I thought everything was all set to change to the root folder, the Resources page reverted back to its pre-css-tweak mess! After a little thrashing around, I found the culprit, a style declaration on the actual page’s template that was overriding the page’s conditional IE7 formatting. A little snip and Eureka! The page displayed correctly again.

All in all, a fun project and it felt good to be working on something that I could really relate too. It’s a great group of people and a really great resource for Salem families who want to connect to their community.

The online gallery portion of the site had several criteria: 1) It had to be something that displayed the photos directly on the Photos page. 2) It needed to be something that people could upload their own images to. 3) It had to be fairly easy to use without involving a whole lot of hand-coding.

At first, the Shashin plugin seemed like the way to go, but after fiddling and twiddling and searching for online information beyond the simple statement; “Shashin is a photo gallery plugin that’s really awesome!” I got fed up and started looking again. NextGEN seemed like another good prospect, so I plugged it in and gave it a whirl.

To my immense relief, it was a good choice. The interface is fairly intuitive and there seems to be more support on how to actually USE the thing. For a good overview, check out Kansaiblogger’s post.

Since I knew I needed something a little more comprehensive for the people who would actually be running the site, I decided to write this short tutorial on how to add galleries and images to your Wordpress site using NextGEN.

This is assuming you have already downloaded the NextGEN plugin and then uploaded it and activated it on your Wordpress installation.

Step 1
Log into your Dashboard and click on “Gallery”

Step 2
Click on “Add Gallery”

Step 3
Add a new Gallery to your WP install by typing in the title you want to use for the gallery.

Step 4
After clicking “Add Gallery” you should see the notice that a new gallery has been added.

(Jenn Tip: Make note of the gallery’s tag. It’s how you can ID your galleries when you are working with a page’s code.)

Step 5
Now that you have created a new gallery, you can either go right ahead and start uploading images, or, if you have to go cook dinner or something, you can come back to your gallery by using the main dashboard and clicking on Gallery again. From there, you can start uploading images directly to a gallery of your choice.

Step 6
Now that you are ready to upload pictures, it’s pretty straight forward. In the upload window, simply browse to the image you want to upload to the gallery you’ve created.

Step 7
Once you’ve uploaded the image, you’ll get a notice that everything went well:

Step 8
Keep adding images to your gallery until you are done. Then, from the main dashboard, go to Manage, then Pages and then click on the page you want to add photos to. Once the editing interface opens up, notice the little button that looks like this to the top right of the editing toolbar. Click on that to add images to your gallery page.

Step 9
You get a choice of adding a Gallery, an Album or a Picture. In this case, I’m going to insert a picture from the gallery I just created. Click on the Picture tab, select the image you want from the dropdown list and then choose your size and positioning.

Jenn Tip: To make sure your images don’t get distorted, you may need to type in the dimensions of the photo manually like so:

Step 10
Click on Insert to put the picture where you want on the Page:

Once you’ve inserted your picture, you’ll see the following code has been added to your page:

Stay tuned for more about how to use various features from this plugin!