0

enter image description hereI am currently having some trouble executing the following.

I would like to separate the image (wp_get_attachment_image) from the content (get_the_content) by using a conditional statement to display the div styled content area.

So if the image is displayed without any content in the editor to not display the styled content div at all.

<!--display image-->
<div class="featured-image">
  <?php
      $args = array(
      'post_type' => 'attachment',
      'numberposts' => -1,
      'post_status' => null,
      'post_parent' => $post->ID
    );

      $attachments = get_posts( $args );
          if ( $attachments ) {
          foreach ( $attachments as $attachment ) {
          echo wp_get_attachment_image( $attachment->ID, 'full' );
        }
    }
?>

</div>

 <!--styled content div-->
<div class="portfolio-content">
     <?php echo preg_replace('/<img[^>]+./','',get_the_content()); ?>
</div>
1
  • 1
    Put the values of get_the_content() in a variable. Run the preg_replace to remove the image. If there's anything left in the variable display it.. if not... don't.
    – gdaniel
    Feb 28, 2014 at 21:59

1 Answer 1

0

Technically, this should work:

<!--display image-->
<div class="featured-image">
  <?php
      $args = array(
      'post_type' => 'attachment',
      'numberposts' => -1,
      'post_status' => null,
      'post_parent' => $post->ID
    );

      $attachments = get_posts( $args );
          if ( $attachments ) {
          foreach ( $attachments as $attachment ) {
          echo wp_get_attachment_image( $attachment->ID, 'full' );
        }
    }
?>

</div>

<?php 

$content = preg_replace('/<img[^>]+./','',get_the_content());
if($content != ""):?>

<!--styled content div-->
<div class="portfolio-content">
     <?php echo $content; ?>
</div>

<?php endif;?>

UPDATE:

I got it to work. But there are a few flaws with the whole idea. Here's what I did:

  1. Created a page.
  2. Add 1 image and some text to that page.

Then I added the script above. I got the image attachment to show as you did, but no content at all. The first thing I noticed is that you need to reset the query in order to get the page query again. So after the first loop you need to insert:

<?php wp_reset_query(); wp_reset_postdata();?>

Now the function get_the_content will echo properly. However there are two other issues:

  1. The preg_replace function is removing the images but not the link around the images. Typically when you add an image to the editor, by default the image has a link. So when we check to see if the variable $content is empty, it will return false, because there's still an empty anchor tag left in there. So in that case your images can't have links.

  2. I also noticed that an image can only be attached to one post. Meaning that the initial loop will only work when you upload the image while you're editing that post. You could not use another image that was previously uploaded in another post.

Anyway, I was still get the code to work after I fixed all of the above.

I am posting the code again with the update, and with comments. See if you can get it to work.

<div class="featured-image">


  <?php
      $args = array(
      'post_type' => 'attachment',
      'numberposts' => -1,
      'post_status' => null,
      'post_parent' => $post->ID
    );

      //First loop will get all images attached to this post
      $attachments = get_posts( $args );
          if ( $attachments ) {
          foreach ( $attachments as $attachment ) {
          echo wp_get_attachment_image( $attachment->ID, 'full' );
        }
    }
?>

</div>

<?php wp_reset_query(); wp_reset_postdata(); // this will reset the data from the first loop and give us access again to the main post loop?>

<?php 
//this will remove the images from the content editor
// it will not remove links from images, so if an image has a link, you will ended up with an empty lin.

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

//this IF statement checks if $content has any value left after the images were removed
// If so, it will echo the div below it.. if not will won't do anything.
if($content != ""):?>

<!--styled content div-->
<div class="portfolio-content">
     <?php echo $content; ?>
</div>

<?php endif;?>
7
  • Thanks for the reply. I am trying to not display the styled content div - only when the content is empty. Does that make sense? Feb 28, 2014 at 23:10
  • The if statement above checks whether the content is empty or not.. if it's empty it won't show the div. The idea is that you get the content - remove the image from it... if there's anything left in the variable that means there's more content other than images... so it display the div and the content.. if there's nothing left it skips everything.
    – gdaniel
    Feb 28, 2014 at 23:13
  • Ok, not sure if I am explaining the problem, so I have added a picture of the two scenarios. Hopefully this explains my problem better? Thanks Feb 28, 2014 at 23:32
  • Did you try using my code at all? I must be missing something. My code only displays the content div if there's content to be displayed. That's what I understood by your question. If not, I am sorry and I hope someone else is able to help.
    – gdaniel
    Mar 1, 2014 at 0:35
  • Thanks for your help - yes i have tried the code but still showing the styled div.... Mar 1, 2014 at 10:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.