First image in post always low resolution – sidekick theme

  • Author
    Posts
  • #2918968

    Lately, the first image of every post I make on my blog has been low resolution. This only has happened for my last four posts, before that it worked fine.

    My method is to make a post, insert images as I go along from my phone’s camera roll, edit > alignment=centre, link to=none, size=large > done.

    I’m using the sidekick theme and I can’t remember changing any settings recently.

    The blog I need help with is bluetwentyeight.wordpress.com.

    #2919178

    Hi –

    Is the low res image displaying on your phone only? Or on a phone and a computer? Does it continue on a different network connection?

    Please send a link to an affected post so I can take a closer look.

    #2919226

    The problem shows on desktop and mobile.

    Here is my latest post, showing the low resolution first image: https://bluetwentyeight.wordpress.com/2017/04/10/wiring-part-3/

    And here is the last post where it worked properly, which is 5 posts in the past: https://bluetwentyeight.wordpress.com/2017/03/09/fuel-system-part-3/

    You can easily see the problem from the homepage as the first image of each post is always shown: https://bluetwentyeight.wordpress.com/

    The problem occurs across different connections.

    #2919269

    Thank you for those examples. Is this happening through the mobile WordPress app or via the browser?

    #2919277

    Viewing the blog through the wordpress app, the featured image appears perfectly (as in the image used to head the post with a blog snippet). Clicking through to the post in the app, the first image is pixellated.

    #2919278

    However this same behaviour isn’t seen in a mobile or desktop browser – there is no preview of all blog posts as the main page: all the posts are shown in full.

    #2919279

    looking into this further, the code behind the images is different from unaffected vs affected posts.

    unaffected:
    <img data-attachment-id="471" data-permalink="https://bluetwentyeight.wordpress.com/2017/03/09/fuel-system-part-3/img_4884/#main" data-orig-file="https://bluetwentyeight.files.wordpress.com/2017/03/img_4884.jpg?w=810&h=608" data-orig-size="4032,3024" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;1.8&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;iPhone 7&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1489072618&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;3.99&quot;,&quot;iso&quot;:&quot;100&quot;,&quot;shutter_speed&quot;:&quot;0.071428571428571&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="img_4884" data-image-description="" data-medium-file="https://bluetwentyeight.files.wordpress.com/2017/03/img_4884.jpg?w=810&h=608?w=300" data-large-file="https://bluetwentyeight.files.wordpress.com/2017/03/img_4884.jpg?w=810&h=608?w=810" alt="" src="https://bluetwentyeight.files.wordpress.com/2017/03/img_4884.jpg?w=810&h=608" title="" class="aligncenter size-large wp-image-471" srcset="https://bluetwentyeight.files.wordpress.com/2017/03/img_4884.jpg?w=810&h=608 810w, https://bluetwentyeight.files.wordpress.com/2017/03/img_4884.jpg?w=1620&h=1216 1620w, https://bluetwentyeight.files.wordpress.com/2017/03/img_4884.jpg?w=150&h=113 150w, https://bluetwentyeight.files.wordpress.com/2017/03/img_4884.jpg?w=300&h=225 300w, https://bluetwentyeight.files.wordpress.com/2017/03/img_4884.jpg?w=768&h=576 768w, https://bluetwentyeight.files.wordpress.com/2017/03/img_4884.jpg?w=1024&h=768 1024w" sizes="(max-width: 810px) 100vw, 810px">

    effected
    <img data-attachment-id="500" data-permalink="https://bluetwentyeight.wordpress.com/2017/03/30/airbox-clutch-lines-and-stoneguard/img_5017/#main" data-orig-file="https://bluetwentyeight.files.wordpress.com/2017/03/img_5017.jpg?w=574&h=1024" data-orig-size="750,1334" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="img_5017" data-image-description="" data-medium-file="https://bluetwentyeight.files.wordpress.com/2017/03/img_5017.jpg?w=574&h=1024?w=169" data-large-file="https://bluetwentyeight.files.wordpress.com/2017/03/img_5017.jpg?w=574&h=1024?w=576" alt="" src="https://bluetwentyeight.files.wordpress.com/2017/03/img_5017.jpg?w=574&h=1024" title="" class="aligncenter size-large wp-image-500" srcset="https://bluetwentyeight.files.wordpress.com/2017/03/img_5017.jpg?w=84&h=150 84w, https://bluetwentyeight.files.wordpress.com/2017/03/img_5017.jpg?w=169&h=300 169w" sizes="(max-width: 574px) 100vw, 574px">

    the srcset attribute in the problem images seems to be much smaller than in the good ones.

    #2919280

    It seems that the larger sizes supplied in the good srcset are needed to make things work as they should. Something in the theme or wordpress has changed so not include these and the remaining smaller h/w dimensions are forcing the theme to only show a low resolution image but stretch it out over the intended size.

    #2919293

    Good Morning –

    My apologies for the delayed response. I was out for a few days. Thanks for taking the time to post all those details.

    It looks like the image is inserted correctly and perhaps this may be an issue with the theme – I’m investigating that and I’ll post an update here soon.

    #2919294

    Good Morning –

    I’m back with a few more questions. I want to clarify which editor (wp-admin or the new editor) you’re using and the exact steps involved. Which device(s) are being used?

    Are you editing the image size through the html tab?

    Let’s look at this image: https://bluetwentyeight.wordpress.com/wp-admin/post.php?post=511&action=edit

    If you remove the width="269" height="480" and just leave size-large does that fix it?

    #2919297

    Hi, I am using whichever editor is found at /admin. I do most posts from the iOS WordPress app but some on PC through Chrome. I don’t edit image sizing in HTML, I click the ‘edit’ modal over the image and set the size there.

    I tried the above. In the editor, the blurred images show up as they should, crisp and not blurred. Previewing changes and they are back to blurred. I removed the width and height attributes and the image shows up clearly when previewing, but the size is way too large. After I insert an image I set the size to ‘large’ because this seems to give me the best fit on the page (except for first images of course, where it breaks).

    #2919298

    I’m guessing it’s a bug in the featured image style as the theme seems to take the first image as the featured one and those are the ones being effected.

    #2919302

    Hi –

    So far I’ve only been able to replicate this blurred image when using your image from the post rather than a sample image. I’ll be back in touch once I have more details.

    #2919305

    Hi, today I wrote a new post and this time I used the new editor. The problem doesn’t occur. I haven’t had time to check the html to see what’s different yet. but here it is:

    <img data-attachment-id=”551″ data-permalink=”https://bluetwentyeight.wordpress.com/2017/05/06/rust-exploration-2-and-intake/img_5414/#main” data-orig-file=”https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=810″ data-orig-size=”4032,3024″ data-comments-opened=”1″ data-image-meta=”{"aperture":"1.8","credit":"","camera":"iPhone 7","caption":"","created_timestamp":"1493990813","copyright":"","focal_length":"3.99","iso":"32","shutter_speed":"0.05","title":"","orientation":"1"}” data-image-title=”IMG_5414″ data-image-description=”” data-medium-file=”https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=810?w=300″ data-large-file=”https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=810?w=810″ class=”alignnone size-full wp-image-551″ src=”https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=810″ alt=”IMG_5414″ srcset=”https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=810 810w, https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=1620 1620w, https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=150 150w, https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=300 300w, https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=768 768w, https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=1024 1024w” sizes=”(max-width: 810px) 100vw, 810px”>

    #2919306

    pasting as code for readability

    <img data-attachment-id="551" data-permalink="https://bluetwentyeight.wordpress.com/2017/05/06/rust-exploration-2-and-intake/img_5414/#main" data-orig-file="https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=810" data-orig-size="4032,3024" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;1.8&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;iPhone 7&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1493990813&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;3.99&quot;,&quot;iso&quot;:&quot;32&quot;,&quot;shutter_speed&quot;:&quot;0.05&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="IMG_5414" data-image-description="" data-medium-file="https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=810?w=300" data-large-file="https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=810?w=810" class="alignnone size-full wp-image-551" src="https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=810" alt="IMG_5414" srcset="https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=810 810w, https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=1620 1620w, https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=150 150w, https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=300 300w, https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=768 768w, https://bluetwentyeight.files.wordpress.com/2017/05/img_5414.jpg?w=1024 1024w" sizes="(max-width: 810px) 100vw, 810px">

    #2919307

    I ran the blurry image and the one that works through http://exifdata.com/ and the one that works has a lot more Exif data and is a larger size.

    To clarify, have you edited the blurred one at all after taking it? And how were they uploaded both from the mobile app or a different way? I’m trying to narrow down these items so I can reproduce it better.

The topic ‘First image in post always low resolution – sidekick theme’ is closed to new replies.