1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to show 50×50 image thumbnail in Related Post

Discussion in 'CSS' started by Furquan Ahmed, May 25, 2016.

  1. #1
    I am showing related post widget to my visitor without using any plugin on my WordPress self hosted site. Now I want to fix width & height of image thumbnail to 50×50. How to do this via CSS. Here is my related post code .
    SEMrush
    <?php endwhile; endif; ?>
    <?php $orig_post = $post;
    global $post;
    $categories = get_the_category($post->ID);
    if ($categories) {
    $category_ids = array();
    foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
    $args=array(
    'category__in' => $category_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=> 8, // Number of related posts that will be shown.
    'caller_get_posts'=>1
    );
    $my_query = new wp_query( $args );
    if( $my_query->have_posts() ) {
    echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
    while( $my_query->have_posts() ) {
    $my_query->the_post();?>
    <li><div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
    <div class="relatedcontent">
    <h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <p>Last updated: <?php the_modified_date(); ?></p>
    </div>
    </li>
    <?
    }
    echo '</ul></div>';
    }
    }
    $post = $orig_post;
    wp_reset_query(); ?>    
    Code (markup):
     
    Solved! View solution.
    Furquan Ahmed, May 25, 2016 IP
    SEMrush
  2. #2
    You almost answered it yourself, but here is a very simple one...
    .relatedthumb{
          width:50px;
          height:50px;
    }
    .relatedthumb a>img{
         width:100%;
    }
    Code (markup):
     
    karjen, May 25, 2016 IP
  3. Furquan Ahmed

    Furquan Ahmed Well-Known Member

    Messages:
    790
    Likes Received:
    72
    Best Answers:
    1
    Trophy Points:
    110
    #3
    Thanks for the answer, its worked perfect.

    Now I want show A Line between each post in related post, How to do this?
     
    Furquan Ahmed, May 25, 2016 IP
  4. devcake

    devcake Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Hello,

    If you want to fix width and height of image thumbnail to exactly 50×50px without stretching, you should make your custom post thumbnail size.
    In your current Theme's functions.php file you need to set the default post thumbnail size by resizing the image proportionally (without distorting it):
    add_image_size('post-thumb', 50, 50, array('center', 'center')); // 50 pixels wide by 50 pixels tall, crop from the center
    PHP:
    Now that you’ve defined custom image size, you can use the_post_thumbnail() in your theme template file:
    <div class="relatedthumb">
    <a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'post-thumb' ); ?></a>
    </div>
    HTML:
    By default when you upload an image to WordPress, it creates different sizes and saves them in the uploads folder. When you define new image size, new image size is only applied on the images you upload after setting image size. It won't have any effect on images that have been already uploaded. To solve this problem you need to generate new sizes for all previously uploaded images.
    The solution is a simple one. On your plugins page, search for the plugin “Force Regenerate Thumbnails”. What it basically does is regenerate all your previous media that you uploaded to your new thumbnail size.

    And that's it.

    Your second question is how to add a line between each post.

    That can be done using css:
    #related_posts li {
      padding-bottom: 20px;
      border-bottom: 1px solid #e1e1e1;
      margin-bottom: 20px;
    }
    
    #related_posts li:last-of-type {
      border-bottom: none;
    }
    Code (CSS):
    Hope this help.
     
    devcake, Dec 15, 2016 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,621
    Likes Received:
    1,553
    Best Answers:
    225
    Trophy Points:
    515
    #5
    I end up with more questions than solutions looking at this wreck of code -- Why would you have a numbered heading inside a bullet point type list item? (redundant)What's with the pointless "div for nothing" and "classes for nothing"? Pointless TITLE attribute redundant to the content of the tag, memory wasting array building asshattery (lemme guess, turdpress? Oh yeah, that's turdpress alright), opening and closing PHP willy-nilly left and right for *** only knows what, paragraph around insufficient text to even be a grammatical paragraph...

    Seriously, why the **** do people use turdpress? Client brought that to me, I'd be dragging it 'round back o' the woodshed with a 12 gauge.
     
    deathshadow, Dec 15, 2016 IP