WordPress: Wrap img in DIV

hardtohandle

HI,

I'm working on a WordPress site and want to be able to wrap the images in posts in a div when they are added through upload/insert section when your editing a page.

i.e when someone uploads an image it is wrapped in a div with a class name separate to the text.

at the moment my code looks like this

<div class="container">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="eight columns alpha">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
<div class="eight columns omega">
<!-- Where I want the image to go -->
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>

I get that the <?php the_content(); ?> is calling all content on the page that's why all content is showing in the first div and the second is empty. Is there a way to differentiate between text and images in a post/page?

Any help on this would be great

Cheers

Procasinator

You can use get_the_content to get the raw content as a string.

Then it's just a matter of deciding how to parse that string (xml parser, regex) to extract your images.

Like:
http://wordpress.stackexchange.com/questions/30498/stripping-the-content-from-images-then-displaying-them-seperately

hardtohandle

Thanks for the reply Procasinator I'll have a look into that now.

smcelhinney

When you say uploaded, do you mean as a featured_image, or directly into the post?

If its featured images, you can retrieve them through the get_post_thumbnails method (thumbnails is misleading..).

http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

hardtohandle

@smcelhinney I've been inserting them straight into the post. But will look into the featured image idea.

Basically I just want someone with no HTML know how to be able to upload and replace the graphic within WordPress using the dashboard.

Thanks

hardtohandle

@smcelhinney that worked perfect thanks for the help

Trojan

WordPress custom fields might also be useful - similar to the featured image option. You can also create your own input fields on the Edit Post page for the user to add the image.

smcelhinney

No probs. I find it particularly useful when you, say, start out with 3 different image sizes, but then want to create a 4th. There's a plugin called "Regen Thumbnails" which will allow you to regenerate ALL the featured images, based on whatever sizes you require.