Horje
Amend content/image separation code to include image links - Wordpress Solution
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 rel="nofollow" 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 rel="nofollow" href="url" rel="lightbox[54]"></a>
So I need the code amended so that the tags stay wrapped around the image (ie. the tags are not displayed in the text div but are displayed in the image div wrapped around the relevant image).

Solution - 1

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 rel="nofollow" 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


Solution - 2

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.




Wordpress

Related
Add label that disappears in write post text editor - Wordpress Solution Add label that disappears in write post text editor - Wordpress Solution
Search with Custom Fields in search.php - Wordpress Solution Search with Custom Fields in search.php - Wordpress Solution
WP Email Capture in WP PopUp Scheduler - Wordpress Solution WP Email Capture in WP PopUp Scheduler - Wordpress Solution
Problem with Tweetable plugin - Wordpress Solution Problem with Tweetable plugin - Wordpress Solution
My home page and sidebar content is cut off - Wordpress Solution My home page and sidebar content is cut off - Wordpress Solution

Type:
 Code Example
Category:
 Coding
Sub Category:
 Code Example
Uploaded by:
 Admin
Views:
 10



 

Horje