WordPress.org

1. WebmistressM
   Member
   Posted 11 months ago #

   I am using Custome Content Type Manger to create a product showcase (not a store) of items I wish to show my clients. At this time, I have sucessfully added custom image fields for adding multiple product images. However, it seems that the template for that custom content type is not displaying my thumbnails as "clickable" for the largest image.

   The current code for my custom type's template is:

   <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
   
   	<h1><?php the_title(); ?></h1>
   
   		<?php the_content(); ?>
   
   		<strong>Main Image:</strong> <?php print_custom_field('main-image', 'thumbnail'); ?><br />
   		<strong>Additional:</strong> <?php print_custom_field('additional-view1', 'thumbnail'); ?><br />
   
   <?php endwhile; // end of the loop. ?>

   As you can see from this page:
   http://leopardspot.endofinternet.net:81/wildgasmasks3/?post_type=product&p=106

   ...the thumbnail shows up, but I cannot click on it and have it show me the larger image.

   The closest lead I have in how to do this is by using:

   <?php
    if ( has_post_thumbnail()) {
      $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
      echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
      the_post_thumbnail('thumbnail');
      echo '</a>';
    }
    ?>

   but that did not produce the results I wanted at all. What is the hook/database calls which I am missing that would make this possible?

   On a side note:
   It is my hope that on my product (content type), all product images' thumbnails can produce a Lightbox when the user clicks to see the larger image. Is this also possible?

   http://wordpress.org/extend/plugins/custom-content-type-manager/

2. fireproofsocks
   Member
   Posted 11 months ago #

   I think you're misunderstanding what the plugin does for you: the whole issue here of getting a clickable thumbnail has almost nothing to do with the plugin and everything to do with HTML, CSS, and possibly Javascript. Using the template functions included in the function, you can get either a thumbnail version of the image or the image src etc. How you organize that to make a clickable thumbnail is entirely up to you... lightboxes, pop-ups and the like are all possible, but you have to figure out the HTML stuff yourself.

3. WebmistressM
   Member
   Posted 11 months ago #

   Oh, I understand the plugin and what it does just fine. Im just trying to find the right wordpress php code to get it to be a clickable thumbnail. The integration of Lightbox is just an afterthought and more for aesthetic enhancement. So, I could take or leave it. I just wondered if there was a lightbox plugin (out of the many I am finding in search) which might work with the Custom Content Manager plugin without conflict.

4. fireproofsocks
   Member
   Posted 11 months ago #

   Here's what a front-end dev did using the plugin and one of the thickbox libraries: http://pretasurf.com/?taxonomy=collection&term=spring_summer_2011

   Don't know if that helps, but at least you can see the Javascript libraries and the HTML used.

5. WebmistressM
   Member
   Posted 11 months ago #

   I see what you are saying. It seems that (at least from WordPress 2.8 and beyond) post-thumbnails is already included in core. However, while researching this topic, I did notice that you can add theme supprot for post-thumbnails just for posts or just for pages.

   add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add it for posts

   Is it possible that I need to add something in my functions.php file akin to the above? Im not just adding custom image fields with posts and pages, but Im actually using a whole new content type (In my case, its a content type called "product") for this multiple-thumbnails-in-a-post arrangement.

   I was trying to find out the hooks/references that WordPress includes BY DEFAULT for people who add media to a page or post's description field (through the media UI) but I have not had luck as of yet. *keeps looking*

6. fireproofsocks
   Member
   Posted 11 months ago #

   WP's default way of including "Featured Images" (aka thumbnails) is essentially to add a hidden custom field named _thumbnail_id that stores the thumbnail's id in the wp_postmeta table (this is exactly how the CCTM image fields store the data, but in this case, WP uses a standardized name for THE featured image). When you create a custom content type that uses featured images, you must add support for them to your theme's functions file by including a line like:

   add_theme_support( 'post-thumbnails', array( 'product' ) );

   When you create your post-type, the checkbox on the "Fields" tab, includes an example of what to paste into your theme's functions.php file.

   I have a feature request open in the bug-tracker to register this function automatically if that box is checked, but I haven't yet implemented it.

   The only advantage I see to using the WP default way is that the featured image controls are shepherded into a meta box; otherwise adding a custom image field accomplishes the same thing.

   If you are struggling to get data out of the wp_postmeta table, you can have a look at the get_post_meta function. Many of the template functions included in the CCTM plugin are variations of that function, so it can be a bit easier to understand how to get your data out of the database if you use a more "raw" function instead of a convenience one.

   Hope that helps.

7. WebmistressM
   Member
   Posted 11 months ago #

   Yeah. I have added the post-thumbnails in my product content type and images show up fine even with the 'thumbnail' size string added. However, Im still not getting clickable thumbnails. This is my updated template code for single-product.php which I am trying for this situation.

   <h2>Custom Fields</h2>
   		<strong>Main Image:</strong> <a href='<?php print_custom_field('main_image'); ?>'> <?php print_custom_field('main_image', 'thumbnail'); ?></a><br />
   		<br />
   		<strong>Price:</strong> <?php print_custom_field('price'); ?><br />

   Im aware that your wiki already makes mention that "print_custom_field.." shouldnt be used (using get_custom_field instead), but so far I have not gotten images to show up when using get_custom_field, but can do so no problem with print_custom_field.

8. fireproofsocks
   Member
   Posted 11 months ago #

   Re clickable images: first get a mockup working with static HTML, then you can figure out where you need to print stuff into your template.

   You can use print_custom_field() except in certain cases -- there is some confusion there (were you commenting on the wiki?). You can use print_custom_field() in all cases EXCEPT when you are returning an array value. Something like this in your template file does absolutely nothing:

   <?php get_custom_field('my_image'); ?>

   It literally does nothing because it gets the value for 'my_image' and then does nothing with it -- it doesn't read it into another variable and it doesn't print it. You'd need to do something like this:

   <?php
   $x = get_custom_field('my_image');
   print $x;
   ?>

   Or this:

   <?php
   print get_custom_field('my_image');
   ?>

   Some output filters cause an ARRAY to be returned, so in PHP, you can't simply print an array -- you have to iterate over its contents. So if you're using an Output Filter that causes an array to be returned, you'd have to something like this:

   <?php
   $my_array = get_custom_field('my_image');
   print_r($my_array); // <-- see what's in there
   // iterate through the array
   foreach ( $my_array as $item ) {
      print $item;
   }
   ?>

   Make sense?

9. WebmistressM
   Member
   Posted 11 months ago #

   That makes much more sense. So, I managed to fill my template with:

   <strong>Main Image:</strong> <?php print get_custom_field('main_image', 'thumbnail'); ?><br />

   Now, to get this thumbnail sized image to be "clickable".

   PS: Yes, Im the same gal commenting on your wiki.

10. fireproofsocks
    Member
    Posted 11 months ago #

    Glad you're making progress. Again, get it working with static HTML, then it'll be pretty clear what bits you need to generate dynamically using the various template functions.

11. WebmistressM
    Member
    Posted 11 months ago #

    Yeah. I did already do a test in the most simplest of ways, by using the full image URL in the <a href tags. Just gotta tell it to do it dynamically. Most documentation tells you hwo to do it with posts and page template functions so I just need the proper way to do this with custom fields (by using the custom field's name)

12. fireproofsocks
    Member
    Posted 11 months ago #

    It shouldn't be that hard: just print the image's src where you need it, and print the thumbnail where you need it. I'd do it without the template functions to make it easier: all of those functions are merely for convenience, so if they're tripping you up, consider simplifying.

    E.g. if your set your image field to use no output filter (i.e. raw), then you can work with the attachment_id of the referenced image, something like this maybe:

    <?php
    list($thumb_src, $thumb_w, $thumb_h) = wp_get_attachment_image_src( get_custom_field('my_image'), 'thumbnail');
    
    list($full_src, $full_w, $full_h) = wp_get_attachment_image_src( get_custom_field('my_image'), 'full');
    ?>
    <a href="<?php print $full_src; ?>"><img src="<?php print $thumb_src; ?>" /></a>

    Again, it's really all a matter of the HTML.

13. WebmistressM
    Member
    Posted 11 months ago #

    yeah. I had tried about every setting except "raw" only because your YouTube cast mentions that its not a very intuitive format compared against the others. Looks like I got alot of repeats of this code (in your last post) since each product has 3-5 images.

14. fireproofsocks
    Member
    Posted 11 months ago #

    I got soooo many emails from people who didn't understand what the raw number represented that I devoted special time to explaining it. I warned against it explicitly in the video because for the most part, people had no idea what was going on under the hood and wanted some kind of magic solution.

    Yeah, you'll need to do some legwork if you've got a lot of custom images like that, but that's just the nature of it: custom content requires custom templates. You're manipulating the underlying data beyond how it is stored in the database, so you'll need additional code. The more "pure" alternative would be to upload 2 images: one a thumbnail and one a full sized image for each image in your product.

15. grassychops
    Member
    Posted 4 months ago #

    Hello
    I too am having problems with getting the lightbox to work...
    I am running CCTM 0.9.5 on WP 3.3.1 Multisite

    Having created a CCT 'gallery' and using the repeatable image, outputting to array - I am using the code given in the template.

    Checked the source code and it is supplying all the width, height, src but no rel= lightbox which I assume is the only reason the images are not clickable?
    Having spent three days trying to find out the right way to do it, I reluctantly call on your assistance. I appreciate that you are busy and I am a total newb to the whole thing. So many apologies. Having read through every post on CCTM I am struggling with sorting the HTML out to get it to add the rel link :s

16. fireproofsocks
    Member
    Posted 4 months ago #

    This really isn't a CCTM question: it's a question of getting your HTML/CSS/Javascript all working together in your templates. The current dev version includes a new "gallery" output filter to make this easier for you to format (see http://code.google.com/p/wordpress-custom-content-type-manager/wiki/gallery_OutputFilter), but how you want to format your images (lightbox, slides, whatever) is entirely up to you: you'd have the same task ahead of you if you weren't using the CCTM.

    The way I always approach template integration, is I demand that the designer provide functional HTML, then I identify which portions need to be dynamic, then I make my code generate the necessary HTML dynamically. Do you have this working in a static HTML file? If yes, then you know exactly which HTML needs to be generated.

17. grassychops
    Member
    Posted 4 months ago #

    Thank you, it is all becoming a little clearer - I have utilised the new 'gallery' and it now shows the rel=lightbox, but there is no image? the line of code is:
    <?php print_custom_field('gallery:gallery', '<img height="[+height+]" width="[+width+]" src="[+guid+]" title="[+post_title+]" alt="[+alt+]" class="cctm_image" id="cctm_image_[+i+]"
    rel="lightbox"/>'); ?>

    I am obviously missing something?? When I view source, all the fields are empty...

18. fireproofsocks
    Member
    Posted 4 months ago #

    What's the name of your field? "gallery"?

    Put this right above:

    <?php print_custom_field('gallery:raw'); ?>

    Then we can see what's actually stored in the field vs. how you're trying to format it.

Reply

You must log in to post.