Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$44
Custom Post Type Metabox with fancybox

I have two Custom Post Types named: "Accommodation" & the other "Activities"

I require a metabox that looks like 1.jpg (attached) which is a label with a browse button to upload an image.

When you press browse, the standard WP uploader appears (See 2.jpg), then you find you image and press upload. Once it has completed you can fill in the Title & ALT name. Once down you press, a button "Use This Image", and that places the image url into the text label.

After you upload the 4 images into (1.jpg) I need it to generate 4 thumbnails in a 300px x 300px box as seen in (3.jpg), box has a 20px padding, and 20px gap between pics, so thumbs can be 120px x 120px each.

From each thumbnail I need it to link to the large file that will open in fancybox, see below for example of code.

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>

I would also like each thumbnail to fade on 'mouseover' and use class of 'class="fade alignnone"'

Final product will sit right of the featured image see in (4.jpg)

I require the full .php files, for the metabox, for echoing the code & .css files.

attachment image View Attachment

parksey18 | 07/21/12 at 9:38pm Edit
Tutorial: How to assign prize money

(4) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

Last edited:
07/22/12
1:52am

Arnav Joy says:

see these two links for creating it

http://wp.tutsplus.com/tutorials/reusable-custom-meta-boxes-part-3-extra-fields/

http://www.farinspace.com/wordpress-media-uploader-integration/

Post reply

07/22/12 2:26am

Arnav Joy says:

so here is my answer for the meta boxes , i have slightly modified it in look , please see the attached screenshot for it.

now create a js file and named it as custom-js.js , place it in js folder of your theme.

put following code into custom-js.js

    jQuery(function(jQuery) {  

          

        jQuery('.custom_upload_image_button').click(function() {  

            formfield = jQuery(this).siblings('.custom_upload_image');  

            preview = jQuery(this).siblings('.custom_preview_image');  

            tb_show('', 'media-upload.php?type=image&TB_iframe=true');  

            window.send_to_editor = function(html) {  

                imgurl = jQuery('img',html).attr('src');  

                classes = jQuery('img', html).attr('class');  

                id = classes.replace(/(.*?)wp-image-/, '');  

                formfield.val(id);  

                preview.attr('src', imgurl);  

				preview.attr('width', "100");  

				preview.attr('height', "100");  

                tb_remove();  

            }  

            return false;  

        });  

          

        jQuery('.custom_clear_image_button').click(function() {  

            var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();  

            jQuery(this).parent().siblings('.custom_upload_image').val('');  

            jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);  

            return false;  

        });  

      

    });

now in functions.php place following code:-

   wp_enqueue_script('custom-js', get_template_directory_uri().'/js/custom-js.js');  	

	

function add_custom_meta_box() {  

    add_meta_box(  

        'custom_meta_box', // $id  

        'Images', // $title   

        'show_custom_meta_box', // $callback  

        'Accommodation', // $page  

        'normal', // $context  

        'high'); // $priority  

}  

add_action('add_meta_boxes', 'add_custom_meta_box');



$prefix = 'custom_';  

$custom_meta_fields = array(

	array(  

		'label' => 'Image1',

		'name'  => 'Image1',  

		'desc'  => 'A description for the field.',  

		'id'    => $prefix.'image1',  

		'type'  => 'image'  

	)

	,

	array(  

		'label' => 'Image2',

		'name'  => 'Image2',  

		'desc'  => 'A description for the field.',  

		'id'    => $prefix.'image2',  

		'type'  => 'image'  

	)

	,

	array(  

		'label' => 'Image3',

		'name'  => 'Image3',  

		'desc'  => 'A description for the field.',  

		'id'    => $prefix.'image3',  

		'type'  => 'image'  

	)

	,

	array(  

		'label' => 'Image4',

		'name'  => 'Image4',  

		'desc'  => 'A description for the field.',  

		'id'    => $prefix.'image4',  

		'type'  => 'image'  

	)



);  



function show_custom_meta_box() {  

global $custom_meta_fields, $post;  

// Use nonce for verification  

echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />';  

      

    // Begin the field table and loop  

    echo '<table class="form-table">';

	echo '<tr><td colspan="2">Upload an image and then click "insert into post". To delete an image just prese "Remove Image".Images will automatically resized to proper width and random height.<br/><b>Make sure you upload image with minimum width of 900px</b></td></tr>';  

    foreach ($custom_meta_fields as $field) {  

        // get value of this field if it exists for this post  

        $meta = get_post_meta($post->ID, $field['id'], true);  

        // begin a table row with  

        echo '<tr> 

                <th><label for="'.$field['id'].'">'.$field['label'].'</label></th> 

                <td>';  

                switch($field['type']) {  

                    case 'image':  

						$image = get_template_directory_uri().'/images/image.png';    

						echo '<span class="custom_default_image" style="display:none">'.$image.'</span>';  

						if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; }                 

						echo    '<input name="'.$field['id'].'" type="hidden" class="custom_upload_image" value="'.$meta.'" /> 

									<img src="'.$image.'" class="custom_preview_image" alt="" width="100" height="100" /><br /> 

										<input class="custom_upload_image_button button" type="button" value="Choose Image" /> 

										<small> <a href="#" class="custom_clear_image_button">Remove Image</a></small> 

										<br clear="all" /><span class="description">'.$field['desc'].'';  

					break;

                } //end switch  

        echo '</td></tr>';  

    } // end foreach  

    echo '</table>'; // end table  

	

	

}  





function save_custom_meta($post_id) {  

    global $custom_meta_fields;  

      

    // verify nonce  

    if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))   

        return $post_id;  

    // check autosave  

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)  

        return $post_id;  

    // check permissions  

    if ('page' == $_POST['post_type']) {  

        if (!current_user_can('edit_page', $post_id))  

            return $post_id;  

        } elseif (!current_user_can('edit_post', $post_id)) {  

            return $post_id;  

    }  

      

    // loop through fields and save the data  

    foreach ($custom_meta_fields as $field) {  

        $old = get_post_meta($post_id, $field['id'], true);  

        $new = $_POST[$field['id']];  

        if ($new && $new != $old) {  

            update_post_meta($post_id, $field['id'], $new);  

        } elseif ('' == $new && $old) {  

            delete_post_meta($post_id, $field['id'], $old);  

        }  

    } // end foreach  

}  

add_action('save_post', 'save_custom_meta');

I have created this these boxes for custom post type "Accommodation" , test this and let me know if it is ok then i will create it for other post type also.

-Arnav

Attached Image

07/22/12 2:53am

parksey18 says:
Sweet, that works.
Now how do I echo a thumb & then large image with the class in the brief?
07/22/12 2:54am

Arnav Joy says:
for that part , i have to see the url and possibly have to work in your files.

07/22/12 3:05am

parksey18 says:

But I am unsure what the domain will be.
However it will sit under the file single-accommodation.php

So I was hoping for something like

$custom = get_post_custom($post->ID);

$post_content = get_the_content();

$custom.image1thumb = get_the_post_thumbnail($single->ID, 'accommodation-post-thumbnail', array('class' => 'fade alignnone'));

$custom.image1large = get_the_post_thumbnail($single->ID, 'accommodation-post-large'));



<?php if($custom.image1thumb!=""){ ?><a class="fancybox" rel="group" href="<?php echo $custom.image1large; ?>"><img src="<?php echo $custom.image1thumb; ?>" alt="" /></a><?php } ?>

Thoughts?

07/22/12 6:43am

Arnav Joy says:

this is the code you get img src in
$imgSRC1 , $imgSRC2 , $imgSRC3 , $imgSRC4



<?php 

 $imgID1 = get_post_meta(get_the_ID(),'custom_image1',true);

 $imgID2 = get_post_meta(get_the_ID(),'custom_image2',true);

 $imgID3 = get_post_meta(get_the_ID(),'custom_image3',true);

 $imgID4 = get_post_meta(get_the_ID(),'custom_image4',true);

 

 $imgData1 = get_post($imgID1, ARRAY_A);

 $imgData2 = get_post($imgID2, ARRAY_A);

 $imgData3 = get_post($imgID3, ARRAY_A);

 $imgData4 = get_post($imgID4, ARRAY_A); 

   

   $imgSRC1 = $imgData1['guid']; 

   $imgSRC2 = $imgData2['guid']; 

   $imgSRC3 = $imgData3['guid']; 

   $imgSRC4 = $imgData4['guid']; 

?>

07/24/12 7:41am

parksey18 says:

How do I build in?

add_image_size( 'listing-post-thumbnail', 120, 120, true );

so I get?

<a class="fancybox" rel="group" href="<?php echo $imgSRC1small; ?>"><img src="<?php echo $$imgSRC1large; ?>" alt="" /></a>

07/24/12 7:52am

Arnav Joy says:
add this code to functions.php

add_image_size( 'listing-post-thumbnail', 120, 120, true );

07/24/12 5:37pm

parksey18 says:

Yeah I know that.

How do I make the add image size apply to the image to create a small and large version:

<?php 

$imgID1 = get_post_meta(get_the_ID(),'custom_image1',true);

$imgData1 = get_post($imgID1, ARRAY_A);

$imgSRC1 = $imgData1['guid']; 



$imgSRC1small; << That needs to be 120x120

$imgSRC1large;  << That needs to be 800x600

?>

That way I can put them in this:

<a class="fancybox" rel="group" href="<?php echo $imgSRC1small; ?>"><img src="<?php echo $imgSRC1large; ?>" alt="" /></a>

07/26/12 6:59pm

parksey18 says:

This code is still not getting the thumbnail nor the large image.

<?php 

$custom = get_post_custom($post->ID);

$imgID1 = get_post_meta(get_the_ID(),'custom_image1',true);

$imgData1 = get_post($imgID1, ARRAY_A);

$image_attributes = wp_get_attachment_image_src( $imgID1 , 'fullsize' ); 

$imgSRC1large1 = $image_attributes[0];

$image_attributes = wp_get_attachment_image_src( $imgID1 , 'listing-post-thumbnail' ); 

$imgSRC1small1 = $image_attributes[0];

?>



<?php if($imgSRC1small1!=""){ ?><a class="fancybox" rel="group" href="<?php echo $imgSRC1large1; ?>"><img src="<?php echo $imgSRC1small1; ?>" alt="" /></a><?php } ?>

07/26/12 7:00pm

parksey18 says:
And remember I have to echo the 4 images.

Last edited:
07/22/12
1:57am
Jatin Soni says:
This require some modification in your template php and cpt php file. This may also need to add some extra script. In fact I am still confuse to understand. Tell me if I am wrong, You want 4 metaboxes on custom template page which will allows to upload 4 different image for the post. Now you want to display those images on that post.

If it is correct than require theme files or access to do this. As it may require some testing.

Post reply
Last edited:
07/23/12
4:53pm

This answer was downvoted by the top experts.
Last edited:
07/24/12
9:11pm

This answer was downvoted by the top experts.

This question has expired.

Current status of this question: Community pot

Please log in to add additional discourse to this page.

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Ask your WordPress questions! Pay money and get answers fast! (more info)

$44 Custom Post Type Metabox with fancybox

(4) Possible Answers Submitted...

$44
Custom Post Type Metabox with fancybox