PHP 5.5 Plugin Issues

This is just a short ‘heads up’ to anyone running either of the plugins NextGEN 1.9.3 (an old version) or Statpress 1.4.3 (not updated for 12 months) that neither appear to work since my host upgraded my sites to PHP 5.5.

This isn’t to say that there is any fault with PHP 5.5 or the plugins mentioned. Both plugins are old so upgrading to a later version if available would be the likely fix for any issues encountered.

In my case as Statpress has no later version I’ve deleted that plugin. With the NextGEN gallery plugin I can’t upgrade quickly as I’ll need to investigate migrating some custom code changes so for now have downgraded the PHP version for the site running the NextGEN plugin to PHP 5.3 which has resolved the issue there.

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.

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.

Yoast SEO and NextGen Canonical Issue

WordPress Version: 3.3.1
Wordpress SEO Version: 1.1.7
Plugin Author: Joost de Valk

Problem: Canonical links turned on for non-duplicate content pages.

Having been happily using Yoast’s WordPress SEO on a customers WP e-Commerce health products site for some time I decided to implement it on my Japanese Arts gallery hobby site.

The Japanese Arts gallery site uses the NextGEN plugin to manage the gallery albums and images. Having deactivated the All in One SEO plugin and Google XML Sitemaps I installed and activated WordPress SEO by Yoast and everything looked pretty good. The settings import function is excellent – loads of time saved there.

On closer checking however, it appears using WordPress SEO has reintroduced a canonical URL problem I previously had on the site.

The problem is that after clicking on a gallery thumbnail the NextGEN generated image page that’s opened has a canonical URL set pointing back to the gallery thumbnail page. However, both the gallery thumbnail page and image page have unique content. The vast majority of my content is on image pages which include text/descriptions so to have them listed by site review tools and potentially treated by Google as not to be indexed is a serious issue. I resolved this previously by commenting out the add_action for rel=canonical from the default-filters.php file in WordPress.

Obviously this is not a ‘fault’ with WordPress SEO given this problem existed previously – the problem is that the plugin does not let the user choose if they want to use canonical URL’s or not. The resolution is simple – remove WordPress SEO and go back to using All In One SEO which very usefully has a setting to turn canonical URL’s on or off. Unfortunately Yoast’s WordPress SEO doesn’t have such a feature (please correct me if I’m wrong). I’m not sure why that functionality isn’t available given the number of forum issues that are reported for canonical URL problems.

An additional thing I noted in the short time I used WordPress SEO on the gallery site was that the xml sitemap function didn’t include any of my sites translated pages. I use a translation plugin to bulk up my site and because many of my visitors are from non-english speaking countries. My previous sitemaps generated by Google XML Sitemaps do include the translated pages and Google has most of them indexed.

If your a NextGEN gallery user be sure to check that ‘sub/child/nested’ pages of your site are not set to be non-indexable (even though Google doesn’t always adhere to that). You may be better served using All in One SEO with Google XML Sitemaps and Robots Meta.

Yoast WordPress SEO Canonical URLs Turned On Example Image

Yoast WordPress SEO Canonical URLs Turned On

Update: 2012/05/25 – Response from Joost de Valk (aka Yoast).
Hows this for great service. We posted a short version of the post above on the WordPress forum and Yoast responded the same day.


I’m not going to add a setting for it, as that is bound to confuse people, but adding this to your functions.php does it nice and simple:
add_filter( 'wpseo_canonical', '__return_false' );

If your having a problems with canonical URL’s while using WordPress SEO then using the above filter will turn them off.