Support » Theme: Espied » Full image and Jetpack Photon

  • Hi,

    Enjoying this theme for a portfolio, I notice that when Jetpack’s Photon is switched on, the large/full size embedded images that normally are stretched left and right beyond the text margin, are suddenly only moved left but keep the original content width.

    See for example on http://phareo.eu/portfolio/cruising-advice/ where the screen shot image in the middle of the portfolio post is not stretched to extend outside the content width to the right side as it would normally…

    Comparing the source code of the image, I get this when Photon is OFF:

    
    <img data-attachment-id="399" data-permalink="http://phareo.eu/portfolio/cruising-advice/cruisingadvice/" data-orig-file="http://phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg" data-orig-size="1350,678" data-comments-opened="0" 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;0&quot;}" data-image-title="cruisingadvice" data-image-description="" data-medium-file="http://phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice-300x151.jpg" data-large-file="http://phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice-840x422.jpg" class="alignnone size-full wp-image-399" src="http://phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg" alt="cruisingadvice" width="1350" height="678" srcset="http://phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg 1350w, http://phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice-300x151.jpg 300w, http://phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice-840x422.jpg 840w, http://phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice-800x402.jpg 800w" sizes="(max-width: 1350px) 100vw, 1350px" />
    

    (notice the width="1350" height="678" there)

    But width Photon ON :

    
    <img data-attachment-id="399" data-permalink="http://phareo.eu/portfolio/cruising-advice/cruisingadvice/" data-orig-file="https://i2.wp.com/phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg?fit=1350%2C678" data-orig-size="1350,678" data-comments-opened="0" 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;0&quot;}" data-image-title="cruisingadvice" data-image-description="" data-medium-file="https://i2.wp.com/phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg?fit=300%2C151" data-large-file="https://i2.wp.com/phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg?fit=840%2C422" class="alignnone size-full wp-image-399" src="https://i2.wp.com/phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg?resize=1272%2C639" alt="cruisingadvice" srcset="https://i2.wp.com/phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg?w=1350 1350w, https://i2.wp.com/phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg?resize=300%2C151 300w, https://i2.wp.com/phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg?resize=840%2C422 840w, https://i2.wp.com/phareo.eu/wp-content/uploads/sites/25/2015/09/cruisingadvice.jpg?resize=800%2C402 800w" sizes="(max-width: 1272px) 100vw, 1272px" data-recalc-dims="1" />
    

    (notice missing width and height attributes)

    Any way to get it to look like it should while leaving Photon enabled?

Viewing 1 replies (of 1 total)
  • Hi there,

    There’s a pre-existing report about this, so I’ve added a link to this thread to it for the developers to see.

    You can add this CSS via Customize > Additional CSS, and it should correct the image display with Photon active:

    @media screen and (min-width: 57em) {
        img.size-big, .caption-big {
            width: 696px;
        }
    }
    @media screen and (min-width: 66em) {
        img.size-big, .caption-big {
            width: 840px;
        }
    }
    @media screen and (min-width: 75em) {
        img.size-big, .caption-big {
            width: 984px;
        }
    }
    @media screen and (min-width: 84em) {
        img.size-big, .caption-big {
            width: 1128px;
        }
    }
    @media screen and (min-width: 93em) {
        img.size-big, .caption-big {
            width: 1272px;
        }
    }

    Here’s how it should look once the CSS is applied:

Viewing 1 replies (of 1 total)
  • The topic ‘Full image and Jetpack Photon’ is closed to new replies.