Artikel - Anpassung Artikelübersicht (WSC3.0)

  • Für alle, die das Aussehen der Artikelübersicht verändern wollen....

    Dir gefällt die aktuelle Artikelansicht nicht? Dann findest du nachfolgend die Anleitung wie du die Standardansicht (s. Bild) verändern kannst.



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


    Vorbereitung : Neue Templategruppe anlegen falls nur die Standardgruppe vorhanden ist. Anschließend dem gewünschten Stil diese Templategruppe hinzufügen



    Diese Variante zeigt ein großes Artikelbild an. Falls das Artikelbild weniger als 700 px hat, wird die alte Variante angezeigt. Der gesamte Artikel (li-Element) ist verlinkt. Egal ob man auf das Bild oder den Text klickt, wird man zum eigentlichen Artikel weitergeleitet.


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

    HTML: alternativeArticleListItems
    1. <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}±{/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}±{/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}±{/if}{#$article->cumulativeLikes} {/if} </li> {/if} </ul> </div> <div class="containerContent articleListTeaser"> {@$article->getFormattedTeaser()} </div> </div> {/if} </a> </li> {/foreach}</ul>


    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.


    3. im Template articleList in der Zeile 38


    {include file='articleListItems'}
    gegen
    {include file='alternativeArticleListItems'}


    austauschen.


    4. im Template categoryArticleList in der Zeile 42


    {include file='articleListItems'}
    gegen
    {include file='alternativeArticleListItems'}


    austauschen.


    5. Folgenden SCSS-Code im Stil hinzufügen:

Teilen