• Resolved Łukasz

    (@lumay)


    There is problem with img center if I add caption to image. How can I fix it? I have to swipe left to see image.

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter Łukasz

    (@lumay)

    The problem is on WordPress 5.0 with AMP Plugin v. 1.0.0
    In previous version everything was OK with displaying images.

    There is something wrong with style for image with caption-text, but I have no idea what… Could you please help me how I can fix it? Thank you for your help.

    Thread Starter Łukasz

    (@lumay)

    I’ve just back to AMP v 0.7.2, but below you can find AMP code of img with caption, and screen from:
    website & console

    <amp-img class="size-full wp-image-42425 amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" src="https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=680%2C491&ssl=1" alt="Mapa szybkości internetu mobilnego w Europie (3Q 2018) – pobieranie danych" width="680" height="491" srcset="https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?w=1199&ssl=1 1199w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=600%2C433&ssl=1 600w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=768%2C555&ssl=1 768w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=1024%2C740&ssl=1 1024w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=300%2C217&ssl=1 300w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=720%2C520&ssl=1 720w" sizes="(max-width: 680px) 100vw, 680px" data-recalc-dims="1" layout="intrinsic" style="width: 100vw;"><i-amphtml-sizer class="i-amphtml-sizer">
            <img class="i-amphtml-intrinsic-sizer" src="data:image/svg+xml;charset=utf-8,<svg height=&quot;491px&quot; width=&quot;680px&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>">
          </i-amphtml-sizer><img decoding="async" alt="Mapa szybkości internetu mobilnego w Europie (3Q 2018) – pobieranie danych" srcset="https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?w=1199&ssl=1 1199w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=600%2C433&ssl=1 600w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=768%2C555&ssl=1 768w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=1024%2C740&ssl=1 1024w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=300%2C217&ssl=1 300w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=720%2C520&ssl=1 720w" src="https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=680%2C491&ssl=1" sizes="(max-width: 680px) 100vw, 680px" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
    • This reply was modified 5 years, 6 months ago by Łukasz.
    Thread Starter Łukasz

    (@lumay)

    I think that, there should be CSS style:

    (correct in ver 0.7.2 of plugin)

    .i-amphtml-layout-intrinsic
    display: inline-block;
    position: relative;

    instead (incorrect in v 1.0.0 plugin)

    .i-amphtml-layout-responsive

    display: block;

    Where Can I change block on inline-block in plugin files? Thx

    Thanks, Question About PR

    Hi @lumay,
    Thanks for bringing this up, and sorry for the delay.

    Does this PR fix the issue for you?

    https://github.com/ampproject/amp-wp/pull/1728

    Maybe I didn’t capture what you had in mind, though.

    Thanks!

    Plugin Author Weston Ruter

    (@westonruter)

    @lumay Please confirm the fix as that will help us get v1.0.1 released shortly.

    Thread Starter Łukasz

    (@lumay)

    @westonruter
    Nope, Please check it out: https://mobirank.pl/2018/12/05/raport-predkosc-internetu-mobilnego-w-europie-3q-2018/amp/
    It doesn’t work..
    I’ve added code to the style.php:

    .amp-wp-article-content figure.wp-caption {
    max-width: 100%;
    }
    Thread Starter Łukasz

    (@lumay)

    @ryankienstra Thank you, but there is still problem with the image (with caption):
    https://mobirank.pl/2018/12/05/raport-predkosc-internetu-mobilnego-w-europie-3q-2018/amp/

    another images are dislaying correct for example: (images without caption):
    https://mobirank.pl/2018/12/12/klienci-orange-posiadajacy-iphonea-moga-juz-korzystac-z-esim/amp/

    • This reply was modified 5 years, 6 months ago by Łukasz.
    Thread Starter Łukasz

    (@lumay)

    Please let me know if you check it out. Then I’ll return to AMP v. 0.7.2, thx

    Hi @lumay,
    Thanks for testing this, and you’re right that there’s still an issue.

    Does the latest change work for you? It doesn’t have a figure before .wp-caption.

    
    .amp-wp-article-content .wp-caption {
    	max-width: 100%;
    }
    
    

    It looks like this fixes the issue in the link you shared:
    https://mobirank.pl/2018/12/05/raport-predkosc-internetu-mobilnego-w-europie-3q-2018/amp/

    Thanks!

    • This reply was modified 5 years, 6 months ago by Ryan Kienstra.
    Thread Starter Łukasz

    (@lumay)

    @ryankienstra
    Thank you so much! You are the best!!! It’s working now 🙂
    I’ve changed on this:

    .amp-wp-article-content .wp-caption {
    	max-width: 100%;
    }
    • This reply was modified 5 years, 6 months ago by Łukasz.

    Thanks, @lumay! I’ll let you know when this fix is released in 1.0.1. It’ll probably be soon.

    Hi @lumay,
    Version 1.0.1 was just released, and it’s ready for download in /wp-admin.

    It has a fix for the image issue you brought up.

    Thanks for your patience.

    Thread Starter Łukasz

    (@lumay)

    @ryankienstra I’ve just installed v. 1.0.1 It looks like images display correct now! Thank you so much for your help!

    Thanks, @lumay! That’s great to hear.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘amp-img with caption center problem’ is closed to new replies.