Support » Plugin: AMP » Shortcodes for Geo Mashup not working

  • Resolved DouglasVB

    (@douglasvb)


    Hello,

    I’m having some issues getting the Geo Mashup plugin’s shortcodes working with the AMP plugin. The maps don’t show up with AMP enabled on the page. Space is reserved for the map but the map itself is not displayed.

    Aside from disabling AMP on the page with the Geo Mashup map, are there any other options that I could try?

    Here is the info from AMP:

    invalid_attribute: [name]
    Details
    Status:
    <amp-iframe>
    Geo Mashup
    HTML (Attribute)

    Invalid markup:
    <amp-iframe … name=”gm-map-1″ …>
    code
    invalid_attribute
    element_attributes
    name: gm-map-1
    src: https://www.oregondivesites.com/?geo_mashup_content=render-map&map_data_key=a016d2caddfa0f405585c35da6cd1aec&admin_code=OR&zoom=6&auto_info_open=false&center_lat=44.162222&center_lng=-120.49&name=gm-map-1&object_id=9&map_content=global
    sandbox: allow-scripts allow-same-origin
    height: 400
    layout: fixed-height
    class: amp-wp-fe51739
    node_name
    name
    parent_name
    amp-iframe
    type
    html_attribute_error
    sources
    [
    {
    “hook”: “the_content”,
    “filter”: true,
    “post_id”: 9,
    “post_type”: “page”,
    “sources”: [
    {
    “type”: “plugin”,
    “name”: “jetpack”,
    “function”: “Jetpack_Simple_Payments::remove_auto_paragraph_from_product_description”
    },
    {
    “type”: “plugin”,
    “name”: “jetpack”,
    “function”: “crowdsignal_link”
    },
    {
    “type”: “plugin”,
    “name”: “jetpack”,
    “function”: “Jetpack_Carousel::check_content_for_blocks”
    },
    {
    “type”: “plugin”,
    “name”: “jetpack”,
    “function”: “jetpack_spotify_embed_ids”
    },
    {
    “type”: “plugin”,
    “name”: “jetpack”,
    “function”: “jetpack_fix_youtube_shortcode_display_filter”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “WP_Embed::run_shortcode”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “WP_Embed::autoembed”
    },
    {
    “type”: “plugin”,
    “name”: “amp”,
    “function”: “AMP_Validation_Manager::add_block_source_comments”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “do_blocks”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “wptexturize”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “wpautop”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “shortcode_unautop”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “prepend_attachment”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “wp_make_content_images_responsive”
    },
    {
    “type”: “plugin”,
    “name”: “jetpack”,
    “function”: “Jetpack_Geo_Location::the_content_microformat”
    },
    {
    “type”: “plugin”,
    “name”: “jetpack”,
    “function”: “Jetpack_Carousel::add_data_img_tags_and_enqueue_assets”
    },
    {
    “type”: “plugin”,
    “name”: “amp”,
    “function”: “AMP_Editor_Blocks::tally_content_requiring_amp_scripts”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “wp_staticize_emoji”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “capital_P_dangit”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “do_shortcode”
    },
    {
    “type”: “plugin”,
    “name”: “jetpack”,
    “function”: “Jetpack_Geo_Location::the_content_location_display”
    },
    {
    “type”: “plugin”,
    “name”: “jetpack”,
    “function”: “sharing_display”
    },
    {
    “type”: “core”,
    “name”: “wp-includes”,
    “function”: “convert_smilies”
    },
    {
    “type”: “plugin”,
    “name”: “advanced-ads”,
    “function”: “Advanced_Ads::inject_content”
    }
    ]
    },
    {
    “block_name”: “core/html”,
    “post_id”: 9,
    “block_content_index”: 2
    },
    {
    “type”: “plugin”,
    “name”: “geo-mashup”,
    “function”: “GeoMashup::map”,
    “shortcode”: “geo_mashup_map”
    }
    ]

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    The name attribute error shouldn’t be a problem. Is there any validation error about a script that is included by that plugin?

    Please share the markup that is being generated in the response (the amp-iframe element), not from DevTools but from viewing the page source.

    Is there any error appearing on the DevTools console?

    Then try deactivating AMP for the page and share the original iframe markup, again from viewing page source and not from DevTools elements panel.

    Thread Starter DouglasVB

    (@douglasvb)

    Thanks for the fast response, @westonruter !

    I don’t see any errors about a script from the Geo Mashup plugin in the AMP error index. But maybe I’m looking in the wrong place?

    Here is from the page source with AMP on:

    <div class="gm-map" style="position: relative;height: 450px; width: 700px;"><iframe name="gm-map-1" src="https://www.oregondivesites.com/?geo_mashup_content=render-map&map_data_key=a016d2caddfa0f405585c35da6cd1aec&admin_code=OR&zoom=6&auto_info_open=false&center_lat=44.162222&center_lng=-120.49&name=gm-map-1&object_id=9&map_content=global" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; overflow: hidden;"></iframe></div>

    Here it is with AMP off:

    <div class="gm-map" style="position: relative;height: 450px; width: 700px;"><iframe name="gm-map-1" src="https://www.oregondivesites.com/?geo_mashup_content=render-map&map_data_key=a016d2caddfa0f405585c35da6cd1aec&admin_code=OR&zoom=6&auto_info_open=false&center_lat=44.162222&center_lng=-120.49&name=gm-map-1&object_id=9&map_content=global" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; overflow: hidden;"></iframe></div>

    FWIW, this is the shortcode I am using from the Geo Mashup plugin:

    [geo_mashup_map admin_code="OR" zoom="6" auto_info_open="false" center_lat="44.162222" center_lng="-120.49"]

    I currently have it in an HTML block although previously I tried it in a “classic” block and a paragraph block. Putting it in the other block types did change the behavior a little bit but none of the blocks led to having the desired result (a rendered map with geo tagged posts displayed). I also tried using the most basic of shortcodes available in Geo Mashup ([geo_mashup_map]) with the same result.

    • This reply was modified 2 years, 1 month ago by .
    Plugin Author Weston Ruter

    (@westonruter)

    And do you see any messages in the browser console (e.g. DevTools)?

    Thread Starter DouglasVB

    (@douglasvb)

    Yes, there is an error related to Geo Mashup:

    amp.js:150 Powered by AMP ⚡ HTML – Version 1906111828200 https://www.oregondivesites.com/
    error.js:195 Origin of <amp-iframe> must not be equal to container  <amp-iframe src=​"https:​/​/​www.oregondivesites.com/​?geo_mashup_content=render-map&map_data_key=a016d2caddfa0f405585c35da6cd1aec&admin_code=OR&zoom=6&auto_info_open=false&center_lat=44.162222&center_lng=-120.49&name=gm-map-1&object_id=9&map_content=global" sandbox=​"allow-scripts allow-same-origin" height=​"400" layout=​"fixed-height" class=​"amp-wp-fe51739 i-amphtml-element i-amphtml-layout-fixed-height i-amphtml-layout-size-defined i-amphtml-error i-amphtml-layout" i-amphtml-layout=​"fixed-height" frameborder=​"0" style=​"height:​ 400px;​">​<span placeholder class=​"amp-wp-iframe-placeholder">​</span>​<noscript>​"<iframe name="gm-map-1" src="https://www.oregondivesites.com/?geo_mashup_content=render-map&map_data_key=a016d2caddfa0f405585c35da6cd1aec&admin_code=OR&zoom=6&auto_info_open=false&center_lat=44.162222&center_lng=-120.49&name=gm-map-1&object_id=9&map_content=global" class="amp-wp-fe51739"></iframe>"</noscript>​<i-amphtml-scroll-container>​</i-amphtml-scroll-container>​</amp-iframe>​ if allow-same-origin is set. See https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md for details.
    $f @ error.js:195
    log.js:349 Uncaught Error: Origin of <amp-iframe> must not be equal to container amp-iframeif allow-same-origin is set. See https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md for details.​​​
        at bb.f.assert (log.js:342)
        at C (log.js:811)
        at Ma (amp-iframe.js:149)
        at X.push.f.l.firstAttachedCallback (amp-iframe.js:262)
        at HTMLElement.b.yd (custom-element.js:430)
        at HTMLElement.b.pg (custom-element.js:907)
        at HTMLElement.b.connectedCallback (custom-element.js:855)
    Plugin Author Weston Ruter

    (@westonruter)

    Ok, this is the problem. You wouldn’t by chance be able to create a subdomain alias for your site, could you?

    Thread Starter DouglasVB

    (@douglasvb)

    I might be able to create a subdomain alias. I’m hosting the site on a Dreamhost VPN and can create subdomans with redirects. I can also create a page rule on Cloudflare. Is one of those options what we’re looking for?

    Plugin Author Weston Ruter

    (@westonruter)

    Yeah, it doesn’t matter how, but the need here is to be able to load the iframe from another origin.

    Once you have this domain alias, you’d then need to prevent WordPress from doing a canonical redirect for such an iframes request for Geo Mashup.

    All the gory details can be found in https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md

    The same-origin iframes are still a painpoint when implementing AMP in WordPress.

    Thread Starter DouglasVB

    (@douglasvb)

    I understand what I need to do (load the iframe from another origin such as a subdomain) but it is above my current skill level to implement that within the existing Geo Mashup plugin. Perhaps @cyberhobo (the author of Geo Mashup) can lend a hand on this?

    Plugin Author Weston Ruter

    (@westonruter)

    @douglasvb I think I actually have another solution for you that avoids having to use a separate subdomain at all. The problem is that the <iframe> gets converted into an <amp-iframe> with the attribute sandbox=​"allow-scripts allow-same-origin". If, however, this attribute were changed to just sandbox=​"allow-scripts" then the issue is fixed. This should work as long as the window in the iframe doesn’t have to interact with the parent frame (e.g. self-resizing).

    Try this compat plugin I just made: https://gist.github.com/westonruter/c3d4d73418b310f12d3cba7245fccebc

    —-

    Aside: Really the plugin should detect if the document origin is the same as the origin of the iframe src and then automatically omit the allow-same-origin keyword.

    Also, if a site could tell the AMP plugin about alternative origins then it could automate the replacement of iframe src attributes to prevent having to change the sandbox.

    Thread Starter DouglasVB

    (@douglasvb)

    Success! Thanks so much, @westonruter!

    Plugin Author Weston Ruter

    (@westonruter)

    @douglasvb I have a PR which should eliminate the need for the filter_content_to_fix_iframe() function the plugin I gave you, so you could comment this out:

    add_filter( 'the_content', __NAMESPACE__ . '\filter_content_to_fix_iframe', 100 );

    Could you give the PR a try? https://github.com/ampproject/amp-wp/pull/2712

    There is a build ZIP of the plugin linked at the bottom of the description.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Shortcodes for Geo Mashup not working’ is closed to new replies.