Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1373618

    Hi,

    I would like make the image thumb recent post bigger and remove the frame around.
    Could you help me?
    Thanks advance,

    BR,

    Antonio.

    #1373704

    Hey Antonio,

    Thank you for the question.

    You can use this css code to adjust the size of the featured image and remove the border.

    .news-thumb {
        padding: 0;
        height: 52px;
        width: 52px;
        border: 0;
    }
    
    .news-thumb img {
        width: 52px;
        height: 52px;
    }
    

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    #1373731

    Hi Ismael,

    Many thanks Ismael, we tried something like it but the image is pixelate because it is the same image 36x36px.
    How could load a more resolution image?
    Thanks advance,

    BR,

    Antonio.

    #1373746

    Hi,
    Thanks for the feedback, the image srcset options are 36px, 80px, & 180px
    so to use the 80px size image add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_news_thumb_size() { ?>
      <script>
    window.addEventListener('DOMContentLoaded', function() {
    (function($){
    $('.newsbox .news-thumb img.size-widget').attr('width', '80px');
    $('.newsbox .news-thumb img.size-widget').attr('height', '80px');
    $('.newsbox .news-thumb img.size-widget').attr('sizes', '(max-width: 80px) 100vw, 80px');
    $('.newsbox .news-thumb').css({'height': '80px','width': '80px'});
    })(jQuery);
    });
    </script>
      <?php
    }
    add_action('wp_footer', 'custom_news_thumb_size');

    and then change your css to this:

    .news-thumb {
        padding: 0;
        height: 80px;
        width: 80px;
        border: 0;
    }
    
    .news-thumb img {
        width: 80px;
        height: 80px;
    }

    If you want to use the 180px size, just adjust the code to suit.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1374653

    and do not forget the filter – you can change the source for those images by:

    function my_avf_newsbox_image_size( $image_size, array $args, array $instance ){
      if( $args['widget_id'] == ( 'portfoliobox-3' || 'newsbox-2' || 'newsbox-4' ) ){
        $image_size = 'square';
      }
      return $image_size;
    }
    add_filter( 'avf_newsbox_image_size', 'my_avf_newsbox_image_size', 10, 3 );

    filter is for portfolioboxes and newsboxes ! you only had to know the index of your setting.

    #1411166

    Hi,

    I have add the function but its not works.
    Could you help me?
    Thanks advance,

    Antonio.

    #1411189

    Hi,
    It looks like you are refuring to the script that I posted, and when I check the images are 80px, so it looks like it is working.
    Try clearing your browser cache and check again.

    Best regards,
    Mike

    #1411196

    Hi Mike,

    I have remove the browser cache and all caches w3 total cache and keep upload the 36×36 pixels images.
    The only way the images 80×80 pixels are upload is deactivating w3 total cache.
    Do you kwon what is the problem?
    Thanks advance,

    BR,

    Antonio.

    #1411204

    Hi,
    Since they show when the w3 total cache plugin is deactivated it sounds like a caching error, but I don’t know why, try the solution Guenni007 posted.

    Best regards,
    Mike

    #1416071

    Hi Mike,

    Many thanks. It is solved.
    BR,

    Antonio.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Make the thumb recent post bigger’ is closed to new replies.