Query loop showing blurred featured images

  • Resolved norcon

    (@norcon)


    6 months, 1 week ago

    Hi everyone.

    I’m trying to fix my post list. I’ve created a query loop for my post list and everything looks fine when I’m in the editor. When then I publish and go check the published pages, all the images are blurred. I did select “full size” for the resolution of the images, so I don’t think the issue is there.

    What else do I need to fix?

    • This topic was modified 6 months, 1 week ago by norcon.
    • This topic was modified 6 months, 1 week ago by norcon.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • r1k0

    (@r1k0)

    6 months, 1 week ago

    Hey @norcon,

    I took a closer look at your site and the images are thumbnail sized that is why they are blurry.

    This would happen if your featured image block in the post page query loop is currently set to “Full Size” while the one for the post page template is set to “Thumbnail”.

    In order to get your desired results, head over to Appearance > Editor > Templates, then click the “Blog Home template”. Click the list view, locate the featured image block, and change the resolution to “Full Size”. Save the changes and check if this fixes the issue.

    Hope this helps.

    • This reply was modified 6 months, 1 week ago by r1k0.
    Thread Starter norcon

    (@norcon)

    6 months, 1 week ago

    Hello @r1k0,

    thanks for answering. Yes, the resolution in the blog home template is set to full size. That’s why I’m so perplexed…

    Thread Starter norcon

    (@norcon)

    6 months ago

    @r1k0 I took a screenshot too, and from the picture one can see that the featured images are clear. But they stop being so in the published version of the blog home.

    r1k0

    (@r1k0)

    6 months ago

    I see, this is really weird behavior.

    I also noticed that the thumbnail images are 88px X 88px and not the standard WordPress thumbnails of 150px X 150px. Does your site use any image optimization plugin?

    Could you perform a plugin conflict test? Deactivate all your plugins and activate them one by one while viewing the affected page for any changes. This should help you narrow down the culprit plugin.

    Please make a full backup of your site files and database before attempting the test.

    The screenshot was really helpful. If you wouldn’t mind sharing a similar picture in your next response, but from the post page edit view.

    Try this and let us know how it goes.

    Thread Starter norcon

    (@norcon)

    6 months ago

    Hi @r1k0 .

    I have deactivated all the plugins, waited a couple of hours just in case, checked the website but the images are still blurred. So it’s not a plugin problem…

    r1k0

    (@r1k0)

    6 months ago

    Hi @norcon,

    Thanks for the troubleshooting steps. I’ve tried to reproduce the issue on my end, but haven’t been able to get the same results so far. I’ll continue investigating to see if I can replicate it, but I can’t guarantee a solution. As a final request, could you share the screenshot of the blog home template, but in code editor view? If the code is too long, use a service like paste bin to paste the entire code, and share it in your next response so that I can look through it.

    Something like this:

    View post on imgur.com

    If you need further assistance, you might consider hiring someone to take a closer look. WordPress has a job board here: https://jobs.wordpress.net/.

    Best of luck.

    Thread Starter norcon

    (@norcon)

    6 months ago

    Hi again @r1k0 ,

    Thanks for trying!

    Here is the code for the query loop:

    <!-- wp:group {"layout":{"type":"constrained"}} -->

    <div class="wp-block-group"><!-- wp:query {"queryId":34,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":"","perPage":6,"inherit":true},"metadata":{"categories":["posts"],"patternName":"twentytwentytwo/query-grid","name":"Grid of posts"},"align":"wide","layout":{"contentSize":null,"type":"constrained"}} -->

    <div class="wp-block-query alignwide"><!-- wp:separator {"opacity":"css","className":"alignwide is-style-wide"} -->

    <hr class="wp-block-separator has-css-opacity alignwide is-style-wide"/>

    <!-- /wp:separator -->

    <!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"background","layout":{"type":"flex","justifyContent":"space-between"}} -->

    <!-- wp:query-pagination-previous {"fontSize":"small"} /-->

    <!-- wp:query-pagination-numbers /-->

    <!-- wp:query-pagination-next {"fontSize":"small"} /-->

    <!-- /wp:query-pagination --></div>

    <!-- /wp:query --></div>

    <!-- /wp:group -->

    <!-- wp:query {"queryId":57,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":"","inherit":true,"perPage":6},"metadata":{"categories":["posts"],"patternName":"twentytwentytwo/query-image-grid","name":"Grid of image posts"},"layout":{"contentSize":null,"type":"constrained"}} -->

    <div class="wp-block-query"><!-- wp:post-template {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"blockGap":"var:preset|spacing|40"}},"textColor":"background","fontSize":"small","layout":{"type":"grid","columnCount":3}} -->

    <!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"200px"} /-->

    And here is the code for the whole blog home:

    <!-- wp:group {"backgroundColor":"foreground","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->

    <div class="wp-block-group has-foreground-background-color has-background"><!-- wp:image {"id":658,"width":"1091px","height":"auto","sizeSlug":"large","linkDestination":"none"} -->

    <figure class="wp-block-image size-large is-resized"><img src="https://www.norcon-sf.no/wp-content/uploads/2025/09/Norcon-logo_hvit-1-1024x679.png" alt="" class="wp-image-658" style="width:1091px;height:auto"/></figure>

    <!-- /wp:image -->

    <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->

    <div class="wp-block-group"><!-- wp:navigation {"ref":656,"textColor":"background","overlayBackgroundColor":"foreground"} /--></div>

    <!-- /wp:group -->

    <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->

    <div class="wp-block-group"><!-- wp:archives {"displayAsDropdown":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"background"} /--></div>

    <!-- /wp:group --></div>

    <!-- /wp:group -->

    <!-- wp:group {"style":{"background":{"backgroundImage":{"url":"https://www.norcon-sf.no/wp-content/uploads/2025/09/waterfall-8162449-scaled.jpg","id":607,"source":"file","title":"waterfall-8162449"},"backgroundSize":"cover"},"dimensions":{"minHeight":"927px"}},"layout":{"type":"constrained"}} -->

    <div class="wp-block-group" style="min-height:927px"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->

    <div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"border":{"radius":"100px","width":"0px","style":"none"},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"typography":{"fontStyle":"normal","fontWeight":"700"},"color":{"background":"#000933"}},"textColor":"background","fontSize":"x-large"} -->

    <p class="has-text-align-center has-background-color has-text-color has-background has-link-color has-x-large-font-size" style="border-style:none;border-width:0px;border-radius:100px;background-color:#000933;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);font-style:normal;font-weight:700">Siste innlegg / Latest posts</p>

    <!-- /wp:paragraph --></div>

    <!-- /wp:group -->

    <!-- wp:group {"layout":{"type":"constrained"}} -->

    <div class="wp-block-group"><!-- wp:query {"queryId":34,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":"","perPage":6,"inherit":true},"metadata":{"categories":["posts"],"patternName":"twentytwentytwo/query-grid","name":"Grid of posts"},"align":"wide","layout":{"contentSize":null,"type":"constrained"}} -->

    <div class="wp-block-query alignwide"><!-- wp:separator {"opacity":"css","className":"alignwide is-style-wide"} -->

    <hr class="wp-block-separator has-css-opacity alignwide is-style-wide"/>

    <!-- /wp:separator -->

    <!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"background","layout":{"type":"flex","justifyContent":"space-between"}} -->

    <!-- wp:query-pagination-previous {"fontSize":"small"} /-->

    <!-- wp:query-pagination-numbers /-->

    <!-- wp:query-pagination-next {"fontSize":"small"} /-->

    <!-- /wp:query-pagination --></div>

    <!-- /wp:query --></div>

    <!-- /wp:group -->

    <!-- wp:query {"queryId":57,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":"","inherit":true,"perPage":6},"metadata":{"categories":["posts"],"patternName":"twentytwentytwo/query-image-grid","name":"Grid of image posts"},"layout":{"contentSize":null,"type":"constrained"}} -->

    <div class="wp-block-query"><!-- wp:post-template {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"blockGap":"var:preset|spacing|40"}},"textColor":"background","fontSize":"small","layout":{"type":"grid","columnCount":3}} -->

    <!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"200px"} /-->

    <!-- wp:columns {"isStackedOnMobile":false,"style":{"spacing":{"blockGap":"0.5rem"}}} -->

    <div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column -->

    <div class="wp-block-column"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"margin":{"top":"0.2em"}}},"fontSize":"small","fontFamily":"system-font"} /--></div>

    <!-- /wp:column -->

    <!-- wp:column {"width":"4em"} -->

    <div class="wp-block-column" style="flex-basis:4em"><!-- wp:post-date {"textAlign":"right","format":"m.d.y","style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /--></div>

    <!-- /wp:column --></div>

    <!-- /wp:columns -->

    <!-- /wp:post-template -->

    <!-- wp:separator {"opacity":"css","className":"alignwide is-style-wide"} -->

    <hr class="wp-block-separator has-css-opacity alignwide is-style-wide"/>

    <!-- /wp:separator -->

    <!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"background","layout":{"type":"flex","justifyContent":"space-between"}} -->

    <!-- wp:query-pagination-previous {"fontSize":"small"} /-->

    <!-- wp:query-pagination-numbers /-->

    <!-- wp:query-pagination-next {"fontSize":"small"} /-->

    <!-- /wp:query-pagination --></div>

    <!-- /wp:query --></div>

    <!-- /wp:group -->

    <!-- wp:group {"tagName":"main","style":{"color":{"background":"#000933"}}} -->

    <main class="wp-block-group has-background" style="background-color:#000933"><!-- wp:separator {"opacity":"css","className":"alignwide is-style-wide"} -->

    <hr class="wp-block-separator has-css-opacity alignwide is-style-wide"/>

    <!-- /wp:separator -->

    <!-- wp:group -->

    <div class="wp-block-group"><!-- wp:columns -->

    <div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->

    <div class="wp-block-column" style="flex-basis:25%"></div>

    <!-- /wp:column -->

    <!-- wp:column {"width":"50%","style":{"spacing":{"padding":{"right":"0","left":"0"},"blockGap":"0"},"border":{"width":"0px","style":"none"}}} -->

    <div class="wp-block-column" style="border-style:none;border-width:0px;padding-right:0;padding-left:0;flex-basis:50%"><!-- wp:essential-blocks/countdown {"blockId":"eb-countdown-pxn0r","blockMeta":{"desktop":".eb-countdown-pxn0r.eb-cd-wrapper{max-width:819px;margin:0px;padding:0px;background-color:rgba(255,255,255,1);border-radius:10px;box-shadow:rgba(155,155,155,1) 11px 12px 20px 0px;transition:background 0.5s,border 0.5s,border-radius 0.5s,box-shadow 0.5s}div.eb-countdown-pxn0r.eb-cd-wrapper{margin-left:auto;margin-right:auto}.eb-countdown-pxn0r.eb-cd-wrapper:hover{box-shadow:rgba(155,155,155,1) 11px 12px 20px 0px}.eb-countdown-pxn0r.eb-cd-wrapper:before{transition:background 0.5s,opacity 0.5s,filter 0.5s}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner{flex-direction:row}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box{background-color:var(\u002d\u002deb-global-background-color);transition:background 0.5s,border 0.5s,border-radius 0.5s,box-shadow 0.5s;padding-top:20px;padding-bottom:20px;border-radius:10px;flex-direction:column;align-items:center}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box:hover{border-radius:10px}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box span.eb-cd-digit{font-size:62px;line-height:1.1em;color:var(\u002d\u002deb-global-heading-color)}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box + .box:before{position:absolute;right:90%;content:\u0022:\u0022;color:rgba(91,91,91,1);top:46%;padding-right:18%;font-size:44px}div.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box:before{line-height:0}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box span.eb-cd-label{font-size:16px;font-weight:500;text-transform:uppercase;color:rgba(77,77,77,1)}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box + .box{margin:0;margin-left:30px}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box.cd-box-day span.eb-cd-digit{color:rgba(52,219,213,1)}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box.cd-box-hour span.eb-cd-digit{color:rgba(138,65,255,1)}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box.cd-box-minute span.eb-cd-digit{color:rgba(1,206,135,1)}.eb-countdown-pxn0r.eb-cd-wrapper .eb-cd-inner .box.cd-box-second span.eb-cd-digit{color:rgba(252,105,125,1)}","tab":"","mobile":""},"preset":"preset3","showSeparator":true,"separatorColor":"rgba(91,91,91,1)","endTimeStamp":1781271462000,"dayDgColor":"rgba(52,219,213,1)","hourDgColor":"rgba(138,65,255,1)","minuteDgColor":"rgba(1,206,135,1)","secondDgColor":"rgba(252,105,125,1)","labelsColor":"rgba(77,77,77,1)","recurringCountdownEnd":1710924365077,"dg_FontSize":62,"dg_LineHeight":1.1000000000000001,"lb_FontSize":16,"lb_FontWeight":"500","lb_TextTransform":"uppercase","wrpW_Range":819,"WrpBg_backgroundColor":"rgba(255,255,255,1)","wrpBdSd_hOffset":11,"wrpBdSd_vOffset":12,"wrpBdSd_blur":20,"wrpBdSd_shadowColor":"rgba(155,155,155,1)","wrpBdSd_Rds_Top":"10","wrpBdSd_Rds_Right":"10","wrpBdSd_Rds_Bottom":"10","wrpBdSd_Rds_Left":"10","wrpMrg_Top":"0","wrpMrg_Right":"0","wrpMrg_Bottom":"0","wrpMrg_Left":"0","wrpPad_Top":"0","wrpPad_Right":"0","wrpPad_Bottom":"0","wrpPad_Left":"0","classHook":"eb_animation eb___animated eb___pulse","commonStyles":{"desktop":".eb-parent-eb-countdown-pxn0r{display:block}/* Css for Animation */body:not(.wp-admin) .eb-parent-eb-countdown-pxn0r.eb_animation{visibility:hidden;opacity:0;transition:ease-in 1000ms}body:not(.wp-admin) .eb-parent-eb-countdown-pxn0r.eb_animation.eb__animated{visibility:visible;opacity:1}.eb-parent-eb-countdown-pxn0r.eb_animation.eb__animated{animation-duration:1000ms;animation-delay:0ms}.root-eb-countdown-pxn0r{position:relative}.root-eb-countdown-pxn0r.eb_liquid_glass-effect1{background-color:#FFFFFF1F;backdrop-filter:blur(24px)}.root-eb-countdown-pxn0r.eb_liquid_glass-effect2{background-color:#FFFFFF1F;backdrop-filter:blur(24px) brightness(1)}.root-eb-countdown-pxn0r.eb_liquid_glass_shadow-effect1{border-width:1px;border-color:#FFFFFF1F;border-style:solid;border-radius:24px}.root-eb-countdown-pxn0r.eb_liquid_glass-effect1 \u003e .eb-parent-wrapper \u003e div{background:transparent}","tab":".eb-parent-eb-countdown-pxn0r{display:block}","mobile":".eb-parent-eb-countdown-pxn0r{display:block}"},"animationData":{"style":"eb___pulse","speed":1000,"delay":0}} -->

    <div class="wp-block-essential-blocks-countdown root-eb-countdown-pxn0r"><div class="eb-parent-wrapper eb-parent-eb-countdown-pxn0r eb_animation eb___animated eb___pulse"><div class="eb-countdown-pxn0r eb-cd-wrapper preset3"><div class="eb-cd-inner" blockid="eb-countdown-pxn0r" data-deadline-time="1781271462000" data-is-evergreen-time="false" data-evergreen-time-hours="11" data-evergreen-time-minutes="59" data-evergreen-recurring="false" data-evergreen-restart-time="0" data-evergreen-deadline-time="1710924365077"><div class="box cd-box-day"><span class="eb-cd-digit">00</span><span class="eb-cd-label">Days</span></div><div class="box cd-box-hour"><span class="eb-cd-digit">00</span><span class="eb-cd-label">Hours</span></div><div class="box cd-box-minute"><span class="eb-cd-digit">00</span><span class="eb-cd-label">Minutes</span></div><div class="box cd-box-second"><span class="eb-cd-digit">00</span><span class="eb-cd-label">Seconds</span></div></div></div></div></div>

    <!-- /wp:essential-blocks/countdown --></div>

    <!-- /wp:column -->

    <!-- wp:column {"width":"25%"} -->

    <div class="wp-block-column" style="flex-basis:25%"><!-- wp:image {"id":740,"width":"133px","height":"auto","sizeSlug":"large","linkDestination":"none","align":"left"} -->

    <figure class="wp-block-image alignleft size-large is-resized"><img src="https://www.norcon-sf.no/wp-content/uploads/2025/10/Untitled-design10-1024x1024.png" alt="" class="wp-image-740" style="width:133px;height:auto"/></figure>

    <!-- /wp:image --></div>

    <!-- /wp:column --></div>

    <!-- /wp:columns --></div>

    <!-- /wp:group --></main>

    <!-- /wp:group -->

    Have a nice evening!

    r1k0

    (@r1k0)

    6 months ago

    Hey @norcon,

    Hope you are well. I believe I found the cause of the issue.

    I looked at your site, and there is a new post with a clear image. I inspected the difference in that image and the other ones. I noticed the clear image is pulled from a larger resolution image (1024×1024) while the other ones are pulled from smaller resolution images (88×88). The container for the featured images is 200×200; the images try to stretch to fit the container and end up being blurry. I would advise you to go to each post and replace the featured image with large-resolution images. Hopefully, this should fix the issue.

    I rebuilt sections of your site on my side, this is how it turned out.

    View post on imgur.com

    The first image I intentionally set the resolution to 88×88, while the other image has its original resolution pulled, which I pulled from the individual posts on your site.

    Give this a try and let me know how it goes.

    Cheers.

    • This reply was modified 6 months ago by r1k0.
    Thread Starter norcon

    (@norcon)

    5 months, 3 weeks ago

    Hello again @r1ko,

    thanks so much for the horrendous amount of time you must’ve spent on this. And yes, you must be right, that’s the problem. I tried changing the featured image of the post with some random pictures with the right resolution and it worked. Many, many thanks!!

    r1k0

    (@r1k0)

    5 months, 3 weeks ago

    Hello @norcon,

    I’m glad the issue is now fixed. I don’t mind the time, I loved the challenge.

    Best of luck.

Viewing 10 replies - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.