Using Wordpress 3.5.2, Atahualpa 3.7.12, with Post-Page Association plugin - Thumbnails Only template.

The Template displays on a page only the thumbnails for posts in the designated category (each thumbnail is linked to open the full post). This is a great for a Videos page, where each displayed thumbnail links to the full post where the video is posted.

I wanted to add the title of each post as a subtitle under each thumbnail. So, I added the following bolded code in the template php file:

<?php
/*
PPA Template: Thumbnails Only
Description: This template shows only a thumbnail for each associated post.
Version: 1.0
*/

If ( $association_query = $this->get_associated_posts() ) : ?>
  <div class="associated-posts">  
  <?php
  While ($association_query->have_posts()) : $association_query->the_post();

  If ( !$thumb = $this->get_post_thumbnail(get_the_id()) ) Continue; ?>
  
  <div class="associated-post">
    
    <div class="thumb-frame">  
      <a href="<?php the_permalink(); ?>" title="<?php the_title() ?>">
        <img src="<?php Echo $thumb[1] ?>"
             width="<?php Echo $thumb[2] ?>"
             height="<?php Echo $thumb[3] ?>"
             alt="<?php the_title() ?>"
             title="<?php the_title() ?>"
             class="thumb post-preview-image alignnone" />
      </a>
    

<h3 class="post-title">
     <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title() ?></a>
    </h3>

   </div> 
  </div>
  <?php EndWhile; ?>
  <div class="clear"></div>
  </div>
<?php EndIf;
/* End of File */

I then styled the <h3> to be smaller and centered. Specifically, I used the following CSS Code:

#post-756 .associated-post h3 {
font-size: 10px;
width: 150px;
text-align: center;
}

#post-756 .associated-post {
border: none !important;
margin-top: 0px;
margin-bottom: 30px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: 5px;
float: left;
}

This all works fine, except that the thumbnails now do not wrap all the way left on the second row -- as they did before I edited the PHP file for the template. After my edit, the thumbnail on the second row starts about midway through the row.

I have tried a bunch of CSS codes - including various versions of what I found here: http://stackoverflow.com/questions/6...ser-zoom-level But no luck.

I tried adding:

#post-756 .associated-posts {
width: 900px;
overflow: hidden;
white-space: nowrap;
}

#post-756 .associated-post {
display: inline-block;
width: 155px; 
}

#post-756 .thumb-frame {
width: 150px;
}

This makes the thumbnails wrap properly in two horizontal rows, with the second row starting at the left margin of the page, as it should. However, the subtitles now do not stay under the thumbnails, but extent all the way across the page to the right, overlapping each other!

I am stumped! Any help would be VERY MUCH APPRECIATED!

Please Let me know if you'd like me to send you a private message with the URL.

Many thanks in advance!

I went to look for the plugin in on wordPress.org and found no plugin called "Post-Page Association". Where did you download your plugin?

Hi Larry,

Thank you for the reply. The plugin is now called Associated Posts, and I am creating a customized template, as invited by the plugin author. Working from one created for one of my other sites, which displays thumbnails only, I am just trying to add subtitles under the thumbnails which will display the post's title in small type as a subtitle.

I now seem to have fixed the problem by changing the <h3>...</h3> code I had added in the php file for the template to the following:

<div class="sub_title">
     <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title() ?></a>
    </div>

Now, when I use CSS to style the .sub_title as follows, all seems to work:

#post-756 .associated-post .sub_title {
font: 10px Arial;
width: 150px;
text-align: justify;
}

Now the thumbnails with justified sub-titles under them seem to wrap properly back to the left margin in the second row. It appears that the problem somehow was caused by my using the <h3> code in the php file to designate the subtitles.

Hope this helps someone else!

Many thanks!