Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Amend content/image separation code to include image links WordPress

  • SOLVED

Using this code to split text content and images and display them in separate divs for wordpress page/post content.


<div id="text_content">
<?php
ob_start();
the_content('Read the full post',true);
$postOutput = preg_replace('/<img[^>]+./','', ob_get_contents());
ob_end_clean();
echo $postOutput;
?>
</div>
<div id="image_content">
<?php
preg_match_all("/(<img [^>]*>)/",get_the_content(),$matches,PREG_PATTERN_ORDER);
for( $i=0; isset($matches[1]) && $i < count($matches[1]); $i++ ) {
echo $beforeEachImage . $matches[1][$i] . $afterEachImage;}?>
</div>


The issue is that the images are wrapped with links and the link code is being left in the text div.

Eg. If this was in the original content...

<a href="url" rel="lightbox[54]"><img class="class" title="title" src="url" alt="alt" width="215" height="140" /></a>


It is being returned in the image div as...

<img class="class" title="title" src="url" alt="alt" width="215" height="140" />

While in the text div this is showing up...

<a href="url" rel="lightbox[54]"></a>

So I need the code amended so that the <a> tags stay wrapped around the image (ie. the <a> tags are not displayed in the text div but are displayed in the image div wrapped around the relevant image).

Answers (2)

2011-04-14

Denzel Chia answers:

Hi,

Perhaps, changing the regular expression will work?

Please try this.


<div id="text_content">

<?php

ob_start();

the_content('Read the full post',true);

$postOutput = preg_replace('/<img[^>]+./','', ob_get_contents());

ob_end_clean();

echo $postOutput;

?>

</div>

<div id="image_content">

<?php

preg_match_all("/<a href=\"(.*)\">(<img [^>]*>)<\/a>/",get_the_content(),$matches,PREG_PATTERN_ORDER);

for( $i=0; isset($matches[1]) && $i < count($matches[1]); $i++ ) {

echo $beforeEachImage . $matches[1][$i] . $afterEachImage;}?>

</div>


Thanks.
Denzel


hddesign comments:

Issue with the preg match I think.

Outputting this for the second div...


<div id="image_content">
../wp-content/uploads/2011/03/feature-flash-shot-700x466.jpg"><img class="size-thumbnail wp-image-57 alignnone" title="feature flash shot" src="../wp-content/uploads/2011/03/feature-flash-shot-215x140.jpg" alt="" width="215" height="140" /></a><a href="../wp-content/uploads/2011/03/1_2-4_Talbot_Rd_01-700x466.jpg
</div>




Denzel Chia comments:

Hi,

Nothing wrong with my regular expression,
something wrong with your script.
I rewrote for part 2 of your script that scraps thumbnail image with link to full image from content.
I had tested in my localhost to proof that it is working.

Please put the below code within your wordpress loop.
Please add you own html to it.


<?php
//assign content
$content = get_the_content();

//scrap image with links
preg_match_all("/<a href=\"(.*)\">(<img [^>]*>)<\/a>/",$content,$matches,PREG_PATTERN_ORDER);

//count number of images scraped.
$count = count($matches);

//echo out using for loop
for($i=0;$i<$count;$i++){
echo $matches[0][$i];
}
?>


Thanks.
Denzel


Denzel Chia comments:

Hi,

I had emailed you the above script, using wp questions internal mailing system.
part of the above script is not showing properly here.

You can contact me at [email protected], if you did not get my message.

Thanks.
Denzel


hddesign comments:

Denzel,

Thanks - almost there - the only issue is the..

rel="lightbox[54]"

Part isn't being outputted. Forgive my lack of knowledge but how do I get that to appear?


Denzel Chia comments:

Hi,

Regarding the 54 in rel="lightbox[54]"
How do you get the 54, is this post id? or a fixed number 54?

Thanks.
Denzel.


hddesign comments:

Its the post ID.


Denzel Chia comments:

Ok done.

Send you the codes via internal messaging system. Please use it instead.
The below code may be hidden from view here.


<?php
//assign content
$content = get_the_content();
global $post;
$post_id = $post->ID;


//scrap image with links
preg_match_all("/<a href=\"(.*)\">(<img [^>]*>)<\/a>/",$content,$matches,PREG_PATTERN_ORDER);

//count number of images scraped.
$count = count($matches);

//echo out using for loop
for($i=0;$i<$count;$i++){

$match = $matches[0][$i];
$rel = "<a rel='lightbox[$post_id]'";
$image = str_replace('<a',$rel,$match);

echo($image);


}
?>


Thanks.
Denzel


Denzel Chia comments:

Hi,

I wonder if it is possible for you to increase your price money to $20.

It is ok, if you do not wish to so.

Thanks.
Denzel


hddesign comments:

Thanks Denzel - that got it working!

Appreciate all your efforts so i threw another $5 onto the prize.

2011-04-13

Pixel Coder answers:

If the images are going to be displayed separately why not strip all img tags from the_content() and grab the attachments for the second div? Then apply your own mark-up to active the lightbox.

If you need this written let me know.