Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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 <a href="http://codex.wordpress.org/Gallery_Shortcode" rel="nofollow">[gallery]</a> 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 [gallery] shortcode is quite limited, you can use code in your theme to display the gallery and images anyway you want. </p> <p>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 <a href="http://codex.wordpress.org/Function_Reference/register_post_type" rel="nofollow">custom post type</a> 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 '<a href="http://codex.wordpress.org/Post_Thumbnails" rel="nofollow">Featured Image</a>' 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 <a href="http://codex.wordpress.org/Function_Reference/the_post_thumbnail" rel="nofollow">featured images</a>.. something like.. </p> <pre><code>&lt;?php //Add this to your 'Products' page temaplte, page-products.php $products = new WP_Query(array( 'post_parent' =&gt; $post-&gt;ID, 'posts_per_page' =&gt; -1 )); while ($products-&gt;have_posts()) : $products-&gt;the_post() ; ?&gt; &lt;a href="&lt;?php the_permalink() ?&gt;" title="&lt;?php the_title() ?&gt;"&gt; &lt;?php the_post_thumbnail() ?&gt; &lt;/a&gt; &lt;?php endwhile; ?&gt; </code></pre> <p>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. </p> <p>Then in your individual Product pages (you can use a <a href="http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates" rel="nofollow">page template</a> to target all of them), you can display the individual product gallery (like detail shots of the product) using <a href="http://codex.wordpress.org/get_children#Examples" rel="nofollow">get_children()</a> or use <a href="http://codex.wordpress.org/Function_Reference/the_post_thumbnail" rel="nofollow">the_post_thumbnail()</a> 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: </p> <pre><code>&lt;?php /* Template Name: Individual Product */ while (have_posts()) : the_post(); the_post_thumbnail(); the_content(); endwhile; ?&gt; </code></pre> <p>To take it another step further, you could add all sorts of other data about the individual product with <a href="http://codex.wordpress.org/add_meta_box" rel="nofollow">custom meta boxes</a>, and display them on the side of the page or something.. like 'Product Size', 'Color', 'Foo', 'Bar'.. anything really. Hope that helps!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload