Support » Plugin: AMP for WP - Accelerated Mobile Pages » ACF for AMP – image not converting into amp-tags

  • Resolved matpeczkowski

    (@matpeczkowski)


    I have an issue with images from google that “img” tag is not properly showed. It should be “amp-img”. So I’ve checked everything and there is one place where images are not in “amp-img” tag. This place is get_sub_field…

    If I use repeater then images from TextEditor doesn’t display properly. Look at the image from my page in content and you will see.

    Here are my ACF for AMP settings:

    
    <?php
        ini_set("highlight.comment", "#abb2bf");
        ini_set("highlight.default", "#61aeee");
        ini_set("highlight.html", "#ffffff");
        ini_set("highlight.keyword", "#c678dd");
        ini_set("highlight.string", "#98c379");
    ?>
    <div class="amp-wp-article-content content-acf">
        <div class="amp-wp-content the_content">
            <?php
                if (have_rows('content')) :
                    while(have_rows('content')) : the_row();
            ?>
                <?php if (get_row_layout() !== 'newsletter') : ?>
                <div class="amp-section-acf">
                    <?php if (get_row_layout() === 'text') : ?>
                        <?= get_sub_field('text') ?>
                    <?php elseif (get_row_layout() === 'image-wide' || get_row_layout() === 'image-narrow') : ?>
                        <amp-img src="<?= wp_get_attachment_image_url(get_sub_field('image'), 'blog-post-details') ?>" alt="<?= get_sub_field('caption') ?>" width="<?= wp_get_attachment_metadata(get_sub_field('image'))['sizes']['blog-post-details']['width'] ?>" height="<?= wp_get_attachment_metadata(get_sub_field('image'))['sizes']['blog-post-details']['height'] ?>" layout="responsive"></amp-img>
                        <?php if (get_sub_field('caption')) : ?>
                            <p class="text-right"><i><?= get_sub_field('caption') ?></i></p>
                        <?php endif; ?>
                    <?php elseif (get_row_layout() === 'video') : ?>
                        <?= get_sub_field('video') ?>
                    <?php elseif (get_row_layout() === 'quote') : ?>
                        <blockquote>
                            <?= get_sub_field('quote_text') ?>
                            <?php if (get_sub_field('quote_author')) : ?>
                                <p class="text-right"><i><?= get_sub_field('quote_author') ?></i></p>
                            <?php endif; ?>
                        </blockquote>
                    <?php elseif (get_row_layout() === 'code') : ?>
                        <pre data-lang="<?= get_sub_field('language') ?>"><?php highlight_string(get_sub_field('code')) ?></pre>
                    <?php elseif (get_row_layout() === 'infobox') : ?>
                        <div class="infobox"><?= get_sub_field('text') ?></div>
                    <?php elseif (get_row_layout() === 'cta-block') : ?>
                        <div class="cta-box">
                            <?= get_sub_field('text') ?>
                            <?php if ($button = get_sub_field('button')) : ?>
                                <div class="cta-button">
                                  <a href="<?= $button['url'] ?>"
                                     target="<?= $button['target'] ?>">
                                    <?= $button['title']?>
                                  </a>
                                </div>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
            <?php
                    endwhile;
                endif;
            ?>
        </div>
    </div>
    

    As you can see there is a line with: get_sub_field('text') and this one doesn’t provide to into my AMP view “amp-img” tag.

    Could you please help me with that?

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor ampforwp

    (@ampforwp)

    Hi @matpeczkowski,

    I’m sharing the code to convert the img tag to amp-img tag. Please apply this on your end where you’re using the get_sub_field('text') and check whether the issue is resolved or not.

     $text_sanitize = get_sub_field('text');
     $sanitizer = new AMPFORWP_Content( $text_sanitize, array(), apply_filters( 'ampforwp_content_sanitizers', array( 'AMP_Img_Sanitizer' => array(),
    					                      'AMP_Video_Sanitizer' => array() ) ) );
     $sanitized_content = $sanitizer->get_amp_content();
     echo $sanitized_content;

    Hope it helps.

    Thank you

    Hi @ampforwp,

    Thank you very much for your response.

    Your solution works, and it helped me with my problem šŸ™‚

    Best regards,
    Mateusz

    Plugin Contributor ampforwp

    (@ampforwp)

    Hi @matpeczkowski,

    Iā€™m glad you got it sorted.

    If you like the plugin, then please support us by leaving feedback at https://wordpress.org/support/plugin/accelerated-mobile-pages/reviews/

    My team and I will really appreciate that.

    Thank you

    Hello @ampforwp

    I have Used ACF For AMP plugin and I have get one issue on PHP editor in admin panel on ACF AMP Posttype. I have used PHP Editor field and I have entered amp-img Tag for image but it’s auto change img tag after save.

    I have checked this issue many time but it’s auto change non AMP image tag. Please check it. And Please reply me ASAP.

    I have used <amp-img> tag after save then auto change tag.
    Please see screenshot url for better understanding. http://i.imgur.com/7p6eXdr.png

    Thank you

    devmitrovics

    (@devmitrovics)

    Hello,
    i am having the same issue. Having flexible layout with WSYWIG editor and img tag is not converting to amp-img. I tried with text_sanitize code but its giving me internal server error.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.