Neues Standard-Template "tpl_modified_nova" zur Vorschau

[noRiddle (revilonetz)]

Muß man bei dem Padding-Hack denn ein Pseudo-Element benutzen ?
Man kann das Padding doch dem Container selbst geben (für das Haupt-Banner .slider_row) und kann es somit inline setzen. Mittels der getimagesize()-Werte ist die benötigte Prozentzahl ja berechenbar.

Warum ändert man an Breakpoints das Seitenverhältnis, meinst du weil es ja auch ein Mobile-Bild gibt, welches ein anderes Seitenverhältnis haben kann ?
Wenn ja, kann man doch auch berechnen lassen.

[...]
Nachtrag weil es mir gerade noch einfällt ...
Wir haben hier jetzt noch nicht die Spezialisten mit ins Kalkül gezogen, die es nicht schaffen 4 Slider-Bilder in der gleichen Größe hochzuladen.

Das trifft doch ja immer zu, egal wie es gelöst ist.
Außerdem: Wer nicht in der Lage ist zu essen sollte sich füttern lassen.

Gruß,
noRiddle

[Karl1]

Hallo Markus,
CLS-Probleme sehe ich eigentlich nur bei Sliderbildern.
Stimmen CSS und Sliderbilder nicht genau überein kommt es sehr schnell zu einem ungünstigen CLS-Wert (größer 0.1).
Auch aspect-ratio nützt nichts, wenn die Bildergrößen oder Seitenverhältnisse unterschiedlich sind.
Als sicherste Lösung sehe ich, den Bildern die Werte "width" und "height" mitzugeben.

Am einfachsten wäre es, wenn diese Daten bereits beim Upload im Banner Manager gespeichert würden.

Alternativ könnte ein Smarty Modifier genutzt werden.

Code: PHP  [Auswählen]

function smarty_modifier_imgsize($img) {
        $size = getimagesize(strstr($img, 'image'));
        // $size[3] entspricht 'height="yyy" width="xxx"'
        return $imgsize = isset($size[3]) ? $size[3] : '';
}

Im Template dann z.B.

Code: PHP  [Auswählen]

{assign var=sizeimg value=$slider.IMAGE_SRC|imgsize}
{if isset($slider.IMAGE_SRC_MOBILE) && $slider.IMAGE_SRC_MOBILE != ''}{assign var=sizeimgmob value=$slider.IMAGE_SRC_MOBILE|imgsize}{/if}
<picture>
        <source media="(max-width:600px)" srcset="{$slider.IMAGE_SRC_MOBILE}" {$sizeimgmob}>
        <source srcset="{$slider.IMAGE_SRC}">
        <img class="img-fluid" src="{$slider.IMAGE_SRC}" alt="{$slider.TITLE|onlytext}" title="{$slider.TITLE|onlytext}" {$sizeimg}>
</picture>

Bei meinen Tests gab es immer wieder Probleme mit "lazyload", weshalb ich die CSS-Klasse dann entfernt habe.

Gruß Karl

[Markus]

Hi Karl,

mir ist schon bewusst dass es Möglichkeiten gibt ... aber egal wie ich es drehe und wende wird es immer irgendwo einen Knackpunkt oder Schönheitsfehler geben. Allein schon wenn ich mir vorstelle dass mal wieder jemand unterschiedliche Sliderbilder hochlädt. Dann hast du "gezappel" und dir schiebt es den Content nach unten beim Blättern.
Ausserdem habe ich mit festen Größen das Problem dass ich das Bild nicht "covern" kann.
Ich meine im Core war sogar mal eine Funktion drin welche für alle Bilder Breite und Höhe liefert. Nur ist das gerade mit responsive Bildern nicht unbedingt  optimal weil ich da immer mit CSS dagegen steuern muss.

Muß man bei dem Padding-Hack denn ein Pseudo-Element benutzen ?
Man kann das Padding doch dem Container selbst geben (für das Haupt-Banner .slider_row) und kann es somit inline setzen. Mittels der getimagesize()-Werte ist die benötigte Prozentzahl ja berechenbar.
[...]

Theoretisch kannst das Padding auch dem Hauptcontainer geben .... ich habs zwar noch nie probiert ... das sollte aber auch funktionieren ... ändert aber nichts am Problem.
Wo genau willst du dem CSS sagen dass das neu berechnete Seitenverhältnis jetzt ein anderes ist?
Media-Queries funktionieren nicht in inline-CSS.

[...]
Warum ändert man an Breakpoints das Seitenverhältnis, meinst du weil es ja auch ein Mobile-Bild gibt, welches ein anderes Seitenverhältnis haben kann ?
[...]

Korrekt ... Einen breiten und flachen Banner kannst du mobil nicht mehr entziffern ... und nochmal ...
Wo genau willst du dem CSS sagen dass das neu berechnete Seitenverhältnis jetzt ein anderes ist?
Media-Queries funktionieren nicht in inline-CSS.

Bedeutet im Endeffekt es bleibt nur der Weg von Karl.
Dann hast du wieder das Problem dass beim Laden der Seite erstmal alle Bilder gezeigt werden. Wenn auch nur für den Bruchteil einer Sekunde bis jQuery zündet. Um das sauber hinzubekommen muss das Slider-Script dann in den Head. Und auch als Javascript und nich als jQuery. Alternativ als inline-Javascript.  Willl man das?

Wenn ich das nicht will bin ich wieder an der Stelle wo ich das Seitenverhältnis brauche um keinen CLS zu erzeugen.
Es war mein Ursprungsgedanke es so flexibel wiemöglich zu lösen ... ich bin aber aus den ganzen Gründen davon abgekommen weil es einfach keine saubere Lösung gibt ohne mit Javascript an verschiedenen Stellen dazwischen zu funken.

Wir brauchen für ein Standardtemplate eine saubere Lösung die so ziemlich alles an "Fehlern" verzeiht und die ganzen Bilder sauber anzeigt.

Markus

[Karl1]

Hi Markus,
bei dem Vorschlag mit dem Modifier habe ich testweise 3 unterschiedlich große Bilder in den Slider geladen.
Der Content unter dem Slider springt hin und her, der CLS-Wert in der Leistungsstatistik ändert sich aber nur 5 Stellen hinter dem Komma.

Gruß Karl

[Markus]

Hi Karl,

du hast dir wahrscheinlich um die ganze Geschichte auch mehr als nur einen Gedanken gemacht und genug Hirnschmalz verbraten.
Es gibt verschiedene Wege, aber so einfach sich so ein Slider anhört ... es ist halt einfach tricky.

Markus

[noRiddle (revilonetz)]

Ich bin nach wie vor der Meinung, daß man den Ansatz mit dem Padding-Trick beibehalten sollte, es jedoch etwas flexibler machen könnte mittels getimagesize(). Alternativ könnte man die Werte auch im Backend unter
Konfiguration => Bild Optionen
einstellbar machen.
Du brauchst darauf nicht einzugehen, Markus, ich werde mal einen Test aufsetzen um zu zeigen wie ich es umsetzen würde.

Gruß,
noRiddle

[Markus]

Hi noRiddle,

nur als Hinweis ... einstellbar im Backend unter Bildoptionen kannst du direkt vergessen.
Wenn überhaupt müsste es in den Bannermanager rein.
Du hast Slider und Banner .... die können letztendlich alle verschiedene Seitenverhältnisse haben.

Markus

[karsta.de]

Und noch dazu kommt, dass Kunden nicht jedem Banner die gleichen Maße geben wollen. Wären wir dann noch flexibel?

Allerdings in diesem Zusammenhang fänd ich es gut, wenn man unter Bildoptionen die Werte für Slider-Bilder explizit eingeben könnte. Ich habe dafür kein Ticket aufgemacht, weil ich nicht weiß wie viele das ebenso sehen.

BG Karsta

[Markus]

Hi Karsta,

[...]
Allerdings in diesem Zusammenhang fänd ich es gut, wenn man unter Bildoptionen die Werte für Slider-Bilder explizit eingeben könnte. Ich habe dafür kein Ticket aufgemacht, weil ich nicht weiß wie viele das ebenso sehen.
[...]

Dafür bitte ein Ticket erstellen ... sonst wird es mit Sicherheit untergehen.

Markus

[noRiddle (revilonetz)]

[...]
nur als Hinweis ... einstellbar im Backend unter Bildoptionen kannst du direkt vergessen.
Wenn überhaupt müsste es in den Bannermanager rein.
Du hast Slider und Banner .... die können letztendlich alle verschiedene Seitenverhältnisse haben.
[...]

Dazu könnte man ja alle Bannergruppen dort für die Einstellung anzeigen lassen.
Da man dann zwei verschiedene Seiten für "Banner/Slider"-Einstellungen hätte gefällt mir die Lösung allerdings auch nicht.
Die Verwendung von getimagesize()  ist besser.

Im Übrigen ist der ursprünglich für Affiliate-Banner und -Links gedachte Banner-Manager vielleicht auch nicht das Mittel der Wahl um aufwendige Darstellungen wie sie momentan im Dev-Shop-Template auf der Startseite gezeigt werden zu bewerkstelligen.
Dazu gibt es ja Slider-Manager, wie z.B. der von Hetfield.

Gruß,
noRiddle

[noRiddle (revilonetz)]

Ach, und was ist mit diesem Thema ?

Noch zwei DInge:
[...]

• Altes Thema AdBlocker:
  Aus dem Pfad der Bilder, und auch aus Klassen und Bezeichnungen, sollte unbedingt das Wort "banner" verschwinden.
  Unabhängig von der modified-Domain werden alle Bilder im Dev-Shop von einigen AdBlockern vollständig geblockt.
  

[...]

Gruß,
noRiddle

[Markus]

Hi noRiddle,

das hatten wir doch schonmal .... das würde ich jetzt hier nicht nochmal rauskramen wollen.
Ich finde gerade nur nicht den Beitrag, wo wir das ausgiebig durchdiskutiert hatten.

Markus

[noRiddle (revilonetz)]

Ich weiß das, aber da gaben wir uns zufrieden damit, daß es an der modified-Domain läge. Dem ist jedoch nicht so, zumindest nicht ausschließlich.
Außerdem ging es da, soweit ich mich erinnere, nicht um den Namen "banner" sondern um "as-oil", welches ich mit Erfolg zu "as-modoil" gemacht hatte.
Vielleicht glaubt Ihr einfach mal, daß es Add-Blocker gibt, die Inhalte einfach deshalb blockieren, weil sie etwas mit "banner" beinhalten.

Gruß,
noRiddle

[bumerang24]

Da gebe ich jetzt einfach mal noRidlle Recht, mit dem Blockieren der Banner.
Ich sehe auf den Testshop in meinen Firefox auch keine Banner, aber ich nutze auch Ad Block +
Vielleicht gibt es da doch wie vorgeschlagen eine Möglichkeit, die Slider in dem Fall für alle sichtbar zu machen. Nicht jeder sieht sich gerne unnötige Werbeeinblendungen an, wenn es nicht sein muss.

In dem Atemzug auch mal ein Dank an den vermutlich fleißigsten nicht Shop betreibenden Coder für die vielen Ideen, wenn ich auch nicht alle immer verstehe.
Programmieren ist aber auch nicht mein Business.

[JuergenS]

Hallo in die Runde.

ich kann mich bumerang24 nur anschließen. Firefox mit Adguard Blocker auf dem Dev-Shop. Werden alle Banner schwarz angezeigt. Hier mal Details des AdGuard Blockers im Anhang.

AdGuard ausgeschaltet läufts einwandfrei.

Gruß
Jürgen