Bildgröße bei : KUNDEN, DIE DIESEN ARTIKEL GEKAUFT HABEN

Deutsches Forum
1

Servus… ich suche vergeblich nach einer Bildgrößen-Anpassung bei:

”KUNDEN, DIE DIESEN ARTIKEL GEKAUFT HABEN, KAUFTEN AUCH"

Meine Artikel werden hier zu groß angezeigt und aufgrund dessen unten abgeschnitten. Kann man diesen speziellen Part unter Grundeinstellungen finden oder kann ich das im css in einer Prozentangabe ändern? Die anderen Cross-Selling Darstellungen sind optimal. Mit Bitte um Hilfe :slight_smile:

2

Selbiges würde mich auch interessieren …:slight_smile:

3

ohne screenshot, link etc. kann man nur raten …
wahrscheinlich muss für gridpicture eine Höhe vorgegeben werden …
mud du mit FireBug analysieren!

4

Eine Höhe vorzugeben hatte ich schon versucht, dadurch verzerrt aber ein Teil der Bilder.

So schaut es aus, CE 4-7-7:

5

kann es sein, dass manche Bilder Portrait und manche Landscape sind?

Wenn ja, entscheide Dich für etwas und mach entweder alle quer- oder alle hochformat.

6

das Problem mit dem Mix von Protrait und Landscape hat man immer wenn die Bilder vom Hersteller / Lieferanten übernommen werden :slight_smile:

wie gesagt - muss man mit Firebug oä analysieren - nehme an es ist der div gridPicture
habe in einem Projekt folgendes in der oxid.css eingestellt:


.gridPicture {
  display:table-cell;
  height:160px;
  width:187px;
  vertical-align:middle;
  text-align:center;
}

( mit der Höhe muß man evtl noch experimentieren)
so werden die Bilder auch noch horizontal zentriert!

7

Die Thumbnail generiert der Shop doch selbst aus dem ersten Eingabebild.

Vielmehr könnte ein Anhaltspunkt sein, das die Produktnamen zu lang sind ?
Hier nochmal ein größeres Bild :

qhnyg6xw.jpg522×449

Ah dank dir patchwork, das werde ich mal ausprobieren :slight_smile:

8

-> für die Überschriften eine feste Höhe vorgeben + overflow:hidden
oder im Template kürzen

9

Hat geklappt, vielen Dank als Rückmeldung an dich. :slight_smile:
Ich wünsche einen schönen Tag.

zlp2u23r.jpg314×281

10

Hy Uepsilon,

wie hast du das gemacht?, kannst du uns den code veröffentlichen?
Ich komme hier nämlich überhaupt nicht mit.

Grüße,

11

Sehr gerne :).

Ich habe im Template für das Grid den Titel auf 30 Zeichen gekürzt.
Das Template ist zu finden unter widget/product/listitem_grid.tpl

Dort den Titel kürzen ca. Zeile 62:

<span>[{ $product->oxarticles__oxtitle->value}] [{$product->oxarticles__oxvarselect->value}]</span>

ändern in:

<span>[{ $product->oxarticles__oxtitle->value|turncate:30}] [{$product->oxarticles__oxvarselect->value}]</span>

Mit |turncate:wert kannst du die Zeichenlänge beschränken.

Und dazu noch das CSS nach den oben genannten Vorschlägen etwas anpassen.
Das Css findes du in out/dein_template/src/css und dann das oxid.css.
Da ca ab Zeile 20002 die Zeilen anpassen. Hier meine Anpassungen:
Wichtig im Detail ich hab die Höhe das Listenelements(.gridView li) was vergrößert auf 260px , dazu den Titelblock(.gridView li .titleBlock) auf 30px beschränkt und das Bild(.gridPicture) mittig zentriert gesetzt.
Der Rest ist ein wenig evt. etwas Schieberei. Musst gucken wie es am besten passt. :slight_smile:

 
.gridView li{
    width: 185px;
    height: 260px;
    overflow: hidden;
    float:left;
    position: relative;
    list-style: none;
    padding: 0;
    list-style: none;
    margin:1px;
}
.gridView li .titleBlock {
   display:block;
   background:#eee;
   color:#29373c;
   text-decoration:none;
   text-shadow: 0 1px 1px #fff;
   font-weight: 700;
   line-height:15px;
   margin: 0px -10px 0;
   padding:5px 12px;
   top:40px;
   width: 185px;
   height: 30px;
   text-align: left;
}

.gridPicture {
  display:table-cell;
  height:195px;
  width:187px;
  vertical-align:middle;
  text-align:center;
}

Ich nutze 4.7.x, weiß nicht ob es Abweichungen zu deiner Shopversion gibt.

Viele Grüße,

12

… ähem …

aus “turncate” würd ich aber besser mal “truncate” machen, damit’s auch funktioniert.

13

Oh sorry, stimmt genau richtig. :wink:

14

Er hat nur eine feste Höhe vorgegeben und da haben sich die Bilder entsprechend angepasst.