Separate attachment images from post loop

Question

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.

Answer 1

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
        );
    }

Answer 2

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.:)

Answer 3

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.

Answer 4

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.