NextGEN Gallery Thumbnail Centering

As requested on the NextGEN support fourm here is the setup used to produce the grid view layout for the NextGEN galleries on the Japanese Arts Gallery website.

Please note that the css below applies to the gallery thumbnails (eg http://japaneseartsgallery.com/gallery/woodblock-prints/osamu-sugiyama/) and does not alter the album grid view thumbnails (eg http://japaneseartsgallery.com/gallery/). The Japanese Arts Gallery site does have some very small custom PHP code changes in the NextGEN plugin but I don’t believe it affects how the css below works.

The NextGEN galleries are displayed using the standard NextGEN gallery caption shortcode.

[nggallery id=nn template=caption]

The following css is then used to tailor the standard NextGEN grid view into a custom view. I’m not a css coder or anything like that so the css was produced in part from posts on the NextGEN support forum and in part from experimentation.

The first two class definitions are to produce the custom effect – border, background colour, box shadow and so forth.

The last three class definitions are purely to center the thumbnails plus the height attribute in the “.ngg-gallery-thumbnail a” class definition which was added to cater for variable height thumbnails by aligning the captions. The height attribute is not needed there if you only have ‘landscape’ thumbnails.

Obviously the height and width settings, margins and padding will need to be tweaked if used on other sites.

For simplicity I’d recommend you start out getting the first two classes working ok and then move on to the bottom three which center the thumbnails.

/* --- start customisation of gallery thumbnails  --- */

.ngg-gallery-thumbnail-box {
/* style the box that holds the gallery title and image */
    background-color: #444444;
    border: 1px solid #CCCCCC;
    margin: 5px 5px 20px 5px;
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 14px; 
    color: #FFFFFF;
    width: 175px; 
    height: 200px;
    box-shadow: 5px 5px 5px #888888;
}

.ngg-gallery-thumbnail img:hover {
/*  Change hover color from grey to black */
    background-color: #000000;
}

.ngg-gallery-thumbnail {
/*  Needed for thumbnail centering to work */
	width: 175px; 
	height: 200px; 
    	display: table; 
}

.ngg-gallery-thumbnail a {
/*  Needed for thumbnail centering to work */
    display: block; 
    vertical-align: middle;
    text-align: center;
    height: 125px; /* make descriptions align below thumbnails */
}
.ngg-gallery-thumbnail img {
/*  Needed for thumbnail centering to work */
	float: none;
	display: block; 
	margin: 0em auto;
}


/* --- end customisation of gallery thumbnails  --- */

WP Shopping Cart NextGEN Gallery AddOn Review

This post offers a short review of our recent experience using the WP Shopping Cart Addon for the NextGEN Gallery.

The addon is a WordPress plugin (WP Simple Paypal Shopping cart) and a template file which allows you to add to your NextGEN gallery a simple shopping cart function to sell items.

Basically it provides the ability to set a price, a product description and an Add to Cart button which then appear in the caption for the NextGEN thumbnail/s. The user can Add to Cart any number of items then go to the Checkout page to review their selections and complete their payment in PayPal.

We’re not going to describe how to setup the shopping cart as that is well documented here http://www.wordpress-ecommerce.com/wordpress-shop-using-nextgen-gallery-and-wp-shopping-cart-7.

WP Shopping Cart is simple to install and easy to use, however, there are some things to be aware of.

The WP Shopping Cart Template.
The template is invoked by using shortcode [nggallery id=nn template=wp-eStore] on a gallery page (or post) and adding shortcode [wp_cart:the-product-name:price:the-product-price:end] in the Description field for the image.

Using the wp-eStore template makes the Description of the image it’s Caption and causes the Add to Cart button to appear as part of the thumbnail caption in grid view.

Whilst this is consistant with NextGEN’s – in our opinion, flawed – handling of using the Description for the Caption it can be problematic for two reasons.

(1) If like our client you use long Descriptions then that screws up the grid view appearance. The image below shows a simple version of this problem from our test site, the left hand thumbnail is what you get if you use short Descriptions, the right hand thumbnail is what you get with longer Descriptions. Our clients desciptions are in fact MUCH longer and MUCH wider than the sample shown and contain HTML formatting.

NextGEN WP-Shoping-Cart Grid View

(2) If you’ve customised your NextGEN code (eg. gallery-caption.php) to facilitate having short captions and long descriptions by using the “Alt & Title Text” field (variable ‘alttext’) as the Caption rather that using the “Description” (variable ‘description’) field then the WP Shopping Cart template nullifies that change for any gallery its used on.

Essentially you can’t have long descriptions if you wish to use the WP Shopping Cart template and maintain a sensible grid view appearance. This is not a fault with the cart plugin but is unfortunately how NextGEN works by default.

WP Shopping Cart page corruption.
Most NextGEN gallery implementations work by displaying a group of thumbnails, the user clicks on one and the full size image for the thumbnail is displayed.

Our clients NextGEN galleries work slightly (and very usefully) differently to the norm. When you click on a thumbnail, you are taken to a page (generated by NextGEN) that shows a larger image and description of the image with details like the artist name, year it was taken, edition details (if applicable) and so on. Clicking on the larger image then takes you to the full sized image.

This ‘middle page’ is slightly corrupted by the WP Shopping Cart addon whereby the Add to Cart botton appears both above and below the image and the top one includes some extraneous visible HTML like characters. The image below shows an example of this (nb. the picture itself was shrunk by me to reduce the file size to make it more viewable).

NextGEN WP-Shopping-Cart Description Page

WP Shopping Cart Addon and the WordPress Gallery System.
Although the WP Shopping Cart NextGen Gallery AddOn says “NextGEN Gallery” you can actually use it anywhere by installing plugin part and ignoring the NextGEN template for it. Then just put the [wp_cart…] shortcode on any page or post or other gallery you like.

We tested WP Shopping Cart Addon using the standard WP gallery system using the [wp_cart…] shortcode. It worked much better for us there than with NextGEN as WordPress uses Captions as Captions and Descriptions as Descriptions so it works perfectly.

The first image below shows an example WP gallery setting for an image using the [wp_cart…] shortcode, the second image shows the thumbnail grid view with Add to Cart button display and the final image shows what you see when a grid view thumbnail is clicked – very nice. This is really how NextGEN should work!

WPGallery WP-Shopping-Cart Gallery Settings

WPGallery WP-Shopping-Cart Thumbnail Page

WPGallery WP-Shopping-Cart Image Page

Summary.
Overall the WP Shopping Cart Addon for the NextGEN Gallery works well for those gallery sites that use short Descriptions and where clicking a thumbnail takes you directly to the full size image. For the rest of us there are problems as note above. It works very well with the standard WordPress gallery system.

I expect the long Description problems are not easily solvable. Potentially NextGEN could be enhanced to allow shortcodes (eg [wp_cart…]) to be used in the “Alt & Title Text” field and fixed to correctly use the “Alt & Title Text” as the thumbnail caption. WP Shopping Cart could then be updated to also use the “Alt & Title Text” as its thumbnail captions. I might get keen and raise a bug report on the Caption/Description issue with NextGEN.

Scanning HTML and PHP files for text

How to search for text strings in files using the WinOne® Command Language Interpreter (CLI).

There are a lot of questions asked in WordPress forums about how to find which file to edit to change the appearance or behavour of WordPress themes or plugins. To identify the file or files your looking for you need to scan all the files for the text your interested in. I use WinOne for this purpose.

Looking at the http://www.commandline1.com/ website it’s not really clear how useful the WinOne software is and how to use it. This therefore is an example of how to use one feature of WinOne – the “FIND” command to scan folders of files for text strings.

As a preparatory action you need to download a copy the folder/directory containing the theme or plugin files from your website to your PC. For the purposes of this demonstration I’ve downloaded a copy of the NextGEN gallery plugin to my F: drive.

(1) Download and install WinOne onto your PC. It’s currently free to use for up to 30 days and costs less than $5 to purchase a licence if you wish to continue using it after that.

(2) Start WinOne by clicking on the WinOne Command Shell icon on your desktop.

(3) Select the disk drive your files are on by clicking on the appropriate drive icon at the bottom of the WinOne window.

Disk Drive Selection

(4) Navigate to the directory your files are in using the Change Directory (cd) command to select the drive you downloaded the theme or plugin code to.

Change Directory

(5) Use the FIND command to scan the files for the text your searching for.

Command FIND
Function:
Search for a text string in the specified files.

Syntax:
FIND [drive:][path]filename “textstring” [/S] [/M]

[drive:][path]filename Specifies the text file(s) to search.
textstring Specifies the text string to find.
/M Match case.
/S Process sub-directories.

Notes:
Command FIND uses the fast Boyer-Moore Algorithm and will only search text files. Non-text file are simply skipped.
Command FIND is not compatible with the DOS command FIND.
Unlike the DOS command FIND, Wildcards are allowed for parameter filename.

Example 1 – Direct the output from the FIND command to the screen.
To find all files containing the string “alttext” enter find * /S “alttext”

Find Screen Output

Example 2 – Direct the output from the FIND command to a file.
To find all files containing the string “alttext” and redirect the output to a file enter
find * /S “alttext” > /temp/alttext.txt then open the file /temp/alttext.txt in your favourite file editor (notepad, notepad++ etc) to view the search results.

Find File Output

Having found the file or files your interested in you can open them to review the content or make changes as necessary to suit your requirements.

WinOne operates with a mix of DOS and UNIX like commands and syntax so in the above example you could for instance, append the output to a file by using >> rather than > which overwrites.

Disclaimer:
I have no financial interest in WinOne and the infomation provided here is supplied because I find the software very useful and it may be of interest to others.

NextGEN and Canonical URLs

When using the NextGEN gallery plugin you should check that none of your gallery posts or pages are incorrectly begin flagged as ‘do not index’ by WordPress automatically setting canonical URL’s.

It appears that on some NexGEN gallery sites WordPress is using the canonical setting on pages that are in fact unique and therefore should not have a canonical url set. For example, on my clients Japanese Woodlbock Prints site, pages that contain unique descriptions about the prints had canonical urls pointing back to the NextGEN galleries thumbnail page. As a result of this ‘misuse’ of canonical urls a significant part of the website was flagged non-indexable and therefore google would potentially not index those pages.

Looking at the screen capture below on the left it can be seen that SEO tools are reporting that a canonical url is being set for the page – even though the page is unique. The setting of the canonical url on that page is WordPress’s default handling but in this case it is wrong. The screen capture on the right shows the same page with no canonical url present which for this site is the correct setup.

Canonical urls were turned off on the site simply by editing the default-filters.php file to comment out the add_action( 'wp_head', 'rel_canonical' ); line.

WP Bad Use of Canonical URLs

Bad Use of Canonical URLs

WP Bad Use of Canonical URLs Fixed

Bad Use of Canonical URLs - FIXED!

Some SEO plugins allow you to set or unset canonical urls so if your using one then you’ll need to check its settings. I used All in One SEO on the gallery site with Canonical URL’s unselected in its options. Another very popular SEO plugin is WordPress SEO, it however has no setting options for canonical URL’s. It just forces them onto the user even if you edit the default-filters.php file as suggested above. We were hoping to use WordPress SEO but because of its canonical handling (or more correctly, lack of) we couldn’t use it on the NextGEN gallery site. See WordPress SEO Plugin for a possible solution to this issue – we’ve not tested it so I’d recommend you hunt down the WordPress SEO support pages on wordpress.org to see if there’s been any feedback on it.

If you are a NextGEN user I recommend that you check to see that there is no inappropriate setting of canonical urls on your content pages. Whether canonical should be turned off on a site depends on it’s impact on an individual site. For some it may be an issue and for some it may not be.

Custom NextGEN Template Extend

Every so often I like to refresh the look of my gallery which is built using the NextGEN gallery plugin. My latest update was to customise the NextGEN CSS to change the way it displays the gallery thumbnails when using the album shortcodes.

I like the gridview effect that shortcode [album id=n template=compact] provides but have been finding that it now feels a little tired. The thumbnails are small and enlarging them causes issues with the stepped border thats placed around them.

So, my question was, how to improve the look of the template=compact gridview appearance without doing anything complicated. The answer was to use the shortcode [album id=n template=extend] which provides larger thumbnails and then just tweak the CSS.

By modifying the NextGEN CSS it was possible to change the default listview appearance of the shortcode to my preferred gridview and then ‘pimp’ it a little to get a bolder appearance.

Default NextGen Album Extend Display

NextGen Album Extend before CSS changes

Custom NextGen Album Extend Display

NextGen Album Extend Display after CSS changes

The following CSS changes were used to produce the layout in the right-hand image above. Depending on what you’d like to acheive you may wish to use all or some of them. Variables such as the height, width and colour may/would need to be adjusted for your own implementation. The theme I use with NextGEN gallery is Suffusion which comes which a facility to include custom CSS changes so I don’t need to edit CSS files. My changes therefore override rather than overwrite any CSS and are also therefore always carried forward when upgrading the NextGEN plugin. If you are editing CSS files directly then be sure to save a copy of the original in case of problems.

(1) Remove bolding from the titles and center them.

/* --- start customisation of album thumbnails --- */
.ngg-albumtitle {
/* style the album titles */
font-weight: normal;
text-align: center;
}

(2) Customise the container that holds the title, thumbnail and caption.

.ngg-album {
/* setup the box to hold the album title, image and description */
height: 200px;
margin: 15px;
width: 200px;
float: left;
background: #F9F9F9;
box-shadow: 10px 10px 5px #888888;
}

(3) Hide the album photo count as my page width caused it to wrap untidily. Increasing the album container width above wasn’t possible for me as that caused another issue. This change is optional depending on whether you want this information displayed or not and how it appears which will vary depending on the width of your page. Start off without doing this and see how it looks for you.

.ngg-description {
/* hide unwanted album photo count by setting colour to same as background in ngg-album */
color: #F9F9F9;
}

(4) Center the thumbnail within the container.

.ngg-thumbnail {
/* center album thumbnail within its container */
float: none;
}

To see the new layout in action you can visit my Japanese Arts Gallery website.

Elegance 145 Theme and Visitor Stats

Since installing the Elegance Theme from Storefront Themes on client sites the vistor statistics records show unusual URL’s being recorded.

We use the Visitor Maps and Who’s Online 1.5.8.1 plugin to provide basic site visitor stats on a customers USANA Canada and USANA NZ health product sites. Both sites use the Elegance 1.4.5 theme on top of WP e-Commerce plugin. The Canadian site has only ever been using Elegance while the NZ site was migrated to Elegance from Thesis a few days ago.

On looking at the visitor stats for both sites the field “Last URL” nearly always shows the URL /wp-content/themes/storefront-elegance-1.4.5/styles/default.css. On other sites we’ve built without the Elegance theme and on the New Zealand site prior to its migration to Elegance the “Last URL” field contains proper site URL’s, not the style sheet file being reported.

The following screen capture shows what our Vistor Stats look like with Elegance installed.

View Visitor Stats With Elegance Theme Installed

How Visitor Stats display with the Elegance Theme installed.

We are assuming that for now that this is an interaction issue with the Elegance Theme so will raise this with Storefront Themes support and post their response here when available.

Update: 14 Oct 2012.
I’ve been very remiss in posting the response that Elegance support gave to the query I raised on the issue detailed. They came back quickly (unlike my update here!) with the following suggestion to circumvent the problem.

“Try making the folder ‘styles’ and adding a CSS file ‘default.css’ to it. make sure it has a comment in it as Opera does not like completely empty CSS files. Just something like
/*deliberately empty css file*/”

They have subsequently advised that this issue will be addressed in the forthcoming update of the Elegance theme so thats good news. I have to say that the support team for Elegance (Mark and Matt) are excellent and can highly recommend the theme to other users of the WP e-Commerce plugin. Not only do they handle support queries promptly they also will help users extend/customise the theme. I’ve also seen in the support forum where they will answer a support request and then also offer advice on how to correct another issue unrelated to the theme. It’s very nice to see such a professional level of support being provided.

Update: 6 Nov 2013.
It appears that the level of support provided by the Elegance support team has diminished since our last update to this post in Oct 2012.

In the Elegance support forum there are many support requests that do not appear to be responded to in a timely manner. One person we work directly with is intending to move off Elegance due to a lack of support and similar comments appear in the support forum. We therefore can not recommend this theme to our site visitors and have removed our Affiliate links for the Theme from this site.