Question

I am working on a site with WordPress for a client who wants to showcase her products online, but does not want to sell them over the web. I have a simple photo gallery set up with the NextGEN Gallery plugin. Upon clicking the thumbnails in the gallery view, instead of simply showing them in a lightbox or their own page, I would like to add a “details” page for each photo – kind of like the individual product pages on a shopping site, but without any of the shopping functionality. Would it be possible to do this using NextGEN gallery or another plugin, or do I have to do it from scratch (and how would I do that)?

Answer 1

Because NextGen doesn’t actually create a WordPress ‘Page’ to link the single image to, you may be better off using the built-in WordPress Galleries (You may of seen the shortcode). When you upload an image to a page or post, WordPress stores that image as a post in the wp_posts table, alongside all your other posts and pages.. with a post_type of ‘attachment’, and adds it to a ‘Gallery’ for the post or page. You can manage the current gallery for any page or post by clicking the ‘Add Media’ icon above the text editor. While the shortcode is quite limited, you can use code in your theme to display the gallery and images anyway you want.

If it was me, I would make a ‘Products’ page and individual ‘Product’ pages as child pages of ‘Products’ (or if you want more flexibility, use a custom post type for the products) and then upload all the product photos into the ‘Product’ page galleries (creating a gallery per product) – and setting the primary image as the ‘Featured Image‘ for each product page. Then in your ‘Products’ page template (page-products.php) I would make a loop to display all the individual Product page’s featured images.. something like..

<?php
    //Add this to your 'Products' page temaplte, page-products.php
    $products = new WP_Query(array(
        'post_parent' => $post->ID,
        'posts_per_page' => -1
    ));
    while ($products->have_posts()) : $products->the_post() ; ?>
        <a href="<?php the_permalink() ?>" title="<?php the_title() ?>">
            <?php the_post_thumbnail() ?>
        </a>
    <?php endwhile;
?>

That will create a list of the Product featured images, and you can use CSS to adjust the display – and each featured image will link to the individual product page.

Then in your individual Product pages (you can use a page template to target all of them), you can display the individual product gallery (like detail shots of the product) using get_children() or use the_post_thumbnail() again to display a larger close-up version of the primary photo. And of course, then you can use the post content of your individual product page to display the info text for each photo, like so:

<?php
    /* Template Name: Individual Product */
    while (have_posts()) : the_post();
        the_post_thumbnail();
        the_content();
    endwhile;
?>

To take it another step further, you could add all sorts of other data about the individual product with custom meta boxes, and display them on the side of the page or something.. like ‘Product Size’, ‘Color’, ‘Foo’, ‘Bar’.. anything really. Hope that helps!