Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

How to create gallery using custom field in Wordpress?

Hello, I have created my own custom theme, and added some some custom post types using fucntions in functions.php. I have also created few custom fields for these post types. However, I do not know how to create gallery as custom field.

Content editor of the website should pick 1 or more images (using wordpress built-in media library) and these images should be placed on a specific place in the post as a thumbnails with links to the full size images. That's why I want to have gallery as a custom field, gallery won't be part of the main content().

In the frontent, results for every image should look like this: <li><a href="link to the full image"><img src="thumbnail image url" /></a></li>

Currently, I am able to open media library and select multiple images. However, I do not know how to "save" all images to custom field value and create thumbnail with link to full image. I am using this solution for media library script with some tweaks to work with newer versions of WP: https://mikejolley.com/2012/12/21/using-the-new-wordpress-3-5-media-uploader-in-plugins/ I know I have to make something on this line "// Do something with attachment.id and/or attachment.url here" (as stated in solution above), but I have no clue what to do as my knowledge of js is miserable.

Any suggestions?

Tomas

1 Answer

I have found a solution for this. I have slightly modified JQuery script described in article linked in question.

//js script needs to be queued in functions php for admin pages only

 jQuery(document).ready(function($){

    // Instantiates the variable that holds the media library frame.
    var meta_image_frame;

    // Runs when the image button is clicked. You need to insert ID of your button
    $('#button-id').click(function(e){

        // Prevents the default action from occuring.
        e.preventDefault();

        // If the frame already exists, re-open it.
        if ( meta_image_frame ) {
            meta_image_frame.open();
            return;
        }

        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
            title: 'Choose image(s)',
            multiple: 'add',
            button: { text:  'Choose image(s)' },
            library: { type: 'image' }
        });

        // Runs when an image is selected. You need to insert ID of input field
        meta_image_frame.on('select', function(){
            var selection = meta_image_frame.state().get('selection');
            var size = 'thumbnail'
            selection.map(function(attachment) {
                attachment = attachment.toJSON();
                $("#input-field-ID").val($("#input-field-ID").val() +"<li><a href=" +attachment.url+ " target=_blank><img src=" +attachment.sizes[size].url+ " /></a></li>");
            });

        });

        // Opens the media library frame.
        meta_image_frame.open();
    });
});

Function will add list item with link to full image placed over thumbnail image for every selected image. If you want to change already selected images, you need to delete them in admin panel and then select a new one. For more info, send me a message. :)

Tomas