Größere Bilder in der Artikelliste - Google AMP-Unterstützung

the_waiters · January 27, 2017 at 8:21 AM

Hallo,

ich richte mal meine Frage vorwiegend an Alexander Ebert.

Ich wechsel gerade bei einer Seite von einem Fireball News-System zum Artikelsystem des WSC.

Mein Kunde findet jedoch die Bilder in der Artikelliste zu klein.

In dem Template articleList wird ja das Template articleListItems angezogen.

Dort möchte ich nun im template articleListItems das Artikelbild {@$article->getImage()->getThumbnailTag('tiny')} gegen {@$article->getImage()->getThumbnailTag('large')} tauschen und anschließend so umgestalten, dass es ähnlich dem alten News-System ist.

Im Bezug auf die Google AMP-Unterstützung frage ich mich, ob diese weiterhin besteht und diese nur von dem Template ampArticle abhängig ist?

Bei AMP geht es ja um die Reduzierung/mobile optimierung und ich will ja nun größere Bilder in articleListItems verwenden.

Ich hab mich aus Zeitgründen leider noch nicht genau mit AMP beschäftigt.

**Alexander Ebert** · January 27, 2017 at 9:25 AM Official Post

Die AMP-Version nutzt ein vollkommen autarkes Template, da AMP sehr spezielle Anforderungen stellt, die so nicht mit den regulären Templates vereinbar sind. Anders formuliert: Änderungen an den Templates der nicht-AMP-Version haben keinerlei Auswirkungen auf die AMP-Fassung.

the_waiters · January 27, 2017 at 10:37 AM

Super, danke für die Auskunft.

Edit: Falls jemand anderes auch diese Ansicht überarbeiten will, in 2..3 Tagen hätte ich was, was man übernehmen kann.

Bodo · January 27, 2017 at 10:55 AM

Quote from the_waiters

Super, danke für die Auskunft.

Edit: Falls jemand anderes auch diese Ansicht überarbeiten will, in 2..3 Tagen hätte ich was, was man übernehmen kann.

Gerne the_waiters

webpexel · January 27, 2017 at 2:05 PM

Würde mich auch interessieren

the_waiters · January 29, 2017 at 7:34 PM

Hallo,

wie versprochen melde ich mich wieder mit der Lösung.

Die Artikel werden über das Template articleListItems aufgerufen. Da das Template auch für Boxen genutzt wird benötigen wir ein komplett neues Template.

1. Ein neues Template mit dem Namen alternativeArticleListItems erstellen und folgenden html-Code einfügen:

HTML: alternativeArticleListItems

<ul class="articleList">
    {foreach from=$objects item='article'}
        <li>
            <a href="{$article->getLink()}">
                {if $article->getImage() && $article->getImage()->getThumbnailTag('large') && ($article->getImage()->getThumbnailWidth('large') >= '700')}

                    <div class="fullScreenArticle">
                
                        <div class="fullScreenArticleHeader" style="background-image: url({@$article->getImage()->getThumbnailLink('large')}); height: {@$article->getImage()->getThumbnailHeight('large')}px;">
                            <div class="containerHeadline">
                                <h3 class="articleListTitle">{$article->getTitle()}</h3>
                                <ul class="inlineList articleListMetaData">
                                    <li>
                                        <span class="icon icon16 fa-clock-o"></span>
                                        {@$article->time|time}
                                    </li>
                            
                                    {if $article->enableComments}
                                        <li>
                                            <span class="icon icon16 fa-comments"></span>
                                            {lang}wcf.article.articleComments{/lang}
                                        </li>
                                    {/if}
                                
                                    {if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike')}
                                        <li class="wcfLikeCounter{if $article->cumulativeLikes > 0} likeCounterLiked{elseif $article->cumulativeLikes < 0}likeCounterDisliked{/if}">
                                            {if $article->likes || $article->dislikes}
                                                <span class="icon icon16 fa-thumbs-o-{if $article->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$article->likes dislikes=$article->dislikes}wcf.like.tooltip{/lang}"></span>{if $article->cumulativeLikes > 0}+{elseif $article->cumulativeLikes == 0}&plusmn;{/if}{#$article->cumulativeLikes}
                                            {/if}
                                        </li>
                                    {/if}
                                </ul>
                            </div>
                        </div>
    
                        <div class="containerContent articleListTeaser">
                            {@$article->getFormattedTeaser()}
                        </div>
                    
                    </div>

                {elseif $article->getImage() && $article->getImage()->hasThumbnail('tiny')}
            
                    <div class="box128">
                            <div class="articleListImage">{@$article->getImage()->getThumbnailTag('tiny')}</div>
                        
                            <div>
                                <div class="containerHeadline">
                                    <h3 class="articleListTitle">{$article->getTitle()}</h3>
                                    <ul class="inlineList articleListMetaData">
                                        <li>
                                            <span class="icon icon16 fa-clock-o"></span>
                                            {@$article->time|time}
                                        </li>
                                
                                        {if $article->enableComments}
                                            <li>
                                                <span class="icon icon16 fa-comments"></span>
                                                {lang}wcf.article.articleComments{/lang}
                                            </li>
                                        {/if}
                                    
                                        {if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike')}
                                            <li class="wcfLikeCounter{if $article->cumulativeLikes > 0} likeCounterLiked{elseif $article->cumulativeLikes < 0}likeCounterDisliked{/if}">
                                                {if $article->likes || $article->dislikes}
                                                    <span class="icon icon16 fa-thumbs-o-{if $article->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$article->likes dislikes=$article->dislikes}wcf.like.tooltip{/lang}"></span>{if $article->cumulativeLikes > 0}+{elseif $article->cumulativeLikes == 0}&plusmn;{/if}{#$article->cumulativeLikes}
                                                {/if}
                                            </li>
                                        {/if}
                                    </ul>
                                </div>
                        
                                <div class="containerContent articleListTeaser">
                                    {@$article->getFormattedTeaser()}
                                </div>
                            </div>

                        </div>

                {else}
                
                    <div>
                
                        <div class="containerHeadline">
                            <h3 class="articleListTitle">{$article->getTitle()}</h3>
                            <ul class="inlineList articleListMetaData">
                                <li>
                                    <span class="icon icon16 fa-clock-o"></span>
                                    {@$article->time|time}
                                </li>
                            
                                {if $article->enableComments}
                                    <li>
                                        <span class="icon icon16 fa-comments"></span>
                                        {lang}wcf.article.articleComments{/lang}
                                    </li>
                                {/if}
                                
                                {if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike')}
                                    <li class="wcfLikeCounter{if $article->cumulativeLikes > 0} likeCounterLiked{elseif $article->cumulativeLikes < 0}likeCounterDisliked{/if}">
                                        {if $article->likes || $article->dislikes}
                                            <span class="icon icon16 fa-thumbs-o-{if $article->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$article->likes dislikes=$article->dislikes}wcf.like.tooltip{/lang}"></span>{if $article->cumulativeLikes > 0}+{elseif $article->cumulativeLikes == 0}&plusmn;{/if}{#$article->cumulativeLikes}
                                        {/if}
                                    </li>
                                {/if}
                            </ul>
                        </div>
                        
                        <div class="containerContent articleListTeaser">
                            {@$article->getFormattedTeaser()}
                        </div>
                    
                    </div>
                {/if}
            </a>
        </li>
    {/foreach}
</ul>

Display More

In Zeile 5 habe ich eine Breite von 700px vorraus gesetzt. Wenn diese nicht erreicht wird, wird stattdessen die alte Ansicht für den jeweiligen Artikel aufgerufen.

2. im TemplatearticleList in der Zeile 38

{include file='articleListItems'}

gegen

{include file='alternativeArticleListItems'}

austauschen.

3. im TemplatecategoryArticleList in der Zeile 42

{include file='articleListItems'}

gegen

{include file='alternativeArticleListItems'}

austauschen.

4. Folgenden SCSS-Code im Stil hinzufügen

CSS

@include screen-lg {
    #tpl_wcf_categoryArticleList, #tpl_wcf_articleList {
    
        #content .articleList .containerHeadline > h3 {

            @include wcfFontSection;
        }
    }
}

#tpl_wcf_categoryArticleList, #tpl_wcf_articleList {
    
    #content .articleList {

        a:hover > .fullScreenArticle > .fullScreenArticleHeader {
            opacity: 1;
            
            > .containerHeadline > h3 { 
                 color: rgba(255,255,255,1);
                text-decoration: underline;
            }
        }

        .fullScreenArticle {

            .fullScreenArticleHeader {
                background-size: cover;
                background-position: center center;
                max-height: 300px;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                opacity: 0.85;
                transition: 0.2s ease opacity;
                
                > .containerHeadline {
                    background: rgba(0,0,0,0.3);
                    border-top: 1px solid rgba(255,255,255,0.1);
                    text-align: center;
                    color: rgba(255,255,255,1);
                    padding: 5px 0;
                    
                    > h3 {
                        color: rgba(255,255,255,1);
                    }
                    
                    .articleListMetaData {
                        justify-content: center;
                        color: rgba(255,255,255,1);
                    }
                }
            }
            
            .containerContent {
                padding-top: 10px;
            }
        }
    }
}

Display More

Fertig!

Beispielweise habe ich das für die Webseite https://sweetlifesunshine.de umgesetz.

webpexel · February 12, 2017 at 5:20 AM

Quote from the_waiters

2. im TemplatearticleList in der Zeile 38

{include file='articleListItems'}

gegen

{include file='alternativeArticleListItems'}

austauschen.

Guten Morgen

Wenn ich versuche etwas zu ändern erscheint bei mir ... Der eingegebene Name wird bereits von einem anderen Template verwendet.

Fehlt da noch ein Zwischenschritt? Muss ich articleList vorher duplizieren?

the_waiters · February 12, 2017 at 9:50 AM

Guten Morgen.

Ja du musst das originale Template articleList in eine neue Templategruppe duplizieren, dann bearbeiten und auch das neue Template alternativeArticleListItems in diese neue Templategruppe erstellen und ganz zum Schluss die Templategruppe im Stil auswählen.

Wenn dein Stil bereits eine eigene Templategruppe hat, dann nimmst du für das ganze diese.

webpexel · February 12, 2017 at 10:00 AM

Ok Danke.

Muss ich alle Dateien in ein eigenes Template duplizieren oder nur die, die ich bearbeitet habe?

the_waiters · February 12, 2017 at 11:46 AM

Nur das Template articleList und das neue Template alternativeArticleListItems

webpexel · February 12, 2017 at 1:41 PM

Vielen Dank

Die kleinen Igel sehen im übrigen sehr witzig aus. Die werde ich bei Gelegenheit mal machen.

webpexel · February 12, 2017 at 1:48 PM

Frage

Weist du zufällig wo ich die Grundeinstellung ändern kann, die das Vorschau - Artikelbild auf 144 x 144 Pixel herunter rechnet?

the_waiters · February 12, 2017 at 1:54 PM

Von den Bildern werden thumbnails erstellt. Bezüglich der Größe gibt es dafür keine Einstellung im ACP.

Ein Teil der Anpassung ist auch, dass ich statt dem thumbnall ein großes Bild anzeigen lasse (siehe 1. Beitrag im Thema)

webpexel · February 12, 2017 at 2:04 PM

Hmm, könntest du mir Sagen / notieren was genau ich machen müsste, wenn ich das Bild einfach nur anzeigen will, welches ich als Vorschau definiere? Im Gründe möchte ich nur das dass Bild nicht berechnet wird.

the_waiters · February 12, 2017 at 2:09 PM

Nur das Bild austauschen reicht aber nicht. Du musst mit CSS alles neu Ausrichten.

Im template articleListItems das Artikelbild {@$article->getImage()->getThumbnailTag('tiny')}gegen {@$article->getImage()->getThumbnailTag('large')}tauschen.

articleListItems wir aber auch für Boxen verwendet. Da musst du dann auch alles neu ausrichten.

webpexel · February 12, 2017 at 2:12 PM

Also doch so. Prima. Ich werde mich daran versuchen.

Vielen Dank!

webpexel · February 12, 2017 at 4:41 PM

Ich habe mir deine Datei (und die leckeren Rezepte) noch einmal genau angesehen. Im grunde hast du das gemacht, was ich gerne erreichen möchte. So ist zum Beispiel das kleine Artikelbild in Groß.

Ich hätte gerne die Überschrift über dem Bild, dann das Bild und unter dem Bild den Einleitungstext. Wahrscheinlich verlange ich zu viel ... Wäre es sehr aufwendig für dich deine CSS Datei diesbezüglich anzupassen bzw. ergänzend hier zu posten? Mit hoher Wahrscheinlichkeit bin ich nicht der Einzige, den das interessiert. -kratz-

Im Prinzip wie das hier Blogbeiträge nebeneinander platzieren & anpassen

Meine Fähigkeiten reichen dafür bei weitem nicht aus.

the_waiters · February 13, 2017 at 12:13 PM

Ich muss leider erst was anderes fertig machen und kann dich nur auf die nächste Woche vertrösten. Neben CSS muss auch das Template dafür angepasst werden.

webpexel · February 13, 2017 at 4:01 PM

Private Sachen gehen immer vor

webpexel · February 19, 2017 at 6:11 AM

Deine Website mit den schönen Rezepten ist nicht mehr erreichbar.

Größere Bilder in der Artikelliste - Google AMP-Unterstützung

Participate now!

Users Viewing This Thread