WordPress.org

1. Walton
   Member
   Posted 1 year ago #

   I am playing with a new layout in twenty ten where I have a featured post at top (http://www.englishadvantage.info/testblog/)

   I have one div id called featured_post, then to make the image float left and the excerpt float right, I have two other divs featured_post_image and featured_post_details. At the moment, my css for the featured post div is not applying to my featured post (border bottom, border left, grey background). In fact it seems to think that the featured post div is between the post and the menu. However if I change the name of featured_post_details to something else (feat_post_ex for example) then I get my featured post formatting BUT the excerpt part doesn't float right.

   Why would the name affect the formatting of a div and how can I get the image to float left and the text to wrap AND be able to apply formatting to both together?

   Code for this loop included below in case I made a syntax error.

   <?php
   $featured= array('post_type' => 'lesson',
   'tags' => 'featured',
   'posts_per_page'=>1,);
   query_posts($featured);
   if ( have_posts() ) :
   while (have_posts()) : the_post();
   ?>
   <div id="featured_post">
   <div id="featured_post_image">
   <?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
   </div>
   <div id="featured_post_details">
   <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
   <div class="entry-meta">
   <?php echo get_the_term_list( $post->ID, 'level', 'Level: ', ', ', '<br>' );
   echo get_the_term_list( $post->ID, 'skill', 'Skill: ', ', ', '<br>' );
   echo get_the_term_list( $post->ID, 'area', 'Area: ', ', ', '<br>' );
   echo get_the_term_list( $post->ID, 'theme', 'Theme: ', ', ', '<br>' );?>
   </div>
   <?php the_excerpt(); ?>
   </div>
   <?php endwhile; else: ?>
   <p>Sorry, no lesson plans here.</p>
   <?php endif; wp_reset_query(); ?>
   </div>

2. Digital Raindrops
   Member
   Posted 1 year ago #

   WordPress 'Twenty Ten' already has a set of styles for this, just use one of these.

   <div class="alignleft">
       <?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
   </div>
   
   <div class="alignright">
       <?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
   </div>
   
   <div class="aligncenter">
       <?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
   </div>

   You will find the image styles in the style.css Line #759 to Line #844

   B.T.W. if you want to keep youe original class/id then copy the style from the style.css and add your class/id name.

   HTH

   David

3. Walton
   Member
   Posted 1 year ago #

   I did that. The image aligns left but the text doesn't wrap around it.
   If I try to add any kind <div> around the post details it just goes haywire as if it's one div too many.
   I'm happy with the image aligning left but how do I get the text to wrap? I tried playing with the css but it's not helping.

4. Walton
   Member
   Posted 1 year ago #

   Or put another way, is there some reason why I can't put a div around:
   

   <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
   <div class="entry-meta">
   <?php echo get_the_term_list( $post->ID, 'level', 'Level: ', ', ', '<br>' );
   echo get_the_term_list( $post->ID, 'skill', 'Skill: ', ', ', '<br>' );
   echo get_the_term_list( $post->ID, 'area', 'Area: ', ', ', '<br>' );
   echo get_the_term_list( $post->ID, 'theme', 'Theme: ', ', ', '<br>' );?>
   </div>
   <?php the_excerpt(); ?>

   Whenever I try, it screws up the whole element order of that first featured post area.

5. Digital Raindrops
   Member
   Posted 1 year ago #

   I am on a client site so do not have samples handy.

   I wrap the excerpt() right of the image in this tutorial, this is just done with inline styles.

   It might help you resolve your issue.

   Looking at your code nothing jumps out except that you have the image before the post title, it could be that.

   You have
   image
   Title
   -Excerpt

   You likely need
   Title
   -Image-Excerpt

   Regards

   David

6. Digital Raindrops
   Member
   Posted 1 year ago #

   <?php
      $featured= array('post_type' => 'lesson','tags' => 'featured','posts_per_page'=>1,);
      query_posts($featured);
      if ( have_posts() ) :
      while (have_posts()) : the_post();
   ?>
      <div id="featured_post">
         <div id="featured_post_details">
           <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
           <div class="entry-meta">
              <?php
                    echo get_the_term_list( $post->ID, 'level', 'Level: ', ', ', '<br>' );
                    echo get_the_term_list( $post->ID, 'skill', 'Skill: ', ', ', '<br>' );
                    echo get_the_term_list( $post->ID, 'area', 'Area: ', ', ', '<br>' );
                    echo get_the_term_list( $post->ID, 'theme', 'Theme: ', ', ', '<br>' );
              ?>
           </div>
           <div id="featured_post_image">
              <?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
           </div>
           <?php the_excerpt(); ?>
      </div>
   <?php endwhile; else: ?>
      <p>Sorry, no lesson plans here.</p>
   <?php endif; wp_reset_query(); ?>
   </div>

7. Walton
   Member
   Posted 1 year ago #

   That solved the problem, thanks. I should have figured out that the placement of the image was the issue.

   I wouldn't mind being able to put the post details in a different div, in case I choose to play around but at least the image wraps now.

Topic Closed

This topic has been closed to new replies.