Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

responsive images attributes not working in theme override

  • #3620
    Avatar photo[anonymous]

    When I look at the source of a Publii-generated page, I see

    <figure class="featured-image">
      <img
         src="file:///Publii/sites/mysite/preview/media/posts/2/dressing.jpeg"
         srcset="[object Object]" sizes="[object Object]"
         height="2448"
         width="3264"
         alt="">
    </figure>

    Note the <code class=”EnlighterJSRAW” data-enlighter-language=”html”>sizes and <code class=”EnlighterJSRAW” data-enlighter-language=”html”>scrset attributes are <code class=”EnlighterJSRAW” data-enlighter-language=”html”>[object Object]. So something is wrong with my responsive images configuration. Is there a way to troubleshoot this issue? I assume the problem is in my config.json file. Here’s an excerpt of files.responsiveImages from that file:

    {
        "name": "Blank",
        "etc" : "...",
        "files": {
            "responsiveImages": {
                "featuredImages": {
                    "sizes": {
                        "post": "(max-width: 600px) 100vw, (max-width: 800px) 87vw, 700px",
                        "amp": "(max-width: 768px) 100vw, 768px"
                    },
                    "dimensions": {
                        "xs": {
                            "width": 300,
                            "height": "auto",
                            "group": "post,amp"
                        },
                        "sm": {
                            "width": 480,
                            "height": "auto",
                            "group": "post,amp"
                        },
                        "md": {
                            "width": 768,
                            "height": "auto",
                            "group": "post,amp"
                        },
                        "lg": {
                            "width": 1024,
                            "height": "auto",
                            "group": "post"
                        },
                        "xl": {
                            "width": 1360,
                            "height": "auto",
                            "group": "post"
                        },
                        "2xl": {
                            "width": 1600,
                            "height": "auto",
                            "group": "post"
                        }
                    }
                }
            }
    }
    
    #3621
    Avatar photo[anonymous]

    Ah, I suspect it’s because I copied markup from post.hbs into index.hbs, and the context is different. I don’t understand much about context, but I think I can stw and maybe figure it out.