Apr 192013
 

Portfolio Slideshow is a plugin that will allow you to have a gallery set up on a page (or pages) that contains thumbnails along with a selected image. This is great for websites where the main focus is visual. I’m using for a new site for Li Clement, a North Shore-based artist who wanted to create a portfolio site of her work.

Screen Shot 2013-04-19 at 5.13.49 PM

If you have Portfolio Slideshow installed, this is how you go about creating a gallery on a page or post.

Step 1: Open up the page you want to add images to.

toolbar-pages

In the editing window, you will a shortcode (code between square brackets) that looks like the image below.

shortcode

Step 2: Click on the Add Media button in the top left corner above the edit window

addmedia

Step 3: Click on Upload Files to begin adding images.
uploadfiles

Step 4: Find the image you want to add on your computer.  (Note, your server/hosting provider/wordpress itself will not like handling files that are too large.  I usually try to use images that are 700 pixels wide/tall at most).

With an image selected, click on Open to begin the uploading process.

openimage

Step 5: Once the image is uploaded, it will appear on the left as a thumbnail and you can use the window on the right to add a description. (Note: In the Portfolio Slideshow gallery settings, you can choose whether to display titles, captions or descriptions.)
adddescription

Step 6: Repeat steps 3-5 for as many images as you would like to add. You will see the images that are going to be in the gallery down below all the bigger thumbnails. (see below)
selectedimages

Step 7: Once all your images are uploaded, click the little black X in the top right of the Add Media window.
clickthex

Step 8: Click Update to save your changes and then view the page.
updatebutton

 April 19, 2013  Posted by at 5:34 pm Tutorials, WP Plugins Tagged with: , , , ,  3 Responses »
Nov 132012
 

While working with a new client on a site to showcase their beautiful photos of Ireland, I got to work on my first Squarespace site and it’s (mostly) a great experience so far. My only issue in working on it is that a few things that should be made obvious (like how to add a gallery page) are obfuscated by a GUI that’s so “slick” it may leave some less web savvy would-be converts in the dust. Since the majority of people who want to have a gallery site want images to be thumbnails in a grid, I thought I would post a quick tutorial on how to achieve this.

NOTE: This tutorial assumes that you’ve already either signed up for a squarespace site or you have a trial version that you are testing out.

Step 1: With your site open and signed in, click in the lower right-hand corner on the little symbol that looks like a round cog in order to open up the dashboard.


Step 2: Once you are in the dashboard, make sure the “eye” icon is selected. This is how you manage the content (navigation, posts and pages) for your site. You will see on the primary and secondary navigation lists that there is a button to add a page, so click that wherever you want the new page to be.


Step 3: You will see that clicking “Add Page” brings up a window with a menu of options. You would think this is where you select “Gallery” but not in this case. Instead, click “Page”.


Step 4: In the window that appears after selecting “Page”, you will enter the title of your new page and press “save”.


Step 5: Now, once that page is open for editing, go up to the top right and you will see a black button that contains “Add Block” so click on that.


Step 6: Click on the Gallery selection to get started on adding a gallery to your new page.


Step 7: Choosing the Gallery button will bring up a window where you can start formatting your gallery. Based on how many images you think you will have, select how many rows you want your thumbnails to display in. Also, you may want to select “Square Thumbnails” and “Lightbox” so the gallery will have a clean visual appearance and so users can click on any thumbnail to open up a slideshow lightbox.


Step 8: Now you are ready to add your initial batch of images! Just click on the word “content” in the top right of the gallery settings window and that window will show a faint plus sign. Either click on the plus sign to begin adding images or simply drag and drop images from your hard-drive into the window.


Step 9: Upload your images by surfing to the folder you want to use and then selecting the ones you want. On a mac, command+click will let you select multiple images.

Step 10: After all the images have been uploaded, click Save to save your gallery.

 November 13, 2012  Posted by at 3:05 pm Lifehacks, Squarespace, Tutorials Tagged with: , , , , ,  No Responses »
Aug 172012
 

I recently started work on a new site for a photographer and we decided to try the Deep Focus theme from Elegant Themes. Since this theme utilizes the Custom Field function to create galleries based on Posts, I thought this would be a good opportunity to create a tutorial for adding images to a gallery page and editing the gallery as well.

For purposes of brevity I will assume that you have already downloaded and installed the Deep Focus theme from Elegant Themes as well as uploading some images that you want to use in some galleries into your dashboard’s Media Library. I would recommend pre-loading images because: a) with the new Media Uploading function you can upload multiple images at once and b) this will make step 1 go a lot smoother; especially if you open a second tab in your browser for creating your new post(s) and then you can switch between the two tabs to make your work-flow quicker.

How Does The Gallery Get Created?

Deep Focus as well as the Envisioned theme use a combination of Posts and Pages in their theme functions to create gallery pages for a site. If you want to create a gallery for Portraits, for example, what you do is create a new Page in WordPress, title it Portraits and then select a template for that page (Gallery or Portfolio). Once you have selected that template, you will see a dropdown menu appear that allows you to select which Category of Post will be used to create the photo gallery on the page. For example, on the site I am currently working on, I created a Page called Newborn Portraits and then a Category called Newborn Portraits.

Once you have your Page and your Category set up, it’s time to start adding images!

STEP 1: Sign into your WordPress dashboard and go to Media Library.

Choose an image that you would like to place in a gallery page. Hover over the image to get the quick-edit menu to pop up and select “Edit”.

STEP 2: When the edit window for that image opens, you need to grab the url for the image (see below)

Just click and drag across the url to grab it and copy it to your computer’s clipboard.

STEP 3: Now go to Posts > Add New to create a new Post that will contain that image. When you are in the New Post window, give the Post a title. This will be what appears as the image’s title as it appears in its gallery Page. Also, make sure to select what Category the Post will be (i.e. Newborn Portraits). This is what tells the theme where the image should appear.

Wait! Shouldn’t I write something in the edit window?
You can if you want some information about the image to show when a viewer clicks on it in its gallery Page. When a viewer is looking at the gallery Page and hovers over an image, there are two options to view the image: the “magnifying glass” option will open up a slideshow window on the same page so they can view all the images that way. The “zoom-window” option will go to the image’s Post in a different window and they can see the image in Post format with the text that you added.

STEP 4: Now you are going to tell the Post which image to show. Scroll down past the edit window and you should see an option called Custom Field. (If you don’t see it, don’t worry, just go to the top right corner of the dashboard and click on “Screen Options” to select “custom fields” and add it to your editing options). There should be a dropdown menu of Custom Fields that you can choose from. You need to choose the field “Thumbnail”.

But I don’t see Thumbnail!?
No worries, you may need to simply add it in yourself. Just click “Add New” and type Thumbnail.

STEP 5: Now, next to the Thumbnail custom field, you are going to paste in the url of the image as the value. Make sure you click “Add Custom Field” when you are done!

STEP 6: Add tags if you like, (I think it’s good practice to stay in for SEO and Search purposes) and click “Publish” in the top right.

Now the image should appear in the gallery!

And that’s basically it. Any questions?

How can I change the order that my images appear in?
This can be done using the edit function for the date the post was published. In the Post’s edit window, simply click the word “edit” next to the “published on” date and alter it so that its date/time is before or after the image that you want it next to. Then, click “Update” and check that the new order is showing.

How can I remove an image from a gallery Page?
You can change the Publish status to “Draft” in the edit window and click “Update”. This will remove it from the lineup.

How can I show the same image in two gallery Pages?
Easy, just select more than one Category in that image’s Post.

 August 17, 2012  Posted by at 1:59 pm Tutorials, Wordpress, WP Themes Tagged with: , , , , ,  2 Responses »
Mar 072012
 

Recently, I have been working on two sites that required that certain types of posts be listed on certain pages. This goes above and beyond the original usage of posts which was to be a list of brief news items listed on the page designated to be your blog in chronological order. So I had to find a way to make it easy for clients to add info and control when and where it appears on their site. Luckily I found the List Category Posts plugin by Fernandobt.

It’s what you call “elegance in its simplicity”. You assign a post to a particular category, then create a Post or Page and at a bit of short code like the example below.
[catlist id=8 content=yes orderby=date order=DSC numberposts=-1]

To break it down a little:

catlist id=8:this is the number that WordPress assigns to a category you create. How to find that? Go to your dashboard, and hover over Posts to make the Posts menu appear on the right.

Categories can be found in the Posts section in your WP dashboard

Then, in the next window, you should see a list of your post categories. To find its id, simply hover over the name and you should see a url pop up at the bottom of your browser window:

look for where it says category&tag_ID=8 and that's the number of your category

content=yes: This parameter tells the plugin how much of your posts you would like to display on a page. Another choice would be excerpt=yes if you just want to show some of your text.

Tip: thumbnails=yes can also be placed in your shortcode if you would like to show a thumbnail image from your post on the page. Then, either the first image in your post or its Featured Image will be displayed in your post list.

orderby=date: Shows posts in the order of their publishing date. Want to have fun with that? Read this.

order=DSC: (Or, ASC) DSC is short for descending. So the posts arrange themselves by publishing date, with the most recent at the top. ASC will arrange them from oldest at the top to newest at the bottom.

numberposts=-1: This is a good one to know. Say you have a lot of posts from a particular category and they all have to show on the page? Setting the number to negative 1 (-1) will display them all. You could also set it to a number like 10 or 7 if you would like only the most recent posts to display for example.

There are lots of other parameters to use, but these few have served me well on at least 3 different projects so far.

Kudos to Fernanobt for not only creating such a useful tool, but also on a great job documenting how it can be used!

 March 7, 2012  Posted by at 11:24 am Tutorials, Wordpress, WP Plugins Tagged with: , , , ,  No Responses »
Mar 032012
 

I have worked on a couple of projects over the past few months that both needed similar “tweaks” to the usual method WordPress uses to order Posts as well as delving into the various ins and outs of ordering product listings in sites that use the WP E-Commerce plugin. It’s basically very easy. All it takes is altering the date a post or product is published!

To Order Posts

Step 1: Get a strategy in place. Since you are going to be setting your site’s Posts to arrange themselves according to date of publication, what kind of date range should you use? If you are going to be adding things frequently to a particular category, then space their dates out by a few days or more. You don’t have to worry too much though. The publication date also includes a timestamp so you can go down to the minute if necessary. Sometimes it helps to list the desired order of your Posts on a piece of paper and then put a date next to each so you can keep track of what should show up where in the new lineup.

Step 2: Log into your site’s dashboard and find the posts to put in order.
If you need to change a lot of posts’ publish dates, then the most efficient method is to use “Quick Edit” mode. Click on “Posts” in your left toolbar and you will see all your Posts listed. Hovering over the title of a Post makes a few choices available directly underneath (Edit, Quick Edit, View and Trash). If you click on “Quick Edit” a dropdown edit window appears.

Quick Tip: Got a lot of posts to make quick changes to? At the top of your Posts’ listings, there is a dropdown menu of categories. Select one there and click “Filter” to view only the Posts in a particular category.

Step 3: In Edit (or Quick Edit) go to the published date. In Edit it will be to the right, where it says “Published”. In “Quick Edit” it wil be underneath the slug for the Post’s title.  Click on the Edit link next to the date to change it. Once you put in the new date, click “OK” and click the blue “Update” button to save the new published date.
Continue to do the same with the other Posts and then they should be displayed in their revised order on the site.

To Order Product Listings Using the WP-Ecommerce plugin

Step 1: Same as ordering Posts, get a strategy together for ordering your Products. In theory, there is a way that you can custom order your Products using the “drag and drop” method, but I have come across cases where it didn’t work on a site for whatever mysterious reason (maybe the choice of theme?).

Setting Your Products Page to Display Products based on Time Uploaded

You can set your Products Page (the one that can showcase all your products on the site), to display Products by Time Uploaded. In order to set this up, go to your left dashboard toolbar and hover over Settings. Select Store and then in the next page, click on the Presentation tab. Scroll down to where it says “Product Page Settings” and where it says “Sort Product By” select “Time Uploaded” from the dropdown menu.

Again, if you are going to be constantly adding new products, make sure you have enough “time” between Product listings to have some wiggle room.

Step 2: Log into your dashboard and in the left toolbar, go to Store. Hover over it to bring up the quick-jump menu and then select “Products”.

Step 3: You will then see a page that lists all the Products you have on your site (it may be a few pages if you have a lot of products). Click on the Product name to open up its Edit window and then change the Published date and save your changes. Continue to do this with all your Products and then view your Products Page to make sure the order is correct.

The Publish panel on the right side of the Edit Product window

Changing the date the Product was published (you can also change the time too!)

The new date has been entered, now click "OK"

Now that the new date has been saved, click Update

Sep 222011
 

Now that you have created a site using WordPress, it’s not unusual to open up the dashboard for the first time, and sit there thinking “Now what do I do?”.  The greatest advantage of developing with WordPress can also be your Achilles’ heel.  Sure you can edit your site at will, but for people who aren’t familiar yet with all the tools available to them, knowing what to do and how to do it can feel a little overwhelming at first.  Hopefully, this will help you not only with the theory of how to keep your site fresh, but also with the nuts and bolts of editing your site as well.

First and foremost, a web site is powered mainly by great content. A web site exists to inform the user about something, whether it be the different products or services a business offers or expert advice. So the most important thing about running a WordPress-powered site is knowing how to add content in a way that makes sense and is an efficient use of a site owner’s time.

Step 1: Page or Post – What kind of content is it?

In the beginning, WordPress was developed as a blogging platform. People logged into a “dashboard” and created “posts” which were then displayed on the site in the order that they were created. There was an archiving system that grouped posts by 1) Publish date and 2) Category they were assigned. Then, a separate system was developed as part of WordPress that enabled people to create “pages”. Pages are a way for a site to have content that is always in the same location in the site’s navigation. That way, people who were looking for information about your site quickly, could always find it in the same place instead of having to hunt through the archives.

So how do you know which content should be a “post” and which should be a “page”? There is no definite rule, but the advice I give people is that “posts” should be considered like a press release that you would send out about an event, or a sale, or some item of news about your business or subject, and “pages” are like a brochure that gives a reader more “static” information such as hours of operation, mission statement, location etc.

Step 2: Getting the writing done.

Everyone has a writing process; a way of creating that they are comfortable with and helps them think things through. Lucky for me, I just open my site’s dashboard, select either Post > Add New or Page > Add New and start typing away. Other folks need to write it out long-hand and then edit from there. A lot of clients I’ve worked with are so used to creating content in Microsoft Word that they find their words flow better by opening a new document and going from there. All very valid approaches, but trying to “pour” the content into the dashboard editing window and end up with the correct result is reliant on a few simple practices.

Write Early, Write Often.

Put up a post about your business’s upcoming event, new client or special sale as soon as possible.  And keep your audience informed about things as much as possible.  You don’t need to post new content every five minutes, but you will find that if you keep up a pace that works for your audience, they will remain loyal and even bring in more readers.  Pages don’t require as much upkeep, but it’s always a good idea to give your site’s pages a quick read-through every few months.  That way, you can see it with a fairly fresh eye and decide what needs tweaking.

You’ve Got Competition, Make It Interesting.

Since a picture can say a thousand words, let that work for you.  There are quite a few decent online stock image resources that can really keep a reader glued to your content.

Step 3: How To Create A Post

Think of the 6 tenets of journalism; Who, What, Where, When, Why and How.  Write the specifics down on paper if it helps.  Then, go to your site’s sign-in page (http://yoursitesname.com/wp-login.php) and go to Posts> Add New. You will see a page that looks like the picture below:
The first step is to create a title.  Keep if brief, and try to use words that people are likely to use in a search for similar content.  For instance, if your post is going to be about an upcoming sale your business is having on lawn furniture, you could title it: Lawn Furniture on Sale During September!

Now it’s time to start creating the body of your content.  Take a look at the top of the editing panel:

The 3 areas circled above are key to creating a post or page.  From the left, there is the Upload/Insert media panel, the “Kitchen Sink” toggle button and the “Visual” or “HTML” selection.  It’s a good idea to view a post or page you want to edit in HTML mode before you start to work.  Sometimes there may be code that you don’t want to type over by accident that’s only visible when you look at the HTML of your content.  If you click on the button in the far right of the toolbar, you will see the extra editing choices available in “Visual” mode.

To read a more detailed account of what the various buttons at the top of the editing window can do, check out: How To Use WordPress Part 1.

Tip: If you want to see what your content will look like “live” on the web, you can click “Preview” either in the top right corner of the edit window in the “Publish” panel, or next to the update notice that will appear above your title after you have saved your draft.

Step 4: Making Your Post Easy To Find

Posts are different from Pages not only in what they contain, but how they are organized on your site.  They are automatically displayed in chronological order on the page designated as your Posts page (Settings > Reading).  However, you don’t want your readers to have to hunt through your posts month by month to find something.  This is where Categories and Post Tags come into play.

Categories are what I like to think of as the Big Topic labels for your Posts.  Think of going into a library and having to look for a book about the Civil War.  You know that you need to look in the History Section (Category) under American History (an example of a sub-category).  If the library is well-organized into categories and sub-categories, you probably don’t even need to go through a card catalog right?

Try to come up with a system for creating categories before you put up too much content.  If people find your posts easy to find, they’ll keep coming back for more!

Whenever you write a post,  one of the last steps before hitting “Publish” is to either select a relevant category(s) from a list of the ones you have already created, or, to create a new one by clicking “+ Add New Category” and saving it.   Once you have added a Category, your new post is automatically assigned to it.  Categories can also have a hierarchy so you could have a Post entitled “Musings on the Battle of Bull Run” under both History, American History and Civil War history.  Then, if a reader wants to find Posts specifically about the Civil War, they can select from the Civil War category or if they want to find all the Posts about history, they can select History.

Tags are an even more detailed way to organize your Posts by “tagging” them with keywords.  To continue the analogy of a library, you can have very specific topics within the category of the Civil War such as “Bull Run”, “Manassas” and “Shiloh”.  In order for readers to find posts that are about specific things, it’s always good to create a tagging system based on keywords that you think readers are likely to use to search for your content.  I am always a big fan of the Tag Cloud, a widget (sidebar feature) that displays your Tags in a cluster of words sized according to how often a Tag is used.  For example, I do a lot of writing about WordPress for this site, so the tag “WordPress” is featured in big letters in the tag cloud you see to the right of this post.  If you can’t remember if you have used a particular tag before, you  can always click on “Choose from the most used tags” to see.

Step 5: Creating and Editing Pages

Pages differ from Posts in a few basic ways:  1) They stay in the same “location” of your site as components of your site’s navigation bar (such as the one running across the top of this page).  2) They can be organized into Parent Pages (for example: About) and then Child Pages (such as About Jenn).  3) Pages do not have Categories or Tags assigned to them.

To create a new Page, you simply go to the left toolbar of the Dashboard and select Pages > Add New.  The editing window that appears is basically the same as the one for Posts so no need to go into too much detail here.

To edit an existing page, you can access it a couple of ways.  If you are logged into the site, you can see a small link on each Post or Page called “edit” (when you are looking at the site itself).  Click on “edit” and you can go immediately to the edit window for that page.  For my clients’ sites, I usually use a plugin called “Dropdown Page Manager” that installs a list of all a site’s published pages under the Page section of the toolbar.  Then it’s just a matter of clicking on the title of the page you would like to edit.

However, if you don’t have that plugin installed or, you want to work on the draft of a page you began in an earlier session, click on “Pages” at the top and you will see a list of all your site’s pages, including drafts.  You can either click on the title of the page to open it up, or you can click the Edit link that you see when you hover over the title.

Quick-Edit is another feature that pops up when you hover over the Page title (or Post for that matter) and it can be useful when you want to change certain things about the content.  Clicking the words Quick Edit will open a small window directly on the same page where you can change the title of the Page, its place in the Page hierarchy (for example, selecting a Parent page so the page will now appear in the navigation’s dropdown selections) and other features as well.

You could change the template a page has assigned, if you have other ones available, whether to allow readers to comment on what you have written, the status to Draft, Pending Review or Published and even the date something was published (handy for when you don’t one one post appearing before another chronologically).  Password or Private is used for content that you may only want to be accessible for people with the right credentials.

Coming soon: Part 2: Images.

 September 22, 2011  Posted by at 3:05 pm Wordpress Tagged with: , , , , , , , ,  No Responses »
Dec 312009
 

UPDATE: January 15, 2013- Hello everybody, I can’t believe how popular this post has gotten! In light of this, and in NextGEN’s acquisition by Photocrati I have installed the latest version of NextGEN on this site and am in the process of putting together a new client gallery with it. I am hoping to have a new version of this guide up soon. Thanks for stopping by! If you have any questions feel free to comment below or here.

As much as everyone loves the NextGen Gallery by Alex Rabe (myself included), a comprehensive guide to how to actually use it seems to be as scarce as the proverbial hens’ teeth. The first time I installed it for a client, I have to admit the sheer amount of options and settings was a little overwhelming. At any rate, you came here for a manual so here it is. Continue reading »

 December 31, 2009  Posted by at 12:33 pm Tutorials, Wordpress, WP Plugins Tagged with: , , , , , ,  37 Responses »
Jan 242009
 

So you want to include a link in your WordPress or Blogger site, but the usual link color won’t do? There’s an easy way to color your links with inline styling! Since this takes advantage of the cascade function in CSS (Cascading Style Sheets), it’s a great way to add extra spice to a link you want your readers to really notice.

Continue reading »

 January 24, 2009  Posted by at 4:57 pm Lifehacks, Tutorials, Wordpress, Wordpress Hack Tagged with: , ,  1 Response »