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.

Nextgen Gallery Plugin Caption Fix

WordPress Version: 3.3.1
NextGEN Gallery Version: 1.9.3
Plugin Author: http://alexrabe.de/wordpress-plugins/nextgen-gallery/

NextGEN Gallery [nggallery id=x template=caption] Bug

See the NextGen Caption Bug post for details of this problem and its impact.

NextGEN Gallery [nggallery id=x template=caption] Fix

The problem occurs in a number of NextGen programs including /view/gallery-caption.php, /view/singlepic/php and /widgets/widgets.php.

The ‘must change’ two for me are /view/gallery-caption.php and /view/singlepic/php as they caused visual problem with my Nextgen galleries.

I haven’t provided a fix to /widgets/widgets.php as the only impact from that I’ve noticed is puttng lots of junk into my page source. I’m trying to keep my customising to a minimum so that one can stay.

Basically the fix requires occurrences of the variables ‘description’, ‘caption’ and ‘linktitle’ to be changed to ‘alttext’ whenever they are used as titles and alt text in <href> or <img> statements. I first made these changes a long time ago and from memory had 404 errors occur when viewing the gallery (although I may have also may other changes at the same time). Either way, updating permalinks resolved that.

Here’s before and after screen caps to show what a difference the changes below made.

NextGen Template Caption Shortcode - Default Web Page Layout

NextGen Template Caption Shortcode - Default Web Page Layout

NextGen Template Caption Shortcode - Updated Page Layout

NextGen Template Caption Shortcode - Updated Page Layout

The following code was run through a converter to allow it to be viewed as text on this page – hopefully the syntax is still correct. Between the two programs I only changed three words so personally I would change those manually rather than cut/paste the whole snippet.

Nextgen Gallery /view/gallery-caption.php

Original
<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
<span><?php echo $image->caption ?></span>
</div>

Updated
<div class="ngg-gallery-thumbnail">
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->alttext ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
<span><?php echo $image->alttext ?></span>
</div>

Nextgen Gallery /view/singlepic.php

Original
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->linktitle ?>" <?php echo $image->thumbcode ?> >

Updated
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->alttext ?>" <?php echo $image->thumbcode ?> >