Tagged: , , , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 15, 2019 at 12:59 pm #1054096
    wzshop

    Hi,
    I am trying to show the featured image on the mobile for single blog posts.
    I found this post: https://kriesi.at/support/topic/featured-image-not-displaying-on-mobile#post-717276 which does make the featured image to show.
    However, when testing it on my desktop, the quality of the featured image seems to be very low.
    How can i increase the featured image resolution on mobile pages?

    Thanks

    • This topic was modified 5 years, 6 months ago by wzshop.
    January 15, 2019 at 6:46 pm #1054265
    Victoria

    Hey wzshop,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    January 16, 2019 at 3:37 pm #1054570
    wzshop

    Hi,
    Sorry for the late reply. I have been studying a lot about srcset and sizes property in the img tag;), just so I am able to understand what is happening.
    See the private content URL. The thing is that normally the thumbnails/featured images are hidden when on mobile devices (setting Single post with small preview image). Therefore the sizes attribute in the image tag is set to (max-width: 180px) 100vw, 180px, meaning the shown thumb on screensize between 180 and the mobile screen setting (768px default) is max 180px. Therefore the quality is too low. Removing the sizes attribute or changing it to (max-width: 180px) 100vw will collect the image that the best quality for the users viewport.

    -Since I am still quite new to this, I really like other thoughts on this issue.
    -Also, what is the best way to make these adjustments in the Enfold theme.
    -Also, the reason why Enfold coded it like this, is to make sure to not download a big image when the users viewport is large, since only a thumbnail needs to be shown (normally, without the custom CSS changes). Correct?

    January 19, 2019 at 6:24 pm #1055927
    Mike

    Hi,
    Sorry for the late reply, I have taken a look at your page and I see the attribute “(max-width: 180px) 100vw” in place and it seems the 450px image is showing. So I assume you have made this change already?
    Is there anything else we can assist with on this issue?

    Best regards,
    Mike

    January 19, 2019 at 8:11 pm #1055965
    wzshop

    How is that an answer?
    It is showing an 450px image (maybe) but the quality is 180px. That is why the image is all blurry. The enfold behavior is good, for normal circumstances, but as I want to show the featured image on small screens as well, the shown image is of too low quality.

    January 19, 2019 at 8:28 pm #1055969
    Mike

    Hi,
    Sorry, when I look at the image it looks to be good quantity, did you see the screenshot I included? It’s not blurry for me in Chrome or on a Android mobile.
    Which browser / device are you using?

    Best regards,
    Mike

    January 19, 2019 at 8:34 pm #1055970
    wzshop

    Just desktop, windows 10, chrome 71.0.3578.98
    Image seems to be low quality. Try deleting the sizes attribute in developer mode. The quality of the image should increase, which is the quality i like.

    January 19, 2019 at 10:42 pm #1055978
    Mike

    Hi,
    I tried removing the sizes attribute, but I didn’t notice a change, but since you did, try adding this code to the end of your functions.php file in Appearance > Editor:

    function remove_sizes(){
?>
<script>
(function($){
$(document).ready(function(){
$('img').removeAttr('sizes');
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_sizes');

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.