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)
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.
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.