Hallo Shopware Gemeinde,
wir haben ein selbstgebautes Widget für die Einkaufswelt. Nun wollten wir eine neue Einkaufswelt bauen und haben festgestellt, dass das erste Bild hier immer unscharf angezeigt wird. Hat hier jemand eine Idee?
Danke für eure Hilfe!
VG
Wahrscheinlich hat dein Bild prozentuale Angabe, z.B. width: 100%?
Nein das ist alles mir vm geschrieben! Habe da auch schon dran gedacht … eigenartig ist ja das nur bei neuen Elementen das so angezeigt wird. Bei den alten geht alles normal …
Nein das ist alles mir vm geschrieben!
Was ist das für eine Maßeinheit? In welcher Art ist die Bildbreite angelegt? %, cm, px , pc, em, rem …
{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}
{$desc = $sArticle.articleName|escape}
{if $sArticle.image.description}
{$desc = $sArticle.image.description|escape}
{/if}
{if $srcSetRetina}{/if}
{if $srcSet}{/if}
{if $sArticle.secondImage}
{foreach $sArticle.secondImage.src as $srcimage}
{if $srcimage@key !== 'original'}
{$secondSrcSet = "{if $srcimage@key !== 0}{$secondSrcSet}, {/if}{$srcimage} {if $srcimage@key === 0}200{elseif $srcimage@key === 1}800{else}1280{/if}w"}
{/if}
{/foreach}
{foreach $sArticle.secondImage.srchd as $srcRetImage}
{if $srcRetImage@key !== 'original'}
{$secondSrcSetRetina = "{if $srcRetImage@key !== 0}{$secondSrcSetRetina}, {/if}{$srcRetImage} {if $srcRetImage@key === 0}200{elseif $srcRetImage@key === 1}800{else}1280{/if}w"}
{/if}
{/foreach}
.secondpic {
display: none;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.image--media:hover .secondpic {
display: inline;
opacity: 1;
}
.image--media:hover .firstpic {
display: none;
opacity: 0;
}
{* die 800er auflösung wurde noch nicht generiert, da der vorgang auf dem dev abbricht
{if $srcSetRetina}{/if}
{if $srcSet}{/if}
*}
{/if}
{/block}
Ist eigentlich alles em … MHHH
Wieso hast du ein srcset in img stehen? Sollte nicht source diese Aufgabe übernehmen? Wird dann nicht source damit überschrieben? k.P. Spontan würde mir sonst einfallen, dass hier einfach ein wenig-auflösendes Bild aufgebläht wird. Oder die Quelle ist ansich schon wenig-auflösend. Oder es ist alles wie es im Original ist, aber dann müssten deine anderen Bilder auch unscharf sein. Was solln das mal werden, ein ein-und-ausblend effekt von Bildern?
Das ist ein eigenenes Listing-Module für die Einkaufswelten. Das aufgeblähte wenig auflösende Bild ist auch meine Vermutung. Nur wie kann ich das denn testen, welches hier verwendet wird? Das Secondpic wird angezeigt wenn man mit der Maus drüber geht …