Grow your CSS skills. Land your dream job.

Multiple images for custom posts and color variation

  • # April 24, 2013 at 7:51 am

    Hey Guys this is my first post here. I dig for this high and low over google in hope that I will find my answer. I’m trying to do something using WordPress and custom post types.

    So I hope that my english is not so bad. What I want to achieve:
    1. Create custom post type called Shoes – done.
    2. For every custom post I want to be able to upload multiple images (max 12 min 4).
    3. If a custom posts have 12 images – this means I will have 4 image / color. Eg: 4 images for a shoe which is blue. The same shoe will have Red color, another 4 images and so on.
    4. I did create a page to display all the shoes custom posts. Every shoe post will link to a single shoe page. For that I create a template called single-shoe.php.
    5. I want to have a big image on the left and bellow 3 little thumbnails .
    So when some one will view a single shoe, first they will see a big image, and bellow the big image other 3 little thumbnails. When they will click one of the little thumbnails the big image will be changed with the one corresponding to the little thumbnail.

    The first set of images (one big thumbnail + 3 little thumbnails) will be for example for the color black.
    On the right of this section (1xbig thumbnail + 3xlittle thumbnail) I want to place a color variation. Some little boxes (10px x 10px) which will have a background of red, blue, black, etc). When a user will click on the red squre on the right, the images set (big + 3 little thumbnails) will display only the images in red. And so on.

    I don’t want somebody to paste me the hole code, I just want some ideas, on how to make this happen, maybe some plugins, or maybe some articles or some ideas. I’m not talking about code necesary….how do you guys will think of this if you were to implement this on your project.

    I know there are some oscommerce plugins but they don’t change the images based on colors. They only have a dropdown with the colors name.

    For you guys to better understand this I have a link for you, but that website which is in development is using prestashop.

    [Example](http://beyzabranding.com/store/en/6-maly-for-iphone-5.html “Example”)

    As you can see when you click on one color the images will show only the ones for that color in different positions. Some thing I want to achieve using WordPress and custom post types.

    Any help would be more then welcome. Thank you so much.

    **Please do not make any purchase since this is not a real website.**

    # April 24, 2013 at 8:46 am

    To attach images to the custom post type, perhaps use Meta Box plugin. It enables you to display a file upload button below the text box for the custom post type for which you can add the images.
    Follow the demo.

    http://wordpress.org/extend/plugins/meta-box/

    # April 24, 2013 at 10:58 am

    I would look into using [Advanced Custom Fields](http://www.advancedcustomfields.com/ “ACF”) and possibly springing for the repeater field premium addon. It’s pretty much awesome. There are of course alternatives, so shop / browse around and see what works for you.

    # April 24, 2013 at 5:38 pm

    First of all thank you guys for the quick respond.

    @darrylm: Thanks for this plugin I will give it a try

    @mcjohnst: I’m using Advanced Custom Fields and Custom Post Type to create the custom post types more easy. Until now I did code my self all the Custom Post Types. The problem is I don’t know how to link colours with images. I did google it around but with no satisfied results.

    Also I’m using Multi Image Metabox plugin which gives me the option to add multiple images to my custom post type.

    Any other advice will be helpful.

    Thanks once more guys.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".