Neu Bilder im Hochkant Format statt quadratisch - Bildberechnung unterbinden

[anonymous]

Guten Tag liebe JTL Community,

wir nutzen in unserem Shop Bilder, die nicht quadratisch sind, sondern ein Hochkantformat mit grauem Hintergrund haben. In der js/jtl.evo.js wird der Container mit 'square' auf ein quadratisches Format berechnet wird. Dadurch können zwar Bilder im Hochkantformat genutzt werden, wobei diese logischerweise nicht 100% der Containerbreite nutzen. Dadurch entstehen in der Produktliste hässliche Formatierungen mit dem Produktnamen und die Bilder werden kleiner als gewünscht dargestellt. Entfernt man die Berechnung in js/jtl.evo.js so zerstört man auch die Berechnung der Containerhöhe (row-eq-height).

Die Bilder sollen weiterhin hochkant bleiben, aber die gesamte Breite des Containers nutzen.

Nutzt jemand von euch Bilder im Hochkantformat und hat hierfür eine Lösung gefunden? Wir sind dankbar um jeden Tipp

Vielen Dank schon einmal und beste Grüße!

Shopversion: 4.06 Build:9
Wawi: 1.3.20.0

 

[DASevents]

Hatte das Problem auch einmal und habe mit Iran view ein quadrat dahinter gelegt und so alle Rechtecke zu Quadraten gemacht. Einfach mit der stapelbarbeitung bisschen rumspielen.

 

[DASevents]

Lach das kommt davon wenn man mit dem Handy tippt ......
Irvan view soll es sein

 

[anonymous]

Hatte das Problem auch einmal und habe mit Iran view ein quadrat dahinter gelegt und so alle Rechtecke zu Quadraten gemacht. Einfach mit der stapelbarbeitung bisschen rumspielen.

Danke für deine Antwort Es geht nicht darum die Bilder quadratisch zu bekommen, sondern Bilder im Hochkantformat zu nutzen, was eine ganz andere Wirkung auf das Layout im Shop hat.

 

[Tomas]

Hallo anonymous,

wir zeigen unsere Bilder im 4:3 Format an. Ist zwar nicht Hochformat aber die Berechnungen sind Quasi die gleichen. In der jtl.evo.js hatten wir selber nichts verändern müssen, da haben anpassungen in der jtl.gallery.js gereicht. Die eine oder andere CSS Anpassung musste jedoch vorgenommen werden.

Hast du mal einen Link? Es ist immer einfacher sich ein Bild davon zu machen, wenn man den Quellcode sieht

Hatte das Problem auch einmal und habe mit Iran view ein quadrat dahinter gelegt und so alle Rechtecke zu Quadraten gemacht. Einfach mit der stapelbarbeitung bisschen rumspielen.

Das kann der Shop auch ohne Irvan view Einstellungsnr.: 1421

@DASevents
Ist zwar etwas offtopic aber ich hab mir grad mal deinen Shop angesehen. Du solltest deine Bilder im Slider komprimieren. Die sind teilweise 9MB groß.




VG
Tomas

 

[DASevents]

Ups da hat wohl einer das falsche Bild hochgeladen
Danke werd ich beigehen

 

[anonymous]

Hallo anonymous,

wir zeigen unsere Bilder im 4:3 Format an. Ist zwar nicht Hochformat aber die Berechnungen sind Quasi die gleichen. In der jtl.evo.js hatten wir selber nichts verändern müssen, da haben anpassungen in der jtl.gallery.js gereicht. Die eine oder andere CSS Anpassung musste jedoch vorgenommen werden.

Hast du mal einen Link? Es ist immer einfacher sich ein Bild davon zu machen, wenn man den Quellcode sieht

Hi Tomas,

vielen lieben Dank für dein schnelles Feedback.

Einen Link kann ich aktuell leider nicht bereitstellen, da sich der Shop noch im Wartungsmodus befindet und rechtliche Angaben fehlen.

Habe mir mal die jtl.gallery.js angeschaut. Soweit ich das gesehen habe handelt es sich hier um die Scriptdatei, die für den Bildcontainer in der Artikeldetailansicht verantwortlich ist. Da die Grundversion von JTL leider nicht ansatzweise so funktioniert wie sie wahrscheinlich soll und in Sachen Nutzerfreundlichkeit nicht wirklich punkten kann habe ich diese komplett rausgeschmissen und mit einer für uns besser geeigneten Variante ersetzt.

Zurück zum Thema: Es geht um die Bildberechnung in der Artikelliste. Bitte korrigiere mich wenn ich etwas übersehen habe, möchte niemandem auf die Füße treten.

Es geht also weiterhin wahrscheinlich um den nachfolgenden Abschnitt aus der jtl.evo.js , der dafür sorgt, dass Bilder im Hochkantformat nicht über die gesamte Breite des Containers angezeigt werden können.

        imagebox: function(wrapper) {
            var $wrapper = (typeof wrapper === 'undefined' || wrapper.length === 0) ? $('#result-wrapper') : $(wrapper),
                square   = $('.image-box', $wrapper).first().height() + 'px',
                padding  = $(window).height() / 2;

            $('.image-box', $wrapper).each(function(i, item) {
                var box = $(this),
                    img = box.find('img'),
                    src = img.data('src');

                img.css('max-height', square);
                box.css('max-height', square)
                    .addClass('loading');

                if (src && src.length > 0) {
                    //if (src === 'gfx/keinBild.gif') {
                    //    box.removeClass('loading')
                    //        .addClass('none');
                    //    box.parent().find('.overlay-img').remove();
                    //} else {
                        $(img).lazy(padding, function() {
                            $(this).load(function() {
                                img.css('max-height', square);
                                box.css('line-height', square)
                                    .css('max-height', square)
                                    .removeClass('loading')
                                    .addClass('loaded');
                            }).error(function() {
                                box.removeClass('loading')
                                    .addClass('error');
                            });
                        });
                    //}
                }
            });
        },

Über weitere Ideen dieses Problem zu lösen wäre ich weiterhin sehr dankbar