Neu Bilder im Hochkant Format statt quadratisch - Bildberechnung unterbinden

anonymous

Aktives Mitglied
24. Januar 2019
38
5
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
 
Zuletzt bearbeitet:

DASevents

Sehr aktives Mitglied
16. Januar 2013
601
25
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.
 

anonymous

Aktives Mitglied
24. Januar 2019
38
5
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

Sehr aktives Mitglied
8. Januar 2018
330
69
Lübeck
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ß. :eek:




VG
Tomas
 
  • Gefällt mir
Reaktionen: DASevents

anonymous

Aktives Mitglied
24. Januar 2019
38
5
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. :love:

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.

JavaScript:
        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 :)
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu beim Umstieg von unicorn auf SCX Bilder aktivieren Otto.de - Anbindung (SCX) 0
Neu Kategorie Bilder werden im Webshop nicht angezeigt User helfen Usern - Fragen zu JTL-Wawi 0
Neu Bilder von Merkmalen werden nicht angezeigt Gelöste Themen in diesem Bereich 5
Versuch Bilder aus Ebay für Kaufland zu übernehmen JTL-Wawi 1.8 0
Bilder Upload und Fehlermeldung WooCommerce-Connector 0
Neu Bilder werden Falsch im Shop angezeigt. WooCommerce-Connector 0
Neu Bilder öffnen sich in mobiler Version fehlerhaft. Allgemeine Fragen zu JTL-Shop 0
Neu Bilder für Kindartikel Gelöste Themen in diesem Bereich 4
Neu Bilder unter "Mehr dieser Waregruppe" und "Kunden, die diesen Artikel gekauft haben, kauften auch" fehlen eBay-Designvorlagen - Fehler und Bugs 0
Neu Amazon Lister übergibt nur das Hauptbild an Amazon, weiter Bilder werden nicht übertragen Amazon-Lister - Fehler und Bugs 0
Neu Wie kann ich Alt-Texte für Bilder an Shopify senden? Shopify-Connector 2
Neu Connector überträgt keine Bilder Shopify-Connector 1
Neu webp-Bilder werden nicht mehr generiert JTL-Shop - Fehler und Bugs 0
Neu Einstellung: "Bilder des Vaterartikels un der folgenden Variationswerte übernehmen" und der Shopware Server "explodiert" Shopware-Connector 10
Neu Bilder werden teilweise in verschiedenen Browser falsch dargestellt Gelöste Themen in diesem Bereich 3
Neu Bilder in Chrome zerquetscht angezeigt.. Gelöste Themen in diesem Bereich 16
Neu Neuer Verkauskanal: Bilder inaktiv User helfen Usern - Fragen zu JTL-Wawi 2
Neu Shop Bilder-Anzeige in Firefox fehlerhaft Allgemeine Fragen zu JTL-Shop 0
Neu Shop Bilder-Anzeige in Firefox fehlerhaft Allgemeine Fragen zu JTL-Shop 6
Neu Plattform als Darstellungsbedingungen für Bilder oder Text Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Custom css für Galerie-Bilder Einrichtung JTL-Shop5 3
Neu JTL 1.8.12.0 - Artikelattribut für Shop importieren - Format CSV-Datei / Hilfe bei Import von individuellen Attributen für JTL-Shop (googlekat) JTL-Ameise - Ideen, Lob und Kritik 1
Neu Falsches Format für DHL Versenden 3.0 JTL-ShippingLabels - Fehler und Bugs 2

Ähnliche Themen