AMP

Important: this documentation is not applicable to your currently selected format websites!

amp-story-page-attachment

Description

A panel of content that opens inline with an AMP story page.

 

Required Scripts

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

Usage

amp-story-page-attachment allows additional content in the form of inline AMPHTML content on specific AMP story pages. This content is revealed to users through a "swipe up" gesture, or a tap on the call to action element. A UI button prompting the viewer to open the attachment will appear at the bottom of every page with a amp-story-page-attachment element.


<amp-story-page id="page-attachment-example">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://example.ampproject.org/helloworld/bg1.jpg" width="900" height="1600">
  </amp-story-grid-layer>
  <amp-story-page-attachment layout="nodisplay">
    <h1>My title</h1>
    <p>Lots of interesting text with <a href="https://example.ampproject.org">links</a>!</p>
    <p>More text and a YouTube video!</p>
    <amp-youtube
        data-videoid="b4Vhdr8jtx0"
        layout="responsive"
        width="480" height="270">
    </amp-youtube>
    <p>And a tweet!</p>
    <amp-twitter
        data-tweetid="885634330868850689"
        layout="responsive"
        width="480" height="270">
    </amp-twitter>
  </amp-story-page-attachment>
</amp-story-page>

Placement

The <amp-story-page-attachment> element must be the last child of <amp-story-page>, and must have the layout="nodisplay" attribute. The attachment AMPHTML content is expected to be provided inline in your AMP Story, within this <amp-story-page-attachment> tag.

Both amp-story-page-attachment and amp-story-page-outlink must be the last child tag of an amp-story-page. Because of this, you may include neither or one, but not both.

Attributes

When no attributes are set, the default UI will render:

amp-story-page-attachment-default

<amp-story-page-attachment
  layout="nodisplay">
   ...
</amp-story-page-attachment>

theme (optional)

String representing the color theme, default is light. Accepts values light & dark.

amp-story-page-attachment-dark-theme

<amp-story-page-attachment
  layout="nodisplay"
  theme="dark">
  ...
</amp-story-page-attachment>

cta-text (optional)

String that customizes the button text. The default is "Swipe up".

amp-story-page-attachment-cta-text

<amp-story-page-attachment
  layout="nodisplay"
  cta-text="Call To Action">
   ...
</amp-story-page-attachment>

cta-image (optional)

String representing a URL pointing to an image. Optimize performance and avoid distortion by using a 48x48px image.

<amp-story-page-attachment
  layout="nodisplay"
  cta-image="images/48x48image.jpg">
   ...
</amp-story-page-attachment>

amp-story-page-attachment-1-image

cta-image-2 (optional)

String representing a URL pointing to an image. Two images will display when cta-image and cta-image-2 are defined. Optimize performance and avoid distortion by using a 48x48px image.

<amp-story-page-attachment
  layout="nodisplay"
  cta-image="images/48x48image.jpg"
  cta-image-2="images/48x48image2.jpg">
   ...
</amp-story-page-attachment>

amp-story-page-attachment-2-images

title (optional)

String that displays in the attachment's header when scrolling beyond the height of the viewport.

<amp-story-page-attachment
  layout="nodisplay"
  title="My title"
  >
  ...
</amp-story-page-attachment>

amp-story-page-attachment previously supported outlinking. Please use amp-story-page-outlink for one-tap outlinking UI.

Supported AMP Components in a Page Attachment

The attachment AMPHTML content is expected to be provided inline in your AMP Story, within this <amp-story-page-attachment> tag.

Story page attachments allow the same HTML elements as AMP Story along with additional components listed below, such as third party video players or social media embeds. This means you can add additional content that is too verbose or disallowed in an AMP Story page.

List of allowed AMP components in a page attachment:

  • <amp-3d-gltf>
  • <amp-3q-player>
  • <amp-accordion>
  • <amp-audio>
  • <amp-beopinion>
  • <amp-bodymovin-animation>
  • <amp-brid-player>
  • <amp-brightcove>
  • <amp-byside-content>
  • <amp-call-tracking>
  • <amp-carousel>
  • <amp-dailymotion>
  • <amp-date-countdown>
  • <amp-embedly-card>
  • <amp-facebook>
  • <amp-facebook-comments>
  • <amp-facebook-like>
  • <amp-facebook-page>
  • <amp-fit-text>
  • <amp-fx-collection>
  • <amp-fx-flying-carpet>
  • <amp-gfycat>
  • <amp-gfycat>
  • <amp-gist>
  • <amp-gist>
  • <amp-google-document-embed>
  • <amp-hulu>
  • <amp-ima-video>
  • <amp-image-slider>
  • <amp-img>
  • <amp-imgur>
  • <amp-instagram>
  • <amp-izlesene>
  • <amp-jwplayer>
  • <amp-kaltura-player>
  • <amp-list>
  • <amp-live-list>
  • <amp-mathml>
  • <amp-megaphone>
  • <amp-mowplayer>
  • <amp-nexxtv-player>
  • <amp-o2-player>
  • <amp-ooyala-player>
  • <amp-pan-zoom>
  • <amp-pinterest>
  • <amp-playbuzz>
  • <amp-powr-player>
  • <amp-reach-player>
  • <amp-reddit>
  • <amp-riddle-quiz>
  • <amp-soundcloud>
  • <amp-springboard-player>
  • <amp-timeago>
  • <amp-twitter>
  • <amp-video>
  • <amp-video-iframe>
  • <amp-vimeo>
  • <amp-vine>
  • <amp-viqeo-player>
  • <amp-vk>
  • <amp-wistia-player>
  • <amp-yotpo>
  • <amp-youtube>
Daha fazla yardıma mı ihtiyacınız var?

Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.

Stack Overflow'a git
Bir hata veya eksik bir özellik mi buldunuz?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

GitHub'a git