AMP Carousel dynamic height

4
votes

I have an amp-carousel element in my page but I don't know its height before render. If I use layout="responsive" height is obviously wrong because I don't have width/height ratio right - I use 100px for both.

Whats other options? I tried layout="flex-item" but that destroy the carousel completely.

2
amp-html
There is also layout="fixed-height", see stackoverflow.com/a/52208326/812102 - Skippy le Grand Gourou

2 Answers

2
votes

As mentioned by Dima Voytenko in this GitHub post,

layout=responsive essentially means "responsive width". It takes all of the available width and calculates height automatically based on the aspect ratio.

However, please note that layout=responsive is only supported on slides type of carousel. (Reference: amp-carousel)

With that, you may opt to consider using this example:

<amp-carousel width="100" height="100" controls layout="responsive" type="slides">

You may want to check this link for more examples.

Lastly, you may want to also visit the following for more information:

0
votes

It's not mandatory to know the images width and height for images with responsive layout. What you should match is the aspect ratio of the images (which I don't know if you have this data beforehand). See "Settings the aspect ratio" here https://www.ampproject.org/es/docs/reference/components/amp-img

If you don't have the aspect ratio then you should use server side code to determine this ratio, or the dimentions of the images.

Dinamically or automatically AMP won't set the images width or height for you because this kind of HTML avoids repainting and other expensive stuff to load pages quickly.

Hope that helps.