Vorschaubilder im Hoch und Querformat

[Zaldoran]

Moin,

ich hab jetzt mal ein paar Artikel in den Shop, und dann - bedingt dadurch dass es sowohl hoch als auch querformatige Bilder sind, diesen irgendwie unschönen Versatz:



Jetzt frage ich mich ob man da templateseitig etwas verbessern kann (ich habe mich mit Templates noch überhaupt nicht befasst, dieses hab ich gekauft weil es insgesamt am passendsten war, und ich nicht die Zeit habe alles komplett von der grünen Wiese aufzubauen)

Bzw. wie seid Ihr mit dieser Problematik in euren Shops umgegangen? Man könnte es ja auch lassen und ignorieren, oder einspaltige Darstellung verwenden.

Gibts hier im Forum irgend einen Startpunkt, sagen wir mal "Templateaufbau für Noobs?"

Gruß
Holger

Linkback: https://www.modified-shop.org/forum/index.php?topic=15548.0

[Tomcraft]

Hallo Holger gib dem Bereich für das Bild einfach eine feste Höhe und das Problem ist behoben.

Wenn du uns einen Link zum Shop gibst, dann können wir das mit Firebug für Firefox untersuchen, siehe: FAQ: Liste wichtiger Freeware- & OpenSource-Programme für die Shop-Erstellung

Grüße

Torsten

[Liezeu]

Hallo Holger,

vom optischen her würde ich das so machen:

Da deine Bilder verschiedene Maße in Höhe und Breite aufweisen, würde ich die Bilder auf ein gleichmäßiges Maß bringen, z.B. 400x600 Pixel.
Das ist ganz gut mit Irfanview zu machen.
Ist natürlich mit einiger Arbeit verbunden, sieht aber nachher besser aus!

Grüße Daniel

[Zaldoran]

Wenn du uns einen Link zum Shop gibst

Klar, http://www.bieberer-puppengalerie.de

Aber auf Dein energisches und ausdrückliches Anraten hab ich ihn ja vorgestern offline geschaltet.

[Tomcraft]

Bist du sicher, dass ich dir das geraten hatte? Kann mich an den Shop gar nicht erinnern!
Ich denke, dass du da gerade etwas verwechselst...

[...]
Da deine Bilder verschiedene Maße in Höhe und Breite aufweisen, würde ich die Bilder auf ein gleichmäßiges Maß bringen, z.B. 400x600 Pixel.
Das ist ganz gut mit Irfanview zu machen.
Ist natürlich mit einiger Arbeit verbunden, sieht aber nachher besser aus!
[...]

Da würde ich aber meine Lösung deutlich bevorzugen.

Grüße

Torsten

[Zaldoran]

Ja aber völlig sicher. 

Englisch bearbeiten ohne dass es online ist?

Aber ich schalt ihn mal on...

[Tomcraft]

Ach okay... ich dachte wegen rechtlicher Dinge!

Jo... dazu stehe ich nach wie vor. Google ist manchmal schneller als dir lieb sein kann!

Ich habe mal im Shop geschaut... hänge mal bitte deine "product_info_xyz.html" gezippt hier an. Das Problem bei dir ist, dass das DIV keine Klasse zugewiesen hat.

Grüße

Torsten

[Liezeu]

[...]
Da würde ich aber meine Lösung deutlich bevorzugen.
[...]

Hallo Tomcraft,

du meinst wegen des Aufwands?
Da hast Du natürlich Recht, allerdings wird es ja bei deiner Lösung wohl so sein, dass evtl. die Bilder gestaucht werden oder links und rechts ein weiser Balken zu sehen ist, oder sehe ich das falsch?

Grüße Daniel

[Tomcraft]

Das Ergebnis wirst du dir gleich in seinem Shop anschauen können, wenn er seine "product_info" hier mal anhängt.

Grüße

Torsten

[Zaldoran]

Ich denke Du meinst diese hier?

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="product_info"}
{$FORM_ACTION}
<h1>{$PRODUCTS_NAME}</h1>

<div id="productinfowrap">
<table><tr valign="top"><td style="padding-right:20px;">
        {if $PRODUCTS_IMAGE!=''}

                <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br/>
                {#text_zoom#}{/if}</a>

        {/if}</td><td>
        <div id="productinfoprice">
               
                        <p class="productprice"><strong>{$PRODUCTS_PRICE}</strong></p>
                        <p class="taxandshippinginfo" style="white-space:nowrap">{$PRODUCTS_TAX_INFO}{if $PRODUCTS_SHIPPING_LINK}{$PRODUCTS_SHIPPING_LINK}{/if}</p>
                        {if $SHIPPING_NAME}<p class="shippingtime"><strong>{#text_shippingtime#}</strong>{if $SHIPPING_IMAGE}<img src="{$SHIPPING_IMAGE}" alt="{$SHIPPING_NAME}" />{/if} {$SHIPPING_NAME}</p>
                        {/if}
                        {if $PRODUCTS_VPE}
                        <div class="hrlightgrey"></div>{$PRODUCTS_VPE}{/if}
                        {if $MODULE_graduated_price !=''}<div class="hrlightgrey"></div>{$MODULE_graduated_price}{/if}
                        {if $PRODUCTS_DISCOUNT!=''}<div class="hrlightgrey"></div>{$PRODUCTS_DISCOUNT}{/if}
                        {if $PRODUCTS_FSK18=='true'}<div class="hrlightgrey"></div><img src="{$tpl_path}img/fsk18.gif" alt="" style="cursor:default" />{/if}
                        {if $PRODUCTS_MODEL!=''}<div class="hrlightgrey"></div>
                        <strong>{#model#}</strong> {$PRODUCTS_MODEL}{/if}
                        {if $PRODUCTS_URL != ''}
                        <div class="hrlightgrey"></div><div style="padding-top:5px;">{$PRODUCTS_URL}</div>
                        {/if} <br />
                        <div style="margin-top:10px"></div>
                        {#print#} {$PRODUCTS_PRINT}

                {if $PRODUCTS_DATE_AVIABLE != ''}<p>{$PRODUCTS_DATE_AVIABLE}</p>{/if}
        </div> 
        <div style="clear:both;"></div>
  </td></tr></table>
        {if $MODULE_product_options !=''}
        <div class="productoptions">{$MODULE_product_options}</div>{/if}
<!-- BOF - Tomcraft - 2009-11-28 - Included xs:booster //-->
        {if $XTB_REDIRECT_USER_TO=='product'}<div style='width:400px;padding:10px;color:white;background-color:green;'><strong>Sie haben die eBay Auktion gewonnen!</strong><br/>Bitte w&auml;hlen Sie nun noch die gew&uuml;nschten Produkteigenschaften und legen Sie den Artikel danach in den Warenkorb, um mit der Zahlung fortzufahren und das Produkt versandfertig zu machen!</div>{/if}
<!-- EOF - Tomcraft - 2009-11-28 - Included xs:booster //-->
        <div class="addtobasket">
        <table border="0" cellspacing="0" cellpadding="2">
                <tr>
                <td style="width:100%; padding-right:5px;">{$ADD_QTY}</td>
                <td>{$ADD_CART_BUTTON}</td>
                </tr>
        </table>
        </div>
        {if $PRODUCTS_DESCRIPTION !=''}<div>{$PRODUCTS_DESCRIPTION}</div>{/if}
</div>

{if $more_images|@count > 0}
<!-- More Pictures -->
<div class="morepics">
{foreach item=more_images_data from=$more_images}
<a class="thickbox" rel="{$PRODUCTS_ID}" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>                          
{/foreach}
</div>
<div style="clear:both;"></div>
{/if}


{$FORM_END}
{if $MODULE_products_media != ''}{$MODULE_products_media}{/if}
{if $MODULE_products_reviews != ''}{$MODULE_products_reviews}{/if}
{if $MODULE_cross_selling != ''}{$MODULE_cross_selling}{/if}
{if $MODULE_reverse_cross_selling != ''}{$MODULE_reverse_cross_selling}{/if}
{if $MODULE_also_purchased != ''}{$MODULE_also_purchased}{/if}
{if $PRODUCTS_ADDED != ''}<p class="productinfoproductadded">{$PRODUCTS_ADDED}</p>{/if}
{$PRODUCT_NAVIGATOR}

[Tomcraft]

Argh... Quatsch, sorry! Ich meinte die "new_products_default.html"!

Grüße

Torsten

[Zaldoran]

Kein Problem 

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="new_products"}
<h1>{#heading_text#}</h1>
{foreach name=aussen item=module_data from=$module_content}
<div style="float:left; width:283px; padding-top:2px; padding-left:7px; padding-right:2px; background-color:#FFFFFF;">
<div class="prodboxtop"><img src="{$tpl_path}bilder/prod_boxtop.jpg" alt="" width="283" height="30" border="0" /></div>
<div class="prodboxmiddle"><div class="prodboxcontent">

<div align="center"><strong>{$module_data.PRODUCTS_NAME}</strong></div>
<div align="center">{if $module_data.PRODUCTS_IMAGE!=''}
                        <a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>
                    {else}
                        <strong>Kein Bild vorhanden!</strong>
                    {/if}</div>
                                       
{if $module_data.PRODUCTS_SHORT_DESCRIPTION!=''}
                        {$module_data.PRODUCTS_SHORT_DESCRIPTION}
                    {else}
                       &nbsp;
                    {/if}
<div class="line"></div>
<div class="productPreviewContent">
<div class="price">{$module_data.PRODUCTS_PRICE}<!--{$module_data.PRODUCTS_ID}--></div>
                    <p class="taxandshippinginfo">({$module_data.PRODUCTS_TAX_INFO}{$module_data.PRODUCTS_SHIPPING_LINK})</p>
                    {if $module_data.PRODUCTS_VPE}<p class="vpe">{$module_data.PRODUCTS_VPE}</p>{/if}
                    {if $module_data.PRODUCTS_SHIPPING_NAME}
                        <p class="shippingtime">{#text_shippingtime#}
                       {if $module_data.PRODUCTS_SHIPPING_IMAGE}
                            <img src="{$module_data.PRODUCTS_SHIPPING_IMAGE}" alt="{$module_data.PRODUCTS_SHIPPING_NAME}" />
                        {/if}
                        {$module_data.PRODUCTS_SHIPPING_NAME}
                    {/if}
                    {if $module_data.PRODUCTS_STOCKS_TRAFFIC_IMAGE}
                        <p class="stockimage"><img src="{$module_data.PRODUCTS_STOCKS_TRAFFIC_IMAGE}" alt="{$module_data.PRODUCTS_STOCKS_TRAFFIC_NAME}" /></p>
                        <p class="stockimagetext">{$module_data.PRODUCTS_STOCKS_TRAFFIC_NAME}</p>
                    {/if}</div>
<div class="line"></div>
<p class="centerContent">{$module_data.PRODUCTS_BUTTON_BUY_NOW}&nbsp; <a href="{$module_data.PRODUCTS_LINK}"><img src="{$tpl_path}buttons/{$language}/button_product_more.gif" alt="Details" border="0" /></a></p>
</div>
<div class="prodboxbottom"><img src="{$tpl_path}bilder/prod_boxbottom.jpg" alt="" width="283" height="30" border="0" /></div>
 
</div></div>
{/foreach}

[Tomcraft]

Ersetze deine Datei mal bitte mit folgendem Inhalt:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="new_products"}
<h1>{#heading_text#}</h1>
{foreach name=aussen item=module_data from=$module_content}
<div style="float:left; width:283px; padding-top:2px; padding-left:7px; padding-right:2px; background-color:#FFFFFF;">
<div class="prodboxtop"><img src="{$tpl_path}bilder/prod_boxtop.jpg" alt="" width="283" height="30" border="0" /></div>
<div class="prodboxmiddle"><div class="prodboxcontent">

<div align="center"><strong>{$module_data.PRODUCTS_NAME}</strong></div>
<div align="center" style="height:200px;">{if $module_data.PRODUCTS_IMAGE!=''}
                        <a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>
                    {else}
                        <strong>Kein Bild vorhanden!</strong>
                    {/if}</div>
                                       
{if $module_data.PRODUCTS_SHORT_DESCRIPTION!=''}
                        {$module_data.PRODUCTS_SHORT_DESCRIPTION}
                    {else}
                       &nbsp;
                    {/if}
<div class="line"></div>
<div class="productPreviewContent">
<div class="price">{$module_data.PRODUCTS_PRICE}<!--{$module_data.PRODUCTS_ID}--></div>
                    <p class="taxandshippinginfo">({$module_data.PRODUCTS_TAX_INFO}{$module_data.PRODUCTS_SHIPPING_LINK})</p>
                    {if $module_data.PRODUCTS_VPE}<p class="vpe">{$module_data.PRODUCTS_VPE}</p>{/if}
                    {if $module_data.PRODUCTS_SHIPPING_NAME}
                        <p class="shippingtime">{#text_shippingtime#}
                       {if $module_data.PRODUCTS_SHIPPING_IMAGE}
                            <img src="{$module_data.PRODUCTS_SHIPPING_IMAGE}" alt="{$module_data.PRODUCTS_SHIPPING_NAME}" />
                        {/if}
                        {$module_data.PRODUCTS_SHIPPING_NAME}
                    {/if}
                    {if $module_data.PRODUCTS_STOCKS_TRAFFIC_IMAGE}
                        <p class="stockimage"><img src="{$module_data.PRODUCTS_STOCKS_TRAFFIC_IMAGE}" alt="{$module_data.PRODUCTS_STOCKS_TRAFFIC_NAME}" /></p>
                        <p class="stockimagetext">{$module_data.PRODUCTS_STOCKS_TRAFFIC_NAME}</p>
                    {/if}</div>
<div class="line"></div>
<p class="centerContent">{$module_data.PRODUCTS_BUTTON_BUY_NOW}&nbsp; <a href="{$module_data.PRODUCTS_LINK}"><img src="{$tpl_path}buttons/{$language}/button_product_more.gif" alt="Details" border="0" /></a></p>
</div>
<div class="prodboxbottom"><img src="{$tpl_path}bilder/prod_boxbottom.jpg" alt="" width="283" height="30" border="0" /></div>
 
</div></div>
{/foreach}

Grüße

Torsten

[Zaldoran]

Jaaaaaaaa, schon viel besser. 

Wenn ich jetzt noch für die hochformatigen die Höhe etwas reduziere bzw. generell das Seitenverhältnis noch etwas verbessere, dann passt's. Vielen Dank Torsten. 

Morgen schau ich mir mal an was Du geändert hast. Nochmal auf meine Frage eingangs zurückzukommen, gibt es irgendwo einen guten Einstieg in das Howto der Templatebarbeitung? Weil ein paar Dinge will / muss ich an dem Template noch verändern.

[Tomcraft]

Ich zitiere mich mal selber, weil sich an den links ja nichts geändert hat:

Schau mal hier:

• ANLEITUNG: So erstellt ihr euer eigenes Template
• DOKU: Beschreibung der Template-Dateien
  
• DOKU: Beschreibung der Buttons im xtc5 Template
• DOKU: Übersicht der CSS id's und classes im xtc5 Template

Ein paar grundlegende HTML-Kenntnisse wirst du aber benötigen.
[...]

Quelle: Layout verändern ohne Große Programmierkenntnisse

Grüße

Torsten