Hallo Zusammen, habe eine neue Thumbnailgrösse mit 280px angelegt. Gerne würde ich diese in der Einkaufswelt benutzen da die 200px immer auf 261px hochskaliert werden und daher die Produktbilder unscharf werden. Wo muss ich das ändern? {block name='frontend\_listing\_box\_article\_image\_media'} {block name='frontend\_listing\_box\_article\_image\_picture'} {if $sArticle.image.thumbnails} {$baseSource = $sArticle.image.thumbnails[0].source} {if $itemCols && $emotion.grid.cols} {$colSize = 100 / $emotion.grid.cols} {$itemSize = "{$itemCols \* $colSize}vw"} {else} {$itemSize = "200px"} {/if} {foreach $sArticle.image.thumbnails as $image} {$srcSet = "{if $image@index !== 0}{$srcSet}, {/if}{$image.source} {$image.maxWidth}w"} {if $image.retinaSource} {$srcSetRetina = "{if $image@index !== 0}{$srcSetRetina}, {/if}{$image.retinaSource} {$image.maxWidth}w"} {/if} {/foreach} {elseif $sArticle.image.source} {$baseSource = $sArticle.image.source} {else} {$baseSource = "{link file='frontend/\_public/src/img/no-picture.jpg'}"} {/if} <picture>
{if $srcSetRetina}<source sizes="(min-width: 48em) {$itemSize}, 100vw" srcset="{$srcSetRetina}" media="(min-resolution: 192dpi)"></source>{/if}
{if $srcSet}<source sizes="(min-width: 48em) {$itemSize}, 100vw" srcset="{$srcSet}"></source>{/if}
<img src="%7B%24baseSource%7D" alt="{$sArticle.articleName|escape}">
</picture> {/block} {/block}
Vielen Dank P.
Hat niemand eine Idee?
Hallo, ist die Frage so dumm oder selbsterklärend das keiner Sie beantworten kann/mag? Vielen Dank! P.
Antwort hier: themes-und-design-f101/bilder-thumbnails-t28653.html
Leider doch nicht zielführend… Gibt es denn niemanden der das erklären kann, die Doku ist an dieser Stelle (wie so oft) nicht besonders hilfreich. Es muss doch zu schaffen sein das diese sch*** Einkaufswelt-Thumbnails scharf und inder richtigen Grösse angezeigt werden? Vielen Dank P.
Meinst du ArtikelSlider und Artikel in der Einkaufswelt?
Ja! Das sind doch einzelne Artikel, die Du in die Einkaufswelt im Raster eingepflanzt hast, oder?
Ja das sind sie. Habe in box_emotion.tmpl meine neue Thumbnailsgrösse eingefügt. Trotzdem wird offensichtlich immer eine andere GRösse (600x600 oder so) genommen und runter skaliert. [code] {block name=„frontend_listing_box_article“}
{block name=„frontend_listing_box_article_content“}
{* Product badges *} {block name=‚frontend_listing_box_article_badges‘} {if !$imageOnly} {include file=„frontend/listing/product-box/product-badges.tpl“} {/if} {/block} {block name=‚frontend_listing_box_article_info_container‘}
{* Product image *} {block name=‚frontend_listing_box_article_picture‘} {block name=‚frontend_listing_box_article_image_element‘} {block name=‚frontend_listing_box_article_image_media‘} {block name=‚frontend_listing_box_article_image_picture‘} {if $sArticle.image.thumbnails} {$baseSource = $sArticle.image.thumbnails[4].source} {if $itemCols && $emotion.grid.cols} {$colSize = 100 / $emotion.grid.cols} {$itemSize = „{$itemCols * $colSize}vw“} {else} {$itemSize = „200px“} {/if} {foreach $sArticle.image.thumbnails as $image} {$srcSet = „{if $image@index !== 0}{$srcSet}, {/if}{$image.source} {$image.maxWidth}w“} {if $image.retinaSource} {$srcSetRetina = „{if $image@index !== 0}{$srcSetRetina}, {/if}{$image.retinaSource} {$image.maxWidth}w“} {/if} {/foreach} {elseif $sArticle.image.source} {$baseSource = $sArticle.image.source} {else} {$baseSource = „{link file=‚frontend/_public/src/img/no-picture.jpg‘}“} {/if}
{if $srcSetRetina}
{if $srcSet}
[/code] Ich verstehe die ganzen Variablen in diesem Block nicht?
HAbe mir bei dem ganzen Thema ‘ArtikelSlider’ und ‘Artikel’ in der Einkaufswelt einen Wolf gesucht und ewig daran herum gemacht. Die ganze Artikelgeschichte in den Einkaufswelten hat meines Erachtens eine gewaltigen haken. Habe dies auch schon mehrfach kommuniziert. Aber mir glaubt hier von Shopware anscheinend niemand. Ich habe es jetzt nicht in der .tpl angepasst, sondern ein eigenes emotions.less in mein eigenes Theme implementiert. Da steht u. a. folgendes drin: // Product-Box element .emotion--product { .product--box { .product--image { height: 85%; margin: 0 auto; &.is--large { height: 100%; } } } }
Versuche das einmal. Die Bildgröße wird somit von (ich glaube 70%) auf 85% erhöht und qualitativ hochwertiger.
In welcher Datei genau muss man das machen? Ich habe das Problem das die Artikelbilder bei der Einkaufswelt zu Groß sind. Es wird daher nur 1/4 von dem Bild angezeigt.
Kann mir denn niemand helfen? Das gibt’s doch nicht! Es gibt offensichtlich keine Einkqufswelt Dokumentation für Shopware5 und in vielen Threads lesen ich das jede Menge Leute an diesem Punkt Probleme haben. Wie kann es sein das ein Kernfeature nicht ausreichend dokumentiert ist? P.
Moin, ich hatte gestern nach dem Update auch das Problem, dass die Bilder im Kategorie-Teaser beim Skalieren die falsche Größe hatten, 200x200, anstatt 600x600 und total unscharf waren. Ich habe dann die Bildgröße in /widgets/emotion/components/component_category_teaser.tpl geändert und alles ist gut. Natürlich in meinem Theme!! Schau unter /widgets/emotion mal nach ob Du dort Deine Bildgröße für Artikel einsetzen kannst.
Hallo Petra, vielen Dank für den Tip. Beim mir sind allerdings die Artikelbilder unscharf die ich frei in der Einkaufswelt platziert habe…das dürfte an anderer Stelle definiert sein, oder? Viele Gruesse P.
Wie gesagt: in der /themes/Frontend/DeinTheme/frontend/_public/src/less/_components/emotions.less folgendes einsetzen: // Product-Box element .emotion--product { .product--box { .product--image { height: 85%; margin: 0 auto; &.is--large { height: 100%; } } } }
Mit Prozentzahl vergrößerst oder verkleinerst Du das Bild. Probier es einfach mal aus.
Hallo Jox, Danke für Deinen Tip. Leider bringt er bei mir nicht das gewünschte Ergebniss. eigentlich möchte ich auch das ich eine Thumbnailgrösse habe die in der Desktopansicht komplett unskaliert ausgegeben wird. Leider kann mir offensichtlich keiner sagen wie ich das anstellen kann. Klingt für mich auch erstmal nach einer relativ normalen Anfoderung an ein System?