amp-img not showing in carousel

Question

I used an AMP carousel to show a list of articles abstracts.

For some reason only the abstracts which were visible at page load have pictures.

( If i rotate the screen more but not all pictures are loaded. )

What am i doing wrong?

Feel free to ask for more info.

Here's the layout:

<amp-carousel class="articles-carousel" layout="fixed-height" height="200" type="carousel">
    <article role="button" tabindex="1" class="article-abstract" on="tap:AMP.setState({selectedArticle:1072}),AMP.scrollTo('id' = 'article_1072')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/11.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב דוד חי הכהן</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1072" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>נקודות אור בימי אחאב(2)</h1>
        </header>
    </article>
    <article role="button" tabindex="2" class="article-abstract" on="tap:AMP.setState({selectedArticle:1108}),AMP.scrollTo('id' = 'article_1108')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/24.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב חיים בן סניור</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1108" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>מלחמת אחאב ובן הדד</h1>
        </header>
    </article>
    <article role="button" tabindex="3" class="article-abstract" on="tap:AMP.setState({selectedArticle:1112}),AMP.scrollTo('id' = 'article_1112')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/6.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב צבי שוויגר</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1112" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>המוותר על דברי נביא</h1>
        </header>
    </article>
    <article role="button" tabindex="4" class="article-abstract" on="tap:AMP.setState({selectedArticle:1113}),AMP.scrollTo('id' = 'article_1113')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/6.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב צבי שוויגר</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1113" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>עונש אחאב</h1>
        </header>
    </article>
</amp-carousel>

Here's the stylesheet:

.articles-carousel {
    padding: 1em 0;
}

.article-abstract {
    text-align: center;
    vertical-align: text-top;
    width: 155px;
    height: 200px;
}

.article-abstract:focus {
    outline: none;
}

.article-abstract:first-child {
    margin-right: 12px;
}

.article-abstract header {
    display: table;
    width: 141px;
    max-width: 100%;
}

.article-abstract h1 {
    display: table-cell;
    font-size: 12px;
    line-break: normal;
    margin: 0;
    text-align: center;
    width: 128px;
    word-break: break-word;
    white-space: normal;
}

.article-abstract footer {
    display: inline-flex;
}

.article-abstract-author {
    margin: 0px 3px 0 0;
    max-width: 12px;
}

.article-abstract-author address {
    transform: rotate(-90deg);
}

.article-abstract-author a {
    font-size: 11px;
}

.article-external-link-container {
    display: block;
    width: 16px;
}

You can see that only three of four pictures appeared:

UPDATE:

Bachcha Singh says it's a bug. After adding:

.articles-carousel {
    direction:ltr;
}
.articles-carousel  > div * {
    direction:rtl;
}

it now works. However, i will be glad to make it at least feel like rtl... say with setting initial position to carousel end.

UPDATE#2: Seems to be solved in amp-carousel-0.2.

sorry to ask the obvious but, are you sure the `JPG` is there, or that the `URL` works independently of the `carousel`? also, IOHO, it's better to load an `amp-carousel` from an `amp-list` - the overall environment just 'behaves better'. — Jay Gray, Feb 11 '19 at 22:02
Hey @JayGray Thanks for your efforts! about the `URL`: Yes it's there (the visible third picture and the invisible fourth one are of the same `URL` in this example. Also as i wrote, when changing to landscape orientation, it appears). about `amp-list`: the contact is generated in a `foreach` on the server side, as per this answer: https://stackoverflow.com/a/51941721/1157173, That is to say `amp-list` has a negative `SEO` impact. — Dorad, Feb 12 '19 at 05:05
the way to solve the SEO issue is to use a JSON-LD structure to reveal the target data you want indexed. we have built a simple generator that creates the `amp-list` for `amp-mustache` processing **AND** a JSON-LD structure for SEO processing. Most of the content is shared. But without seeing the entire site, where other events can step on the issue you've identified, i can't offer much more assistance. — Jay Gray, Feb 12 '19 at 16:43
Thanks @JayGray. I think that the content in the list cannot be exposed in `JSON-LD`. Let me explain the site structure: each page like the one in the question represents a chapter in the bible (Non-`AMP` version in production: https://תנך.co.il/929/1, https://תנך.co.il/929/2, ... , https://תנך.co.il/929/929). The page contains the chapter text, which can go inside `articleBody` in `JSON-LD`. But it also contains that articles list which i didn't find a fitting property for it in `JSON-LD`. — Dorad, Feb 12 '19 at 17:13
first (and you may know this) the JSON structure for amp-list and the JSON structure for JSON-LD are different - and they are different files. But there is nothing that can be store in one that can't be stored in the other. You decide, according to application need, where to place data. Further, you can have one JSON structure that serves many HTML pages. You would use `amp-mustache` to parse the data specific to a page from the global `amp-list`. Beyond this i risk making assumptions about your project that are speculative. — Jay Gray, Feb 12 '19 at 17:37
Not this one, I am taking about visible area, amp load the images which is visible in view port. The same design if you open in landscape view it's load all images. Can you please share css for carousel you have write. — Bachcha Singh, Jun 04 '19 at 16:44
@Dorad, nothing wrong with your code, This is a bug in rtl handling of lazy loading. you can change the direction ltr for carousel — Bachcha Singh, Jun 05 '19 at 01:28

score 3 · Accepted Answer · edited Jun 06 '19 at 14:17

3

Nothing is wrong with your code, after some R & D I found that This is a bug in rtl handling of lazy loading.

For now you can change the direction for amp-carousel and set the design according to your need, Till AMP team will not fixed this bug.

.articles-carousel { direction:ltr; }

If you can change the amp-carousel type carousel to slides, than its also work.

edited Jun 06 '19 at 14:17

Trevor Reid

3,310
4
27
46

answered Jun 05 '19 at 01:26

Bachcha Singh

3,850
3
24
38

Hey @Bachcha Singh, thanks, look at my update. Can you think about a way to make it feel like rtl? i will mark this as an answer and give you the bounty if no better solution. – Dorad Jun 05 '19 at 05:22

amp-img not showing in carousel

1 Answers1