Using the Built In Gallery in WordPress 2.6 - 1

One of the best features of WordPress 2.6 and above is the built-in Gallery that makes displaying multiple photos a ‘one-click’ event.

But wait! Before you start uploading, make sure that you have the Firefox browser installed. Up to now, (the current WordPress release), photo uploads is still only optimized for Firefox. The photo upload functionalities still does not work well with Internet Explorer (though it is the dominant browser) and quite frankly, I don’t even know if it works well with Safari and Opera. So, just to be safe, please download Firefox and install it.

And since this is a tutorial, I’ll also discuss some tips on posting articles.

Step 1: The Title

By default, WordPress makes your title the ‘file name’ of your article/post.
Some things to consider:
1. Don’t make it too long. Short titles are better than long ones
2. If you are using apostrophes or quotes in your title, make sure you correct them in the ‘edit title area.’
3. A title like ‘Heidi Klum’s New Stardoll’ will not be linked properly because Klum’s will come out as Klum%95%s in your title.

Below is how to correct your title.

I have highlighted in RED the area where you could edit your title. Click on EDIT.

Click on image to see bigger photo

Once you click edit, you can put your cursor inside and you can edit the title. For the example, the title was shortened to ailanto-spring-2009

Another thing, Wordpress also automatically adds the dash (-) in between words, so you don’t have to do that. That means the title Ailanto Spring 2009 was written exactly like that on the title and WordPress translated it into all lowercase with the dashes in between. Click on SAVE (in the highlighted area) when you are done.

Click on image to see bigger photo

Part 1 | Part 2 | Part 3 | Part 4 |

Using the Built In Gallery in WordPress 2.6 - 2

Step 2: Adding Images / Media

Now, the fun part. See the Add Media area. It’s on the same level as POST, but on the right side. If you hover your mouse on the LITTLE SQUARE near the Add Media label, you will get the little Add an Image icon as shown below.

Click on image to see bigger photo

Step 3. Uploading Photos

Click on the little SQUARE icon and a window will pop up. Your screen will look like this.

Click on files to upload (highlighted in red).

From experience, if you want to use the built in gallery, a MAXIMUM of 20 PHOTOS is optimal. After 20 photos, the gallery functionality does not work properly. I suggest using the NEXGEN gallery for more than 20 photos. (I’ll do the tutorial for that next).

Oh, although the server can actually take a maximum of 10 MB per file, I don’t suggest using big files. Make it lower than one MB for each photo. I believe that the 10 MB is if we are only using one photo. For multiples, smaller size is better.

As your images are being uploaded, you will see the word CRUNCHING. One everything is done, your window will look like this.

Click image ot see bigger photo

Part 1 | Part 2 | Part 3 | Part 4 |

Using the Built In Gallery in WordPress 2.6 - 3

Step 4 Adding Captions

Though not necessary, I find it better to add captions for SEO (Search Engine Optimization). They find our articles and photos faster and better. It’s actually easy, just lots of copy and paste.

There are times when I have to personalize captions but those are few and far between, and it usually happens when the articles are about celebrities. Runway shows, like the example, it’s easy.

Click on SHOW and your window will look like this.

Click on image to see bigger photo

Let’s discuss this area by area:

TITLE:

The title will become the title of the post when it is viewed as an attachment. As a rule, I just name it for what it is. In this example, since this is the Ailanto Spring 2009 collection, I just named it Ailanto Spring 2009.

Click image to see bigger photo

CAPTION

The caption will be seen BELOW the photo when displayed. Again. I named it Ailanto Spring 2009 in the example. Hence, it’s just a matter of pasting the title since it is already in my mouse.

If this is a celebrity photo, I usually put the celebrity name, and on a group photo, I have to put all their names.

Click on image to see bigger photo

DESCRIPTION

You can get creative here, but since during fashion week we are always in a hurry, I just put in Ailantro Spring 2009, hence another ‘paste’ using my mouse or my keyboard.

LINK URL

Now, the fun part.

This is the reason why I highly suggested Firefox. If you are using Internet Explorer, this function does not work.

You have three choices – NONE, File URL, POST URL.

Click image to see bigger photo

By default, the Link URL is on File URL. As a rule, I chose POST URL, so that when a visitor clicks on the image, he or she goes to a page, not just the photo. If they want to see the full size photo, they will have to click again. Using Post URL also helps us with SEO.

Part 1 | Part 2 | Part 3 | Part 4 |

Using the Built In Gallery in WordPress 2.6 - 4

Step 5

When doing a gallery, you have to repeat this for all the images you have uploaded. And since this is a runway show, it’s just a matter of copy and paste, so it is actually an easy task.

When doing this. I usually leave the LINK URL as is, meaning, I don’t touch it. I just worry about the TITLE, CAPTION and DESCRIPTION. Using the GALLERY function of WordPress automatically makes the Link URL point to the Post URL, so there is no need to change the default.

Once it is done, it’s time to Save all your changes, by clicking on the button SAVE ALL CHANGES as shown below.

Click on image to see bigger photo

Step 6

Now, its time to decide where you want to put your gallery. Again, as a rule, I choose the BOTTOM part of the article. I might have to close the upload window to do this, i.e., go back to the article.

In this example, I just put my mouse cursor where the RED mark is. That is where my gallery will be.

Click image to see bigger photo

Step 7: Inserting the Gallery

Now that you know where you will put your gallery, you can go back to your ADD MEDIA window.

Click on image to see bigger photo

If you scroll all the way down, you will see INSERT GALLERY INTO POST.

Click on that one.

Click on image to see bigger photo

You’re DONE. The pop up window will go away, and your post will look like this. Notice the at the bottom of the post. Click on PUBLISH and you’re on your way.

Click on image to see bigger photo

Your post will look like this, as in our example: Ailantro Spring 2009

Part 1 | Part 2 | Part 3 | Part 4 |

Using the NEXGEN Gallery at WordPress 2.6 - 1

Arguably the most important WordPress plug-in for any website that displays a lot of photos, the NEXGEN Gallery is very easy to use and it only takes a few minutes to learn it.

This tutorial assumes the following:
· You have chosen the photos you want to upload
· The photos have been optimized, i.e., its size is below 1MB. Optimal size is actually below 500K
· Though the server will tell you that it can handle up to 10MB per file, it is still better to have smaller sizes for the image (photo) files.
· You don’t really need Firefox for this one. Internet Explorer, Safari and Opera actually works very well with NEXGEN Gallery

Step 1

In the Admin Area (DASHBOARD) hover your mouse on GALLERY (figure 1). A drop down box will appear, choose ADD GALLERY (figure 2)

step011.jpg

step012.jpg

Click on image to see bigger screenshots

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Using the NEXGEN Gallery at WordPress 2.6 - 2

Step 2 Adding the Gallery

Clicking on ADD GALLERY will bring you to this page

 
step021.jpg

Type in the name of your gallery in the area highlighted by red. For naming conventions, using the name of the designer and the season is best because it is to remember.

Again, the length has to be taken into consideration. In our example, the designer is Alexandre Herchcovitch. Because it is a very long name, I have decided to name the gallery A Herchcovitch Spring 2009. Click on Add Gallery to create the Gallery.

 
step022.jpg

If the process is successful, you get this a page saying so and give you a gallery number. Though this number is important, you do not need to remember it. But you need to remember the name of your gallery.

 
step023.jpg

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Using the NEXGEN Gallery at WordPress 2.6 - 3

Step 3 Uploading Images

Still on the same page, click on UPLOAD IMAGES

 
step031.jpg

The page will turn to this, with the Upload Images in a darker blue background, a BROWSE Button.

 
step032.jpg

Things to note: The bottom has TWO buttons. In our example, one button says UPLOAD IMAGES (right) while the left says DISABLE FLASH UPLOAD.

If you HAVE NOT ENABLED Flash Upload, it will say ENABLE FLASH UPLOAD. Just click on that button and you are on your way.

 
step033.jpg

Click on BROWSE to start the upload

In our example, there are 33 images, only a part of the list can be seen in the screenshot, but all 33 of them are actually on the list

 
step034.jpg

VERY IMPORTANT – you have to choose the GALLERY

 
step035.jpg
Tip: The latest gallery you created is always the LAST on the list:

 
step036.jpg

This screenshot shows that a gallery had been chosen.

 
step037.jpg
Click on UPLOAD IMAGES

 
step038.jpg

You will see a RED BAR as the images are being uploaded. If the process is successful, NEXGEN will tell you.

 
step039.jpg

Congratulations, you have created a NEXGEN Gallery. The next step is putting it in your article.

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Using the NEXGEN Gallery at WordPress 2.6 - 4

Step 4.1: Adding the Gallery to the Article

Now, its time to go to the post area.

This part of the tutorial assumes the following:
· You have written your article
· You have uploaded the article like in the example below.

 
step041.jpg

The example above just shows text (the article). There are no images added yet. One thing to look at the TAGS area.

Again, this is for SEO. As a rule, I just add the name of the designer for the tag. It’s fast and easy.

Step 4.2 Adding an image

Just to follow our style at FashionWindows, I usually add ONE big image that is align left in the article. Though all the photos are already in the NEXGEN and you can also access the photo at NEXGEN, it has one shortcoming, you cannot choose the size of the image. It is either THUMBNAIL or the FULL SIZE IMAGE.

To ensure uniformity, I just add one image in the Add Image area and insert it.

That done, you’re ready to add the NEXGEN GALLERY

Again, for uniformity, I choose the bottom area to add the gallery. I placed my mouse cursor in the RED mark.

 
step043.jpg

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Using the NEXGEN Gallery at WordPress 2.6 - 5

Step 5.1 Adding the NEXGEN Gallery

In the POST AREA, just below the word POST, are a series of icons. Click on the second to the last icon. It’s highlighted in RED here.

 
step051.jpg

Clicking will bring up the NEXGEN pop up window

 
step052.jpg

It is defaulted to GALLERY. The Album and Picture will be discussed in another tutorial.

Before choosing your gallery, you have to choose between IMAGE LIST and SLIDESHOW.  It is defaulted to IMAGE LIST.

I always choose IMAGE LIST for the main reason that a bug in Firefox and Internet Explorer exist wherein the FLASH player is not recognized. The bug is random and it affects all operating system. There is really no way to know. Though the bug is not common, it is common enough to be mentioned at ZDNet and also for the IE8 beta to have a button to start Flash if it does not start automatically when viewing a Flash page.

Because Choosing the IMAGE LIST also gives the viewer a SLIDESHOW link if they want to view a slideshow, choosing IMAGE LIST as our default is actually our best bet.

Now, time to CHOOSE the GALLERY.

In this window, the galleries are ALPHABETICALLY ARRANGED. Because we are going to insert A Herchcovitch, it’s actually very high up on the list.

step053.jpg

Choose A Herchcovitch Spring 2009

 
step054.jpg

Once you click on INSERT, you’ll get this

NOTE: The gallery number changes. This example is Gallery no. 91. Other galleries will have different numbers.

Click on PUBLISH and you’re done. For our example, here is your page.

Alexandre Herchcovitch Spring 2009

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Cleaning Up a National Treasure

Chesapeake Bay

No, this is not about the movies starring Nicholas Cage. Unfortunately, this is real and actually very sad that we have allowed the Chesapeake Bay, the nation’s largest watershed to reach this level of pollution.

At 7,000 square miles it supports more than 3,600 species of plants, fish and animals, with 15 million people living near its basin, the Chesapeake Bay is one of the U.S. most important watersheds. It is also one of the dirtiest.

Recent surveys have revealed more than 80 percent of the water does not contain enough oxygen in the summer, killing off fish, crabs, oysters and plant life. The Chesapeake Bay Initiative, a multi-state agreement, was developed to change that.

As part of the agreement, Maryland, Virginia, Pennsylvania and the District of Columbia have agreed to reduce nitrogen and phosphorous discharge into the bay area by 2010.

Over 70 wastewater facilities will have to enhance their nutrient removal process by using more natural methods, like bacteria, instead of harmful chemicals. These efforts, along with groups like the Chesapeake Bay Foundation, are part of a larger commitment to restore the bay to its original condition.