Bildgrößen und Zoom auf der Artikelseite

Hallo Zusammen, ich weiss das Thema ist schon tausend mal hier diskutiert nur ich finde den fehler nicht, ich habe die Größen im default und emotional Ordner im Datei image.tpl geändert, es passt auch alles gut nur sobald ich auf der Artikel Seite auf das erste Bilde klicke kommen wieder die alten Einstellunge hier die Codes von der Seite: emotioan image.tpl [code]{block name=“frontend_detail_image”} {if $sArticle.image.src.9} {* Main picture *} {block name=‘frontend_detail_image_main’} {if $sArticle.image.res.relations}

{$sArticle.articleName}
{/if} {$sArticle.articleName} {/block} {* No picture available *} {else} {block name=‘frontend_detail_image_empty’} ![{$sArticle.articleName}]({link file=‘frontend/_resources/images/no_picture.jpg’}) {/block} {/if} {block name=‘frontend_detail_image_thumbs’} {include file=“frontend/detail/images.tpl”} {/block} {/block}[/code] und default template image.tpl {block name="frontend\_detail\_image"} {if $sArticle.image.src.9} {\* Main picture \*} {block name='frontend\_detail\_image\_main'} {if $sArticle.image.res.relations} [![{$sArticle.articleName}]({$sArticle.image.src.9} "{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}")]({$sArticle.image.src.9} "{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}") {/if} [![{$sArticle.articleName}]({$sArticle.image.src.8} "{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}")]({$sArticle.image.src.9} "{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}") {/block} {\* No picture available \*} {else} {block name='frontend\_detail\_image\_empty'} ![{$sArticle.articleName}]({link file='frontend/_resources/images/no_picture.jpg'}) {/block} {/if} {block name='frontend\_detail\_image\_thumbs'} {include file="frontend/detail/images.tpl"} {/block} {/block} Hier der Link zur Seite. Wäre um jede hilfe dankbar, sitze schon viel zu lange an dem Punkt. Shop Link LG Mürsel

Ich denke es liegt daran daß man auch das Layout entsprechend anpassen muß - also den Textblock wo zuletzt der Warenkorb Button ist. Solange dieser so breit ist wie vorher ist nicht genug Platz für das große Produktbild und deshalb geht er dann by error wieder auf die alte Einstellung. Ich hab grad das selbe Problem hab deshalb aber auch das Layout noch nicht anpassen können.

mhh das kann sein aber ich weiss nicht wo ich noch sonst was anpassen muss, weiss keiner einen Rat ?

A. Ruft man die Seite auf, ist der HTML-Source des Produktbilds: ![Polo-Shirts-Copy-Copy-Copy](http://www.max-polo.com/media/image/thumbnail/max_polo_grau_275x350.jpg "Polo-Shirts-Copy-Copy-Copy") B. Klickt man auf den Thumbnail, dann ist die Quelle des Produktbildes: ![Polo-Shirts-Copy-Copy-Copy](http://www.max-polo.com/media/image/thumbnail/max_polo_grau_285x255.jpg "Polo-Shirts-Copy-Copy-Copy") Der Dateiname des Images ist nicht identisch mit dem ersten Aufruf. Das Bild ist auch nur 170px x 255px groß. C. Klickt man auf das zweite Thumbnail, ist der HTML-Code identisch mit A, und das Image hat wieder das Namensschema von A: max_poloshirt_grau_275x350.jpg und die physikalische Größe stimmt ungefähr mit A überein. Durch das erste Thumbnail wird einfach eine andere Image-Datei (=Bildgröße) aufgerufen im Vergleich zu den anderen Thumbnails. Das sieht man auch im HTML-Code zu den Thumbnails. rev=„http://www.max-polo.com/media/image/thumbnail/max_polo_grau_285x255.jpg“ Da müsste aber der Dateiname max_polo_grau_275x350.jpg stehen. Keine Ahnung, wo Du es geändert hast. Ist der Block für die Thumbnails verändert worden? Mit den Spalten rechts hat das überhaupt nichts zu tun. Es reduziert sich doch Breite und Höhe des Bildes, das kann keine Auswirkungen auf die Breite der Produktbild"spalte" haben.

hallo Hth, ich habe eigentlich nur auf drei Dateien die Größen verändert. box_article.tpl image.tpl images.tpl in den Ordner default und emotion wo anders waren auch keine zu finden. Es passt auch, kann auch die Bilder im Listing, Thumpnail auf der Detail Seite oder im Vorschau fenster ändern, beim ersten aufrufen sieht alles Top aus, sobald ich auf das nächste Bild klicken kommen die Standart einstellungen von Shopware … Ich muss auch dazu sagen das ich das Tutorial Template als Vorlage genommen habe, dachte zuerste würde daran liegen aber auch umgestellt auf das Standard Template genau das gleich … Weiss nicht wo ich sonst suchen kann.

/frontend/detail/images.tpl Da ist der Wurm drin. außerdem sollte nichts in default und emotion geändert werden, sondern nur im eigenen Template. Dafür ist das Blocksystem und die Vererbun in Smarty doch da. Wenn da jetzt überall Änderungen sind, würde ich die Verzeichnisse _default und _emotion löschen und direkt aus dem ZIP-Archiv der Shopwareinstallationsdateien neu einspielen. Anschließend eine eigene emotion_meintemplate/frontend/detail/images.tpl anlegen und die Änderungen vornehmen. Aber extend am Anfang nicht vergessen.

mhh ich mach mal ne sicherung von dem templates und versuche es mal, was meinst du mit extend am Anfang?

{extends file=‘parent:frontend/detail/images.tpl’} In diesem Fall aber weglassen, da die komplette Datei übernommen werden muss und keine Bestandteile aus alten _default oder _emotion übernommen werden sollen.

1 „Gefällt mir“

sorry ist mein erstes projekt jetzt mit shopware, wo muss ich das ändern in backend oder in einer Datei ?

Die Datei _emotion/detail/images.tpl in den Ordner templates/emotion_meintemplatename/frontend/detail/ kopieren. Anschließend alle Änderungen dort vornehmen. Außerdem im Backend das Template meintemplatename aktivieren.

Für die Thumbnails in deinem Templateorder unter: /detail/images.tpl alle fett gedruckten rev="{$sArticle.image.src.3} ändern. Anstatt der 3 die Zahl der gewünschten Produktgröße angeben. Im ORiginal aus dem _emotion-Ordner ist es eine 4. Die Funktion zwischen {* Main picture variant *} und {* Thumbnail variant *} kenne ich jetzt leider nicht aus dem Stegreif. Für die Größe des Produktbildes beim erstmaligen Aufruf musst Du natürlich noch image.tpl ändern. Aber das hast Du ja bereits ein Mal getan. [code]{* Thumbnails *} {if $sArticle.images}

 

{if $sArticle.image.src.4} {/if} {foreach from=$sArticle.images item=sArticleImage} {if $sArticleImage.relations} {* Main picture variant *}

{* Thumbnail variant *} {else} {/if} {/foreach}
 

 
{/if}[/code]

Bei mir siehts derzeit so aus Link Das Zoomfenster (roter Rahmen) kann man in der “eigenen.css” einfärbeln .cloud-zoom-big, #cloud-zoom-big, #thumbs a, .thumb_box a:hover, ul#menu_right {border-color:#d31a4a} Formatiert habe ich es in der jquery.shopware.js (jene die in _emotion/frontend/_resources/javascript/ zu finden ist (in default gibts auch eine und der Versuch sie ins eigene Template Verzeichnis zu installieren wegen der Updatesicherheit funktionierte nicht) Das einzige was mich derzeit stört ist daß das Fenster das sich auf Klick auf das Bild öffnet so groß wie das im Roten Zoomfenster ist. Das scheint leider immer die selbe Größe anzunehmen und läßt sich in der image.tpl nicht regeln. Übrigens für die Bildgrößen hab ich lediglich die image.tpl verändert die im default ordner liegt und die images.tpl die sowohl im default als auch im _emotion ordner liegen unverändert gelassen. Jedenfalls habe ich einfach alle src.4 in der image.tpl gegen die zuvor im medienmanager angelegte Größe 6 getauscht. Und aus den src.5 habe ich die src.7 gemacht. (das Bild im Zoomfenster.) Falls mir jemand bei obigen Problem helfen kann daß das angeklickte Bild so groß wird würds mich freuen.

Das Layout der Detailseite hab ich verändert indem ich zuerst die h1 Überschrift welche die Breite des Textteiles bestimmt in meiner eigenen.css schmäler gemacht habe. (300px) #detail h1 {font-family: ‚georgia‘;font-size: 20px; width: 300px; margin-bottom: 20px; color: #d31a4a;} das ist Vorrausetzung bewegt aber noch zu wenig weil auch der mittlere Textblock verschoben werden muß. templates/_emotion/frontend/detail/index.tpl nehmen und ins eigene Template kopieren wo der Ordner aber noch angelegt werden muß templates\eignes\frontend\detail\index.tpl diesen Teil : {* Detailbox middle *}

… {* Article comments - small overview *} … {* Additional links *} … file=„frontend/detail/actions.tpl“} {/block}
habe ich dann filetiert und die Restteile in die {* Detailbox right *} geschoben - an die Stellen wo ich sie haben wollte. Hat nicht ganz perfekt funktioniert aber ich bin schon glücklich soweit gekommen zu sein.

Hallo 4now, für die “linke” Spalte - das Produktbild - müssen noch CSS-Angaben umgeändert werden. Es funktioniert zwar jetzt so, aber nur, weil der Browser so nett ist und die “richtige” Breitenangabe des Bildes verwendet und die Breite des DIV-Warppers in dem das Bild liegt ignoriert. Die beiden CSS-Angaben sollten noch in das CSS, um es sicher zu machen. #detail #detailbox #img { width: 550px; margin-right: 0px; float: left; } #detail #detailbox #img .wrapper { margin: 0; width: 550px; Allerdings stimmt es nicht, dass die rechte Spaltebreite durch die Überschrift alleine bestimmt wird. Das funktioniert, weil du keinen Konfigurator verwendest. Den Zeilenumbruch beim Lieferstand kannst Du durch display:inline für den grünen Text ändern. @Zoombild: Direkt das href am Anfang gibt die Größe des Lightboxbildes an - hier $sArticle.image.src.5 [![{$sArticle.articleName}]({$sArticle.image.src.4} "{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}")]({$sArticle.image.src.5} "{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}")

2 „Gefällt mir“

super hth ! Danke für deine Angaben. Ich hatte vorhin getestet ein zweites Bild zu laden und die Leiste mit den kleinen VorschauBildern die dadurch entstand hatte dann wohl zu wenig Platz im Layout unten. Das endet damit daß “er” dann wieder auf default umstellt und nur kleine Bilder lädt. Da muß ich nächste Woche nochmal ran. Die beiden wrapper zeilen werde ich jedenfalls auch noch einfügen. Danke nochmal.

HTH wolltem mich nur für deine unterstützung bedanken habs hinbekommen in dem ich die Dateien einfach neu drauf gespielt haben und an den gewünschen stellen nochmal alles geändert habe … Sie da es geht doch :wink:

@4now wenn die Vorschaubilder unterhalb des Produktbildes verschwinden, hat das auf keinen Fall etwas mit einem “Umschalten” auf _default zu tun. Der Seitenaufbau auf dem Bildschirm ist durch das HTML und das CSS bedingt; beides wird im Browser gemacht. Zu dem Zeitpunkt ist ein “Rücksprung” auf ein anderes Template gar nicht mehr möglich. Smarty (Shopware) baut aus den Dateien der verschiedenen Templates - _default, _emotion, emotion_eigenesTemplate - eine HTML Datei zusammen. Wenn das HTML im Browser nun dem in den _default Dateien entspricht, dann weil es keine aktuellere Templatedatei gibt. Smarty ist es vollkommen egal, ob auf der Webseite genügen Platz für ein Image ist. Außerdem kann man das Produktbild beliebig “hoch” machen, die Vorschaubilder darunter bleiben erhalten - zumindest in GoogleChrome.

1 „Gefällt mir“

Ok werd das am Montag ausprobieren, vielleicht funktioniert es ja mit den .css Ergänzungen. Nur was ich bei dem nachmittäglichen Schnelltest gesehenhabe war das die Produktbeschreibung an der selben Stelle bleibt und die Bildvorschauleiste nicht nach unten drückt sondern oben das Produktbild wieder auf klein geht damit die Bildvorschauleiste angezeigt wird.

So mit den fehlenden .css angaben von hth und der nun ebenfalls korrigierten images.tpl funktioniert es. Hat man nur ein Bild reicht es die image.tpl datei zu bearbeiten. Hat man mehrere ist auch die images.tpl. Das Problem das das Pop Up Bild so groß wie das Zoombild ist hab ich nicht lösen können obwohl ich alle Werte der images.tpl einzeln durchgegangen bin. Man müßte wohl das script unschreiben um da unterschiedliche Größen zu bekommen. ( Beim zoom extragroß und beim Popup etwas kleiner)

Ja, Lightbox- und Zoom-Bild haben dieselbe Größe; sie sind nicht einzeln änderbar. Du müsstest den lightbox-Aufruf im Javascript an ein nues HTML-Element hängen. In diesem könntest Du dann im Template die Variable mit der entsprechenden Bildgröße übergeben. Aber das ist dann doch etwas (viel) mehr Arbeit als die bisherigen Template-Änderungen.

1 „Gefällt mir“