Insert divider between contect text and images? WordPress

Hariprasad Vijayan answers:

Hi,
Can you please show the complete code?

Abdelhadi Touil answers:

Hi.
What about this code explained here:

[[LINK href="http://www.snilesh.com/resources/wordpress/extract-images-from-wordpress-post/"]]http://www.snilesh.com/resources/wordpress/extract-images-from-wordpress-post/[[/LINK]]

isp_charlie answers:

try to use jQuery:

$(function(){
$(".content-class").find("img").eq(0).before('<div class="divider"></div>');
})


Luis Abarca answers:

You can do it in many ways, here are 2:

If yoy already have the content with images already inserted, you can ise the code provided by Abdelhadi or use jQuery and get all the images, insert each image in a special element below the text content and then remove it from their original location.


<div id="post">
<the text content>
</div>
<div class="divider"></div>
<div id="gallery"></div>

<script>
$(function()
{
$('#post img').each(function()
{
$('#gallery').append( $(this) );
});
});
</script>


have a look here [[LINK href="http://jsfiddle.net/MP25q/1/"]]http://jsfiddle.net/MP25q/1/[[/LINK]]

2. New content: add just text content to your posts and attach all the images but not insert them into the post content, then show them below the text with a new loop calling all the attached images.

Dbranes answers:

If your HTML content looks like this:


<p> some text above the images </p>
...
<p> some text above the images </p>
<p><a><img></a></p>
...
<p><a><img></a></p>


and you want to change it to


<p> some text above the images </p>
...
<p> some text above the images </p>
<div class="divider"></div>
<p><a><img></a></p>
...
<p><a><img></a></p>


you can use <em>preg_replace</em> in the <em>the_content</em> filter:

add_filter( 'the_content', 'the_content_callback' );

function the_content_callback( $content ){
$from = '/(\<p\>(.*)(\<img)(.*)\<\/p\>)/i';
$to = "<div class=\"divider\"></div>$1";
$content = preg_replace( $from, $to, $content, 1 );
return $content;
}