The title is the short version of the question. Here's what I need in more details...

If the answer is not so simple, I would be glad if you can point me to the right direction with a tutorial or to the codex and where I can ready more about this.

Inside the WP loop, and "maybe" before using "the_content();", how can I tell wordpress to go to the database, loop/query through each one of the images inserted on that post/page, in such a way that I'll have full control of how those images will be displayed.

I need something that will be easy and intuitive for the client to update (with new images), and I consider easy and intuitive when you only have to click the "add media" button, upload some images and add them to the post/page.

At the same time, I need more control on how those images will be displayed to show all them like so:

<a href="link-to-full-img-size-01"><img href="img-01-thumbnail" /></a>
<a href="link-to-full-img-size-02"><img href="img-02-thumbnail" /></a>
<a href="link-to-full-img-size-03"><img href="img-03-thumbnail" /></a>
<a href="link-to-full-img-size-04"><img href="img-04-thumbnail" /></a>

And each anchor link will also have a rel="shadowbox[page-title]".

I've done this before, and something even more complex than this, but it's far from being easy to maintain (at least for clients).

I'm thinking about creating a custom-post-type with some different taxonomies. Then I create a new post, linked to a given taxonomy, use it as a bucket for all the images for that taxonomy, and than import it all inside another page-template, but I still don't know how to control how the images will be displayed.

Hope the question and description is clear enough. Thanks!


1 Answer 1


After some research, I came up with a solution that worked for me.

It's nice because it's not using the WP Gallery (you don't need to insert a gallery into your post/page to make it work).

It's awesome because you can do whatever you want inside the "images loop".

Note: the 'preview' in $size='preview' is a custom size I created using add_image_size( 'preview', 120, 120, true ); inside my functions.php file.

And here's what I came up with:

(... inside a new page.php ...)

<?php do_atomic( 'open_content' ); ?>
<?php $imgs_args = array(
        'numberposts'   => -1,
        'order'         => 'DESC',
        'post_mime_type'=> 'image',
        'post_type'     => 'attachment',
        'post_parent'   => $post->ID,
      ); $imgs = get_children( $imgs_args ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>


<?php the_content(); ?>
<?php if( $imgs ) : ?>
    <div class="showcase">
    <?php foreach( $imgs as $img ) : ?>
    <?php /* Setting Sizes */
        $preview_size = wp_get_attachment_image_src( $img->ID, $size='preview' );
        $full_size = wp_get_attachment_image_src( $img->ID, $size='full-size' ); ?>
        <a href="<?php echo $full_size[0]; ?>" rel="shadowbox" alt="<?php echo $img->post_title; ?>">
            <img src="<?php echo $preview_size[0]; ?>" alt="<?php echo $img->post_title; ?>" />
    <?php endforeach; ?>
<?php endif; ?>


It's also worth mentioning that Justin Tadlock has a really nice plugin called Cleaner Gallery. It was while checking his plugin' code that I found out about the nice get_children(); function that makes all this customization possible.

Hope it helps someone else in the future.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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