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  --- */

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.