Support » Plugin: AMP for WP - Accelerated Mobile Pages » amp-carousel gallery with captions is not valid amp code

  • If you have a post with a [gallery ...] it gets converted in an <amp-carousel> if gallery type is 1 for example.

    This is good as long as images are not captioned; with captions <figure> and <figcaption> are nested inside <amp-carousel> per hardcoded amp templates and this has given me issues:

    – if you inspect from chrome console Elements html, <figure>s are moved by the dev tool outside the <amp-carousel> element, meaning maybe they are not valid inside.

    – as long as you have few images in the gallery, I’ve tested with 2 but maybe even 3 are allowed, the page still renders, but after that, it turns completely BLANK, with all the AMP html code stripped out client side, and it’s seen as invalid by the validator.

    My solution was to filter 'ampforwp_manage_gallery_markup' unsetting the 'image-with-caption-html' key, de facto nullifing the print and the display of the captions.

    Another less destructive solution maybe is to convert figure and figcaption to divs with classes.

    Also please note your figcaption manteined a strange attribute, surrounded by square brackets, I don’t know if it was wanted or not:

    <figcaption [class]="expanded?...

    ref: https://amp.dev/documentation/examples/components/amp-carousel/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    Can you please tell me the steps of how did you create this? So we will try to recreate this issue in our end,

    Thread Starter DrLightman

    (@drlightman)

    After much digging and having encountered another blank page even without the [gallery] but with a lot of images embedded in the content (until 2-3 images is ok, when are more, page turned blank), I found out that the problem arised in the compatibility filter with ShortPixel, ampforwp_short_pixel_cdn, since we have ShortPixel installed.

    The preg_replace in there returned NULL, so the $content becomes empty from there on.

    Using preg_last_error() I dumped the errore code just after it and it was 2 (PREG_BACKTRACK_LIMIT_ERROR).

    So I’m now checking if I must rise this parameter in my server or better tune the preg_replace.

    I can tell right now that it would fail to apply ShortPixel cdn to the amp-img if there is an alt in the image, because it’s not considered in the pattern:

    $content = preg_replace(
    	'/<amp-img(.*?)src="(.*?)" width="(.*?)" height="(.*?)"(.*?)srcset="(.*?)"(.*?)<\/amp-img>/',
    	'<amp-img$1 src="'.$api_url.'/w_$3'.$compress_level.'$2"width="$3"height="$4"$7</amp-img>',
    	$content
    );

    Here is my $content just before being applied to the code above and that generated the NULL in retun:

    $content = '<amp-img class="alignnone wp-image-27553 amp-wp-enforced-sizes" src="https://www.example.org/wp-content/uploads/2014/12/giraffa.jpg" alt="giraffe black white outline" width="127" height="172" layout="intrinsic"><amp-img fallback class="alignnone wp-image-27553 amp-wp-enforced-sizes" src="https://www.example.org/wp-content/uploads/2014/12/giraffa.jpg" alt="giraffe black white outline" width="127" height="172" layout="intrinsic"></amp-img></amp-img><amp-img class="alignnone wp-image-27554 amp-wp-enforced-sizes" src="https://www.example.org/wp-content/uploads/2014/12/lumaca.jpg" alt="snail gastropod mollusk cartoon" width="156" height="99" layout="intrinsic"><amp-img fallback class="alignnone wp-image-27554 amp-wp-enforced-sizes" src="https://www.example.org/wp-content/uploads/2014/12/lumaca.jpg" alt="snail gastropod mollusk cartoon" width="156" height="99" layout="intrinsic"></amp-img></amp-img><amp-img class="alignnone wp-image-27555 amp-wp-enforced-sizes" src="https://www.example.org/wp-content/uploads/2014/12/polipo.jpg" alt="octopus marine life black white outline" width="143" height="132" layout="intrinsic"><amp-img fallback class="alignnone wp-image-27555 amp-wp-enforced-sizes" src="https://www.example.org/wp-content/uploads/2014/12/polipo.jpg" alt="octopus marine life black white outline" width="143" height="132" layout="intrinsic"></amp-img></amp-img><amp-img class="alignnone wp-image-27556 amp-wp-enforced-sizes" src="https://www.example.org/wp-content/uploads/2014/12/tricheco.jpg" alt="walrus marine life black white outline" width="167" height="123" layout="intrinsic"><amp-img fallback class="alignnone wp-image-27556 amp-wp-enforced-sizes" src="https://www.example.org/wp-content/uploads/2014/12/tricheco.jpg" alt="walrus marine life black white outline" width="167" height="123" layout="intrinsic"></amp-img></amp-img><amp-img class="alignnone wp-image-27557 amp-wp-enforced-sizes" src="https://www.example.org/wp-content/uploads/2014/12/pinguino.jpg" alt="standing penguin black white outline" width="93" height="163" layout="intrinsic"><amp-img fallback class="alignnone wp-image-27557 amp-wp-enforced-sizes" src="https://www.example.org/wp-content/uploads/2014/12/pinguino.jpg" alt="standing penguin black white outline" width="93" height="163" layout="intrinsic"></amp-img></amp-img>';
    
    $api_url = 'https://shortpixelcdnexample.org/sp/';
    $compress_level = 'compress_test/';
    
    $content = preg_replace(
    	'/<amp-img(.*?)src="(.*?)" width="(.*?)" height="(.*?)"(.*?)srcset="(.*?)"(.*?)<\/amp-img>/',
    	'<amp-img$1 src="'.$api_url.'/w_$3'.$compress_level.'$2"width="$3"height="$4"$7</amp-img>',
    	$content
    );
    
    echo preg_last_error();
    echo PHP_EOL;
    var_dump($content);
    Thread Starter DrLightman

    (@drlightman)

    FYI, this modified preg_replace() works in my setup in the shortpixel filter:

    
    $content = preg_replace(
    	'/<amp-img(.*?)src="([^"]*)"(.*?)width="([^"]*)" height="([^"]*)"([^>]*)>/',
    	'<amp-img$1 src="'.$api_url.'/w_$4'.$compress_level.'$2"$3 width="$4" height="$5"$6>',
    	$content
    );
    
    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    We created a ticket for this issue. It will be fixing in our future updates.

    Reference: https://github.com/ahmedkaludi/accelerated-mobile-pages/issues/4452

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘amp-carousel gallery with captions is not valid amp code’ is closed to new replies.