Amphtml: Support dynamic content for amp-carousel

[sebastianbenz]

amp-carousel currently does not support dynamic content, e.g. varying the number of slides for different viewers. This limits the possibilities of personalizing the content of a carousel.

Originally, I planned to use amp-list for this and I was surprised to learn that it doesn't work with amp-carousel (then I realized there is a reason why it's called amp-list). I was trying something like:

<amp-carousel>
   <amp-list>
      <template>
         <amp-img></..>
      </template>
   </amp-list>
</amp-carousel>

//cc @ericlindley-g @rudygalfi

[ericlindley-g]

@sriramkrish85 @dvoytenko — is this possible, or would we need to build another mechanism to populate amp-carousel with content returned from an additional server call?

[camelburrito]

carousel expects each of its child to be one slide. So we might have to do some extra building on runtime to accomodate this and also update the carousel in runtime (ie keep rebuilding for each new response and stay at the right slide.) This is hard but not impossible. I think we could build a poll for new slides feature rather than accommodating amp-list and have the poll url passed in as conf! - all these are just my ideas.

[ericlindley-g]

Nice — and just to clarify, I think the intent would only be for one call on load, to populate personalized results (by locale, by CID, by some other parameter or combination of parameters collected by the server), and not multiple polls, like amp-live-list

[dvoytenko]

@sebastianbenz @ericlindley-g For background. So far, we've generally been cautious with something like this to avoid a situation where people start to simply use AMP as a rendering engine. amp-list has a number of restrictions to ensure that this is not the case. We believe that where the main content is concerned, server-side rendering is for the primary performance benefit and improves embed-ability.

[escoffierdesign]

@sebastianbenz @ericlindley-g @dvoytenko dvoytenko SO is this a dead end and wont be implemented in the future. ie a Carousel that can call up images from a JSOn COR file.. Because I would like to reference you to this page -- https://github.com/disqus/amphtml/blob/master/spec/amp-html-templates.md under usage it does say "" The use of the template is up to a specific AMP element that wants to use it. An AMP element would typically look for a template within its children or using a template's ID. For instance, an amp-carousel element may (in the future) use a CORS endpoint and an AMP template to load and render a dynamic set of slides. "" SO at some point some one had a vision A very useful vision.. Now its mentioned that the reason it isnt implimented is to prevent people using it as a rendering engine. Is that being to guarded.. Taking away functionality because it me be useful.. ? Just a frustrated interpretation. But all systems will be abused and manipulated, im sure but hopefully the greater good can prevail. American elections included..

[escoffierdesign]

sounds good to me @dvoytenko.

[dvoytenko]

Thanks everyone for the input! LGTM the use case and the format that @sebastianbenz suggests.

/to @ericlindley-g and @rudygalfi to schedule the work.

[jpettitt]

My use case for this is related content / latest articles links. 95% of our page updates are becasue some related content link changed. We can most some of that into amp-list but we've held off becasue we'd like to be able to use the nice amp carousel UX. What's the latest on the schedule?

[stoneshower]

I also need to use amp-carousel with pulling data from amp-list.

It seems amp-list works with amp-selector.
https://github.com/ampproject/amphtml/issues/9536#issuecomment-304064722

So, no implementation for amp-carousel?

[ericlindley-g]

Thanks for the feedback — this is something we've started thinking about in earnest again (presented in a recent design review), and makes sense in a range of use cases. (am bumping the priority up a bit for the GitHub label)

[ericlindley-g]

FYI to folks waiting on this issue: while AMP doesn't yet support amp-list nested inside of amp-carousel, it does support amp-carousel nested inside of amp-list, so that may be a workaround for you in the time being. Thanks for your patience!

[SmokinClove]

Pardon my ignorance, but how do you use amp-carousel nested inside amp-list for that? Wouldn't it create multiple separate amp-carousels instead of a single one?
Thanks in advance!

[ericlindley-g]

Good question, @SmokinClove — there's some flexibility here. The difference between creating multiple amp-carousels and a single amp-carousel is in the data that your server returns as a response to amp-list.

That is, you could use amp-list to create multiple separate amp-carousels by including several objects in the items array, but you could also just return the data to create a single instance of an amp-carousel by having just a single object in the items array.

Note that using items is the default, but is optional, you can see
https://www.ampproject.org/docs/reference/components/amp-list and
https://ampbyexample.com/components/amp-list/ for more details

[stoneshower]

I tried to use amp-carousel inside of amp-list with the structure of below.
However, I see multiple amp-carousel elements are generated instead of showing multiple images inside of a single amp-carousel.
Does anybody knows how to work around for this?

#JSONURL
{
    "items": [
        {
            "text": [
                "SAMPLE TEXT"
            ],
            "image": [
                {
                    "value": "IMAGE URL",
                    "url": "IMAGE LINK",
                    "alt": "IMG ALT"
                }
            ]
        },
        {
            "text": [
                "SAMPLE TEXT"
            ],
            "image": [
                {
                    "value": "IMAGE URL",
                    "url": "IMAGE LINK",
                    "alt": "IMG ALT"
                }
            ]
        }
    ]
}


<amp-list width="auto" height="400" layout="fixed-height" src="JSONURL">
     <template type="amp-mustache">
       <amp-carousel height="200" layout="fixed-height" type="carousel">
       {{#image}}
         <a href="{{url}}">
           <amp-img src="{{value}}" layout="fixed" width="100" height="100" alt="{{alt}}"></amp-img>
         </a>
       {{/image}}
       </amp-carousel>
     </template>
</amp-list>

[ericlindley-g]

Thanks for reaching out @stoneshower — @aghassemi, do you want to share that demo you built? I believe you had this working, but thinking through this again I want to double-check that you had this working for instances where the client didn't know how many items were in the carousel until getting the JSON response.

[aghassemi]

can't find my demo, @stoneshower all you need to do is to have a single entry in items e.g.

{"items": [{
    "values": [/*...*/]

then you iterate the values array using template syntax, e.g.

<amp-list width="auto" height="400" layout="fixed-height" src="JSONURL">
     <template type="amp-mustache">
       <amp-carousel height="200" layout="fixed-height" type="carousel">
       {{#values}}
         {{#image}}
         <a href="{{url}}">
           <amp-img src="{{value}}" layout="fixed" width="100" height="100" alt="{{alt}}"></amp-img>
         </a>
         {{/image}}
       {{/values}}
       </amp-carousel>
     </template>
</amp-list>

[stoneshower]

Thank you @ericlindley-g and @aghassemi !
Actually I need to use the data structure of the "items" so I cannot change it for now. I think I need to wait for the implementation of amp-list nested in amp-carousel.

[dvoytenko]

Not sure if it'd help, but the location of an array of items can be customized somewhat using the items attribute: https://github.com/ampproject/amphtml/blob/master/extensions/amp-list/amp-list.md#items-optional

[stoneshower]

@dvoytenko
Thank you for the link! I'm gonna take a look at it.

[ampprojectbot]

This issue hasn't been updated in awhile. @ericlindley-g Do you have any updates?

[kul3r4]

Added a sample in e-commerce sample

[kul3r4]

Can we close this? @sebastianbenz does the sample answer your request?

[kul3r4]

@sebastianbenz ping

[sebastianbenz]

yes - that solves my problem. Thanks!

[zhang-90]

#JSONURL
{
    "items": [
        {
            "text": [
                "SAMPLE TEXT"
            ],
            "image": [
                {
                    "value": "IMAGE URL",
                    "url": "IMAGE LINK",
                    "alt": "IMG ALT"
                }
            ]
        },
        {
            "text": [
                "SAMPLE TEXT"
            ],
            "image": [
                {
                    "value": "IMAGE URL",
                    "url": "IMAGE LINK",
                    "alt": "IMG ALT"
                }
            ]
        }
    ]
}



   <amp-list items="." single-item=".">
      <template>
         <amp-carousel>
              {{#items}}
                 <amp-img></..>
              {{/items}}
         </amp-carousel>
      </template>
   </amp-list>

@sebastianbenz @ericlindley-g @camelburrito @escoffierdesign
you can try, no thanks

[stoneshower]

@zhang-90
Your solution works. Great work around!

[wonderwoob]

@zhang-90
Your solution worked for me as well. Thank you!!!

[dijs]

I am experiencing a couple strange issues with this implementation of dynamic carousel content.

1. The amp-carousel controls do not work in the standard (non-lightbox) mode when rendering images with a template. If I remove the template and manually add amp-img's, the controls work again.
2. The amp-carousel seems to be hanging on to the initial state of the amp-list after it fetches new data. For example, if my initial state is [1, 2, 3] and it fetches [a,b,c], the carousel renders with [a,b,c,1,2,3], as if the new data got prepended to the amp-list state.

Here is some example code:

<amp-list
            layout="fill"
            id="list"
            src={`${pathname}/images/cccccc.json`}
            amp-bind={`src=>'${pathname}/images/' + state.color.selected.id + '.json'`}
            single-item
            items="."
          >
            <amp-carousel
              controls
              id={id}
              layout="fill"
              type={type}
              amp-bind={`slide=>${ampStateId}.${ampStateProperty}`}
              on={`slideChange:AMP.setState({ ${ampStateId}: { ${ampStateProperty}: event.index } })`}
            >
              <template
                type="amp-mustache"
                dangerouslySetInnerHTML={{
                  __html: `
                {{#images}}
                  <amp-img src="{{.}}" layout="fill" alt="alt" />
                {{/images}}`
                }}
              />
            </amp-carousel>
          </amp-list>

Any help would be welcome!