Grow your CSS skills. Land your dream job.

WordPress: Separating images/content from the_content()

  • # July 16, 2011 at 5:51 pm

    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?

    # July 18, 2011 at 10:58 am

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

    " class="lightbox" rel="portfolio" title="">
    < ?php }
    }
    ?>

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".