Skip to content

📖 [Amp story] [Page attachments] Amp.dev Docs for New Page Attachment Features#34883

Closed
raxsha wants to merge 12 commits intoampproject:mainfrom
raxsha:docs
Closed

📖 [Amp story] [Page attachments] Amp.dev Docs for New Page Attachment Features#34883
raxsha wants to merge 12 commits intoampproject:mainfrom
raxsha:docs

Conversation

@raxsha
Copy link
Copy Markdown
Contributor

@raxsha raxsha commented Jun 16, 2021

Adding amp.dev documentation for the changes to AMP story page attachments:

  • Updated amp-story-page-attachment docs
  • Added amp-story-page-outlink docs

More info in I2S: #34449

Fixes #34790.

@raxsha raxsha requested a review from processprocess June 16, 2021 07:19
@amp-owners-bot
Copy link
Copy Markdown

Hey @gmajoulet, @newmuis! These files were changed:

extensions/amp-story/amp-story-page-attachment.md
extensions/amp-story/amp-story-page-outlink.md
extensions/amp-story/img/amp-story-page-attachment-1-image.png
extensions/amp-story/img/amp-story-page-attachment-2-images.png
extensions/amp-story/img/amp-story-page-attachment-cta-text.png
extensions/amp-story/img/amp-story-page-attachment-dark-theme.png
extensions/amp-story/img/amp-story-page-attachment-default.png
extensions/amp-story/img/amp-story-page-outlink-cta-image-none.png
extensions/amp-story/img/amp-story-page-outlink-cta-image.png
extensions/amp-story/img/amp-story-page-outlink-cta-text.png
extensions/amp-story/img/amp-story-page-outlink-custom-theme.png
extensions/amp-story/img/amp-story-page-outlink-dark-theme.png
+2 more

A UI prompt to open the attachment will automatically be added at the bottom of every page that configured an attachment.
Story page attachments allow you to provide additional content in the form of inline AMPHTML content on specific AMP story pages. This content can be revealed by users through a "swipe up" gesture, or a tap on bottom of the page. A UI button guiding the viewer to open the attachment will appear at the bottom of every page with a `amp-story-page-attachment` element.

<amp-img alt="AMP Story page attachment" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-attachment.gif" width="240" height="480">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to update this gif to show the new UI.


String that represents the color theme, default is light. Accepts values `light` & `dark`.

![amp-story-page-attachment-dark-theme](img/amp-story-page-attachment-dark-theme.png)
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This example includes image attributes. We probably don't want to show an image like this until the cta-image & cta-image-2 section.

Let's use an image that is the default UI but with dark theme here.
In that way the reader won't have to try and figure out why it looks different with the dark squares.

@processprocess processprocess self-assigned this Jul 20, 2021
@processprocess
Copy link
Copy Markdown
Contributor

Closing so it can be pushed to from a new branch #35338

processprocess added a commit that referenced this pull request Aug 2, 2021
… Features #34883 (#35338)

* new page attachment docs

* Update amp-story-page-attachment.md

Update attributes to follow pattern of other documentation.

* Update amp-story-page-attachment.md

change img to image.

* Update amp-story-page-attachment.md

change guide to prompt.

* Update amp-story-page-attachment.md

Add "It must have the `layout="nodisplay"` attribute."

* Update placement section.

* Attribute edits.

* Update amp-story-page-outlink.md

* Update amp-story-page-attachment.md

* Update amp-story-page-attachment.md

* Update amp-story-page-outlink.md

* update gif

* Update gif

* Update intro

* Update png

* Update pngs

* update pngs

* Update images to be consistent size.

* Update linking

* image sizing

* Upadte images.

* Update image

* Remove dead link.

* Update date.

* Clarify image size.

* Clarify image dimensions.

Co-authored-by: Raksha Muthukumar <raksha.muth@gmail.com>
westonruter added a commit to westonruter/amphtml that referenced this pull request Aug 3, 2021
…tok-validation

* 'main' of github.com:ampproject/amphtml: (72 commits)
  build: run amp lint --fix to address import order of jixie (ampproject#35513)
  ✨ [amp-analytics] Add Custom Browser Event Tracker (ampproject#35193)
  babel: teach amp mode transformer about #core/mode (ampproject#35477)
  🚮 Remove experiment `amp-consent-granular-consent` (ampproject#35508)
  ♻️ Enable auto-sorting+grouping within src/ and 3p/ (ampproject#35454)
  🐛  [amp-render] fix root-element stripping from amp-render with amp-bind (ampproject#35449)
  ✅ [Story interactive] Add Example Story for Detailed Results Component (ampproject#35450)
  🐛 Fix error on bento example (ampproject#35490)
  🐛 amp-story-grid-layer: Fix AMP invalidation error in documentation (ampproject#35503)
  🐛 Fix code formatting (ampproject#35499)
  ✅ buildDom: add tests for amp-fit-text and amp-layout (ampproject#35494)
  ♻️ Remove unused imports (ampproject#35435)
  ✨ amp-connatix-player: iframe domain based on a property (ampproject#35179)
  Updated document with use cases of remote config (ampproject#35496)
  AMP.goBack: update documentation (ampproject#29290)
  🏗 Allow the bundle-size job to run even if the builds were skipped (ampproject#35492)
  build-system: improve terser/esbuild integration (ampproject#35466)
  🧪 [Story performance] Disable animations on first page to 50% (ampproject#35476)
  📖 [Amp story] [Page attachments] Amp.dev Docs for New Page Attachment Features ampproject#34883 (ampproject#35338)
  🚀 [Story interactive] Rewrite Image URL to Cached URL for Image Quizzes and Polls (ampproject#35375)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Page Attachments] Write amp.dev docs

2 participants