0
<ul class="widget_image_2">
  <?php while ( $query->have_posts() ) : $query->the_post(); ?>
  <li>
    <?php the_post_thumbnail( 'medium'); ?> <a href="<?php the_permalink(); ?>"> <?php echo wp_trim_words( get_the_title(), $number_of_words ); ?></a>
  </li>
     <?php endwhile; ?>
 </ul>

the above code is generating this in the browser:

    <img width="300" src="http://........./wp-content/uploads/2017/11/bitcoin_1-300x200.jpg" 
    class="attachment-medium size-medium wp-post-image" alt="" 
        srcset="http://......../wp-content/uploads/2017/11/bitcoin_1-300x200.jpg 300w, 
http://blewspaper.blogeto.com/wp-content/uploads/2017/11/bitcoin_1-768x512.jpg 768w, 
http://.........../wp-content/uploads/2017/11/bitcoin_1-1024x683.jpg 1024w" 
sizes="(max-width: 300px) 100vw, 300px">

But these two are not allowing the images to take full width in the responsive version(600px):

sizes="(max-width: 300px) 100vw, 300px"
width="300"

Is there a method to get rid of this?

I also checked CSS there is nothing written in the CSS to impose such limitations.

  • Let me re-check it and then update you. – The WP Novice Feb 13 '18 at 9:59
  • I could not find any CSS for the said class. – The WP Novice Feb 13 '18 at 10:01
  • 1
    I'm pretty sure you just need to set the width, object-fit o similar CSS properties for the images you want to take the full width of its container. Otherwise, the images have the width they have. Anyway, I'm not sure if I get your point. Do you have another image size for 600px that should be included in the sizes or srcset attributes? – cybmeta Feb 13 '18 at 10:16
  • 1
    There are several CSS properties that can be used, width and object-fit are just two. I can not know which one you need, but your problem seems to be related with CSS and not with the HTML markup you get from WordPress. The width="300" attribute for a image 300px wide is correct and it does not limit how it can be displayed – cybmeta Feb 13 '18 at 10:22
  • 1
    Yes, that too, but it is not the problem you was talking about. You specifically said you didn't want to create another custom thumbnail :) but to have the current one be 100% wide, and that is a pure CSS issue. Anyway, glad you fix your problem. – cybmeta Feb 13 '18 at 11:07
2

Change image size medium to large e.g the_post_thumbnail( 'large' ). If you enlarge 300px image to 600px your image will be distorted. Or if you need more control on image size then you have to register a new image size using add_image_size().

  • 1
    Then it can be resolved using CSS. Just use .wp-post-image { width: 100%; max-width:100% }. Btw scaling a 300px width image to 600px maybe good for optimization according to you, but that's not a good UX. – obiPlabon Feb 13 '18 at 10:04
  • 1
    You are defining a hard crop size here, WordPress will create a custom-size image with 220x180 dimension. What do mean "replaced by auto"? Whenever you display custom-size image with the_post_thumbnail() function WP will add the width attribute. But if you're thinking about removing the attribute then this might help you css-tricks.com/snippets/wordpress/… – obiPlabon Feb 13 '18 at 10:20
  • 1
    If you set hard crop to true in your case it is true then the image height will be exact 180px. To understand cropping factors please check developer.wordpress.org/reference/functions/add_image_size/… – obiPlabon Feb 13 '18 at 10:36
  • 1
    Thanks. Good to hear that my suggestion worked for you. I have 3 years of experience in WP and PHP. But I'm fluent in WP API than raw PHP. To become good in PHP I'd suggest you to focus on one topic and learn as much as you can then create something useful using what you learned. For instance, if you focus on string manipulation then learn whatever you can on string manipulation related to PHP and after completing the initial learning create something useful, maybe an extensive string manipulation library. – obiPlabon Feb 13 '18 at 11:21
  • 1
    Don't worry, you'll learn quickly. Focus and keep up the hard work. – obiPlabon Feb 13 '18 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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