Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to create an array of images for a slideshow gallery script, so need to separate the images from the post loop - any ideas of the best way to achieve this and make it easy to add images? I can use a script to grab attachments (see below) but it seems a bit messy as:

  1. image uploaded appear in the post text area and then meed to be deleted otherwise there is duplication.
  2. you can't delete and image except by going into the media library and deleting it there.

http://digwp.com/2009/08/awesome-image-attachment-recipes-for-wordpress/

Would the better option be to use something like the more fields plug-in and create multiple text fields to post the urls of photos in?

So they use the media library to upload images and grab the urls to put in the post.

Ideally I'm trying to get a simple scenario where they just upload the images in one go as a gallery or individual images, write their gallery description text, and save.

share|improve this question
    
Can you be a little more clear on an actual question, the media library has buttons called insert into post for individual and gallery settings and that article has very relevant and useful functions, what are you actually asking.... –  Wyck Jun 18 '11 at 3:16

4 Answers 4

The best way to assign images to a given post is to just upload them in the WordPress post editing/new post area. You can also delete images from there.

With that said, here would be how you do that. You're going to hook into wp_enqueue_script, and call wp_enqueue_script to add your gallery script to the page. Then you'll use wp_localize_script, which will print out a nice javascript object for you right above your script.

Inside your hooked function, you access to the $post variable, which contains the current post. You don't need to be inside the loop to get that. And if you have that, you can get child posts (like attachments), which makes getting images outside the loop very easy.

<?php
add_action( 'wp_enqueue_scripts', 'wpse20321_enqueue_scripts' );
function wpse20321_enqueue_scripts()
{
    // If this isn't a singular post, return -- don't enqueue anything
    if( ! is_singular() ) return;

    // enqueue your gallery script
    wp_enqueue_script( 
        'wpse20321-gallery-script', 
        trailingslashit( get_stylesheet_directory_uri() ) . 'path/to/gallery.js', 
        // use trailingslashit( plugin_dir_url( __FILE__ ) ) . 'path/to/gallery.js' if you're in a plugin
        array( 'jquery' )
    );

    // now we'll get the attachments...
    global $post;
    if( empty( $post ) ) $post = get_queried_object();
    $attachments = get_posts(
        array(
            'post_type'         => 'attachment',
            'post_mime_type'    => 'image',
            'post_status'       => 'inherit',
            'post_parent'       => $post->ID
        )
    );
    if( ! $attachments ) return;
    $out = array();
    $out['img_list'] = array();
    foreach( $attachments as $a )
    {
        $img = wp_get_attachment_image_src( $a->ID, 'full' );
        $out['img_list'][] = array( 
            'image'     => $img[0],
            'width'     => $img[1],
            'height'    => $img[2]
        );
    }

    // call wp_localize_script, which will spit out a nice JSON for you,
    // right before your enqueued gallery script, ready for use.
    // the object name will be wpse20321
    wp_localize_script( 
        'wpse20321-gallery-script', 
        'wpse20321',
        $out 
    );
}

You can add anything you need to that JS object. Want the title attribute saved for the image?

foreach( $attachments as $a )
    {
        $img = wp_get_attachment_image_src( $a->ID, 'full' );
        $out['img_list'][] = array( 
            'image'     => $img[0],
            'width'     => $img[1],
            'height'    => $img[2],
            'title'     => $a->post_title
        );
    }
share|improve this answer

all your upload images are saved under Media Library.You can write Image Description text at the time of a new post.


Steps:


posts->addnew->upload image->Choose media Library->select Image->Now you have more options like image(Title,Alternate Text,Caption,Description,Link URL,Alignment,Size)->Then Click Insert into post->Save All changes.


I hope this is useful for you.:)

share|improve this answer
    
Sorry for not being clearer. I'm more familiar with the expressionengine CMS. What I'm trying to achieve is the best way to separate attached images away from the main text meta box so I can place them in an array for a Jquery gallery script that goes in the header {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos‌​-kitty.jpg'}, {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-‌​kitty.jpg'}, {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/apple-kitt‌​y.jpg'} –  david arthur Jun 18 '11 at 10:29

Awful hack, but it'll work:

  1. In the header, where you want the JSON object, place a string and make it sure, that it's going to be unique. (generate a uniqid() for example).
  2. In the loop, gather the images, and create the JSON string in a variable.
  3. In your template, at the very begining of the header, place . This will turn off the output and instead it's going to read all output into buffer.
  4. Since you have no output, you can use the whole rendered page as a string. Read it at the very end of the template (at the end of the footer) getting it with .
  5. Replace the unique string with the JSON string. Use a simple $allpage = str_replace(to_search,to_replace_for,the_string).
  6. Print the buffered string. (echo $allpage).
  7. Disable output buffering and clear the object to save memory leaks. ( ob_end_flush() )

As I said, awful. You'd be better, if you'd simply but the JSON at the end of the page, for example, into the footer, but gather the images in the loop into a string still stands.

share|improve this answer

In your functions file place this:

//gives me different image sizes
if ( function_exists( 'add_image_size' ) ) 
{
add_image_size( 't1x1', 145, 200, true );
add_image_size( 't2x2', 200, 200, true );
add_image_size( 't3x2', 307, 417, true );
add_image_size( 't3x3', 600, 400, true );
add_image_size( 't4x3', 680, 500, true );
}
///////////////////////////////////////////////
// Start  Gallery Function
////////////////////////////////////////////////

function wpo_get_images($size = 'thumbnail', $limit = '0', $offset = '0', $big = 'large', $post_id = '$post->ID', $link = '1', $img_class = 'attachment-image', $wrapper = 'div', $wrapper_class = 'attachment-image-wrapper' , $wrapper2 = 'div' ) {

    global $post;

    $images = get_children( array('post_parent' => $post_id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );

    if ($images) {

        $num_of_images = count($images);

        if ($offset > 0) : $start = $offset--; else : $start = 0; endif;
        if ($limit > 0) : $stop = $limit+$start; else : $stop = $num_of_images; endif;
        $i = 0;

        foreach ($images as $attachment_id => $image) {
            if ($start <= $i and $i < $stop) {

            $img_title = $image->post_title;   // title.

            $img_description = $image->post_content; // description.

            $img_caption = $image->post_excerpt; // caption.

            //$img_page = get_permalink($image->ID); // The link to the attachment page.

            $img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);

            if ($img_alt == '') {

            $img_alt = $img_title;

            }

                if ($big == 'large') {

                $big_array = image_downsize( $image->ID, $big );

                $img_url = $big_array[0]; // large.

                } else {

                $img_url = wp_get_attachment_url($image->ID); // url of the full size image.

                }


            // FIXED to account for non-existant thumb sizes.

            $preview_array = image_downsize( $image->ID, $size );

            if ($preview_array[3] != 'true') {

            $preview_array = image_downsize( $image->ID, 'thumbnail' );

            $img_preview = $preview_array[0]; // thumbnail or medium image to use for preview.

            $img_width = $preview_array[1];

            $img_height = $preview_array[2];

            } else {

            $img_preview = $preview_array[0]; // thumbnail or medium image to use for preview.

            $img_width = $preview_array[1];

            $img_height = $preview_array[2];

            }

            // End FIXED to account for non-existant thumb sizes.
            ///////////////////////////////////////////////////////////

            // This is where you'd create your custom image/link/whatever tag using the variables above.

            // This is an example of a basic image tag using this method.

            ?>

            <?php if ($wrapper != '0') : ?>

            <<?php echo $wrapper; ?> class="<?php echo $wrapper_class; ?>">

            <?php endif; ?>

            <?php if ($wrapper2 != '0') : ?>

            <<?php echo $wrapper2; ?>>

            <?php endif; ?>

            <?php if ($link == '1') : ?>


            <a href="<?php echo $img_url; ?>" title="<?php echo $img_title; ?>">

            <?php endif; ?>

            <img class="<?php echo $img_class; ?>" src="<?php echo $img_preview; ?>" alt="<?php echo $img_alt; ?>" title="<?php echo $img_title; ?>" />

            <?php if ($link == '1') : ?>


            </a>

            <?php endif; ?>

            <?php if ($img_caption != '') : ?>

            <div class="attachment-caption"><?php echo $img_caption; ?></div>

            <?php endif; ?>

            <?php if ($img_description != '') : ?>

            <div class="attachment-description"><?php echo $img_description; ?></div>

            <?php endif; ?>

            <?php if ($wrapper2 != '0') : ?>

            </<?php echo $wrapper2; ?>>

            <?php endif; ?>

            <?php if ($wrapper != '0') : ?>

            </<?php echo $wrapper; ?>>

            <?php endif; ?>

            <?

            // End custom image tag. Do not edit below here.

            ///////////////////////////////////////////////////////////

            }
            $i++;
        }
    }
} 
///////////////////////////////////////////////

then call the images that are uploaded to whatever post with this:

<ul>

<?php wpo_get_images('t4x3','0','0','slide',"$post->ID",'0','portfolio-photo','li', 'theclass' );?>


</ul>   

you can see that there are different options in there to set, like the image size (the first option and a few others to play with.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.