treehouse : what would you like to learn today?
Web Design Web Development iOS Development

WordPress: Separating images/content from the_content()

  • I am in a situation where the design calls for the text from the_content() to be displayed in it's own div with a border around it while the images from the_content() are placed in their own div below the text, I am not even sure how to go about doing this or if it is even possible, does anyone have any ideas?
  • Is it one image or multiple?

    If it is a single image then you'll want to use the featured image function. Check out post_thumbnail. It's a truly wonderful thing. Here's an example of what you would put in your functions.php file:
    // add post-thumbnail functionality
    if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); }
    set_post_thumbnail_size( 100, 100, true ); // Normal post thumbnails
    add_image_size( 'custom-1', 125, 125, true ); // Custom size that will crop the image to fit the proportion
    add_image_size( 'custom-2', 255, 236, false ); // Default is false, "soft proportional crop"


    If it's multiple images, you can do that too! You'll need to run a loop on images that have been attached to the page/post. When you're editing a page and you upload images for insertion, those images become 'attached' to the page. So, instead of actually inserting them onto the page, you can just run a loop through all of the attachments!

    To give you an idea of how to do this, this is some code that I used when I needed to put all of the images into a lightbox, but I only wanted to use the single thumbnail. This will output blank links of all of the attached images:
    <?php 
    $args = array(
    'order' => 'ASC',
    'post_type' => 'attachment', // important - will only loop through attachments
    'post_parent' => $post->ID,
    'post_mime_type' => 'image', // attachment type
    'post_status' => null,
    'numberposts' => -1 // infinite results
    );
    $attachments = get_posts($args);
    if ($attachments) {
    foreach ($attachments as $attachment) {
    $atturl = wp_get_attachment_url($attachment->ID); ?>

    <a href="<?php echo $atturl ?>" class="lightbox" rel="portfolio" title=""></a>
    <?php }
    }
    ?>