Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » Forum Usage » Forum How-To »

[SOLVED] How to make images & subtitles line up horizontally & float left to next lin


  #1  
Old Jul 8, 2013, 06:14 PM
New WordPress Fan
 
141 posts · Jul 2010
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:

Code:
<?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:

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:

Code:
#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!
  #2  
Old Jul 9, 2013, 08:25 AM
lmilesw's Avatar
lmilesw
 
10,173 posts · Jul 2009
Central New York State USA
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?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jul 9, 2013, 12:47 PM
New WordPress Fan
 
141 posts · Jul 2010
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:

Code:
<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:

Code:
#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!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to vertically center-align one-line and two-line menu labels? steve955 Page & Category Menu Bars 4 Mar 12, 2013 11:05 AM
[SOLVED] Black Line Above/Below Header and White Line Before Body Mande Header configuration & styling 1 Sep 9, 2010 09:54 AM
How to separate line items in widget content with a line? mgofootball Sidebars & Widgets 5 Jul 19, 2009 09:36 PM
How to change dotted border line in the layout to solid line? araneum Atahualpa 3 Wordpress theme 1 Feb 21, 2009 07:40 PM


All times are GMT -6. The time now is 01:53 PM.


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.