Wähle ich beim erstellen eines Artikels ein Artikelbild aus, wird dieses korrekt angezeigt. In der Vorschau oder beim veröffentlichen wird das Bild dann über die komplette Breite des Artikels angezeigt. Macht bei einem Vereinslogo wenig Sinn und war Vor dem Upgrade nicht so. Gibt es da einen Trick?
Leg die Bilder doch einfach im richtigen Format an und verpasst ihnen ggf. einen netten Hintergrund.
Entschuldigt bitte, wenn ich mich hier mir ranhänge, aber ich habe das selbe Problem ( abgeschnittene Bilder auf der Artikelseite, gestrecktes Artikelbild im Artikel selbst).
Meine Frage, wie wären denn die optimalen Abmessungen des Artikelbildes und Teasers, ist das bekannt?
Thx schonmal,
thedoctor
Vllt so:
@include screen-lg {
.articleImage .articleImageWrapper {
border-radius: 0;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.0);
max-height: initial;
width: initial;
}
}Also ich hatte mich damit vor einiger Zeit mal beschäftigt, und ich weiß zwar nicht mehr wie genau ich drauf gekommen bin, aber meine sind 1020 x 300 Pixel groß und das passt perfekt.
Danke an muig.5 und Geronimo , ich werde das mal austesten. Meine Artikelbilder waren alle 533 x 300 Px.
EDIT: Leider brachten beide Lösungen keine sichtbare Änderung/ Besserung mit sich. Zumindest der css von muig.5 brachte es fertig, das das Bild im Artikel nicht mehr gestreckt wird, allerdings auf der Artikelübersichtsseite wird immer noch etwas vom Bild oben und unten abgeschnitten, was übelst doof ausschaut. Vielleicht gibt es dafür auch eine Lösung?
Gruß,
thedoctor
Ne, dafür gibt es aktuell keine Lösung.
Ne, dafür gibt es aktuell keine Lösung.
Ok, trotzdem thx für deine Lösung Teil 1.
thedoctor
Ja, das ist geändert worden, jetzt ist .articleImageWrapper eben immer 100% breit. Sowas passiert halt wenn Software weiter entwickelt wird, da ändern sich auch mal Dinge…
Guten Abend,
du möchtest es wahrscheinlich wie auf meiner Webseite (hier). Da musst die die Templates mitverändern.
Gib mir Bescheid
Template "articlelList" überarbeiten:
<ul class="articleList">
{foreach from=$objects item='article'}
<li>
<a href="{$article->getLink()}">
{if $article->getTeaserImage() && $article->getTeaserImage()->hasThumbnail('medium')}
<div class="box128">
<div class="articleListImage">{@$article->getTeaserImage()->getThumbnailTag('medium')}</div>
{/if}
<div>
<div class="containerHeadline">
<h3 class="articleListTitle">{$article->getTitle()}</h3>
<ul class="inlineList articleListMetaData">
{if $article->hasLabels()}
<li>
<span class="icon icon16 fa-tags"></span>
<ul class="labelList">
{foreach from=$article->getLabels() item=label}
<li><span class="label badge{if $label->getClassNames()} {$label->getClassNames()}{/if}">{lang}{$label->label}{/lang}</span></li>
{/foreach}
</ul>
</li>
{/if}
<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}
{if ARTICLE_ENABLE_VISIT_TRACKING && $article->isNew()}<li><span class="badge label newMessageBadge">{lang}wcf.message.new{/lang}</span></li>{/if}
{if $article->isDeleted}<li><span class="badge label red">{lang}wcf.message.status.deleted{/lang}</span></li>{/if}
{event name='articleListMetaData'}
</ul>
</div>
<div class="containerContent articleListTeaser">
{@$article->getFormattedTeaser()}
</div>
</div>
{if $article->getTeaserImage() && $article->getTeaserImage()->hasThumbnail('medium')}
</div>
{/if}
{event name='articleListEntry'}
</a>
</li>
{/foreach}... und Individuelles CSS und SCSS
/* ARTIKEL ANPASSUNG */
/* Artikel Überschrifft anpassen */
.articleList .containerHeadline > h3 {
font-size: 20px;
}
/* Artikel Bildgrösse anpassen */
.articleListImage img {
width: 290px !important;
height: 200px !important;
}
/* Artikel Bildteaser im Text anpassen */
.articleImage .articleImageWrapper {
max-height: 500px;
width: 1400px;
}Don’t have an account yet? Register yourself now and be a part of our community!