Beiträge von Mario

"Imagegrid V2.2" und "Imagegrid Text V2.2" haben jetzt Lazyload.

Genau das hatte ich eigentlich vor, das geht aber nicht bzw. ist nicht nötig.

Ich habe gestern auch eine ganze Weile gebraucht bis ich raus gefunden habe das alle Einstellungen inkl. der Bild-Attribute für den IMG-Tag auch für die WebP gelten.

Einfach mal in der Bildverwaltung für die JPEG ein "Title-Attribut" (Bildbeschreibung) vergeben. Und anschließend in der Browservorschau mit der Maus kurz über dem WebP-Bild verweilen, dann müsste das "Title-Attribut" angezeigt werden.

Ich habe hier mal Alt- und Title-Attribut nachgereicht. LINK

Kurz zur Erklärung, der Code sieht ja ungefähr so aus.

<source srcset="media/files/webp/q1.webp" type="image/webp">
<source srcset="media/images/q1.jpg" type="image/jpeg">
<img loading="lazy" class="wzp-webP_id3118" src="media/images/q1.jpg" alt="Frau Hut" title="Frau mit Hut" />

• Die erste Zeile schnappt sich der Browser der WebP kann.
• Die zweite Zeile schnappt sich der Browser der die erste nicht lesen kann.
• Die Formatierung (CSS-Klasse), das Lazyload sowie die Bildattribute nehmen alle Browser aus dem IMG-Tag der 3. Zeile.

Bild WebP

Zitat von tobias

Hallo Mario,

ZP 16 unterstützt ja das Lazy Loading. Wäre es möglich, dies bei deinem Tool auch zu implementieren? Ich kann es natürlich händisch in den Code eintragen, aber es wird ja dann bei der nächsten Bearbeitung im ZP vermutlich gelöscht werden.

Besten Dank

Tobias

Stimmt das macht hier durchaus Sinn. Werde ich nachrüsten.

Zitat von tobias

Und wo ich gerade frage: Implementierung von WebP - wäre das möglich? Mit Fallback JPG? Weiß aber gar nicht, ob ZP überhaupt mit WebP umgehen kann...

Leider kann ZP noch nicht mit "WebP" umgehen.

Man könnte zwar etwas tricksen und versuchen die WebP-Datei als "Datei-Import" einfügen, das wäre allerdings mit erheblichem Aufwand verbunden, zumal die Bild-Attribute auch mit eingefügt werden müssten. Und die "Fallback-Datei müsste ja auch noch dazu. Da warte ich lieber bis ZP das impementiert.

Ich könnte das ja mal mit einem Bild probieren, für Imagegrid aber im Moment keine Option.

Was genau meinst du? Die Breite des Tooltips? Diese passt sich eigentlich automatisch an den Text an.

Folgendermaßen kannst du eine Breite vorgeben:

Öffne im Widget-Ordner die "tooltip.css".

Ganz oben dem Abschnitt

#tooltip
{
text-align: center;
color: #fff;
background: rgba(0, 0, 0, 0.85);
padding: 10px 15px;
border-radius: 5px;
position: absolute;
z-index: 22200;
}

fügst du folgende Zeilen hinzu

width:100%;
max-width:200px;

Anschließend: Extras > Entwickler > Änderungen übernehmen

Hallo jensiboy,

Theoretisch wäre das möglich.

Wäre aber ein komplett neues Widget mit sehr viel Aufwand. Das schaffe ich im Moment leider nicht.

Eine Alternative wäre eventuell das Widget TOOLTIP mehrfach nebeneinander zu platzieren.

Das wird schwierig, sehr kopliziert.

Der Inhalt wird hier per Text-Editor und/oder HTML-Quelltext-Editor eingfügt.

Man kann natürlich mit dem HTML-Quelltext-Editor eine Seite per iFrame einbinden, so wie im Beispiel mit dem 360° Panorama.

Und wie soll der Inhalt eingegeben werden?

Text-Editor und/oder HTML-Quelltext-Editor wie bei Slide-Window?

Du meinst Sidenav Buttons oder Sidevav-Buttons Grafik?

Also so ähnlich wie HIER nur mit dem "Slide-Windows" Effekt?

Warum soll das das Popup soll beim schliessen ein Refresh bekommen. Das verstehe ich nicht, es wird doch geschlossen, somit wäre ein Refresh sinnlos. Auch wüsste ich nicht wie ich das realiesieren soll, die externe Seite wird ja per iFrame eingbunden.

Ich bin mir nicht sicher ob ich das richtig verstanden habe.

1. Das X schließt das Fenster, wie soll es da gleichzeitig einen Refresh erzeugen?
2. Wähle oben eine Varinte mit "Dynamisch" im Namen. In der Gruppe "Dynamisch" kannst du dann Höhe und Breite in Prozent vergeben.

Zitat von tobias

Vielleicht macht es Sinn dass in die Installations-Anleitung mit aufzunehmen.

Naja, das hat ja nichts mit den Widgets zu tun sondern allgemein mit Zeta Producer.

Genau.

Hallo Tobias,

ist ja ein bekanntes Problem das ZP manchmal die Bilder nicht überträgt. Warum das so ist weiss ich nicht.

Die Bilder sind hier genau so eingebunden wie in allen anderen Widgets.

Grundsätzlich empfieht sich aber folgende Vorgehensweise.

• Die Bilder in die Bildverwaltung importieren.
• Du hast dann auch eine bessere Übersicht weil du diese ordentlich in Ordnern ordnen kannst.
• Anschließend Alt-Text und Title (Bildbeschreibung) vergeben.
• Im Widget die Bilder aus der Bildverwaltung wählen.
• Somit ist auch für SEO alles IO.

Font Awesome hat die URL zu den Icons geändert. Ich wollte schnell reagieren und habe alle Widgets mit Font Awesome entsprechend angepasst. Dabei war ich so schnell das ich vergessen habe die Infos im Ordner "info" entsprechend anzupassen.

Ich werde das Zeitnah anpassen, dabei wird die Versionsnummer gleich bleiben.

Es hat sich also nichts verändert, außer das dieser Link zu den Icons nicht ins leere führt. FA4

Hallo Norbert,

Zitat

Liegt es vielleicht am Eintrag "Anzahl Cards", maximumValue": 10, in der json-Datei?

Nein das sind die Cards welche nebeinander auf der Oberfläche zu sehen sind.

Ich hatte das Widget mit 10 Cards erstellt und vor der Veröffentlichung auf 20 erweitert. Dabei habe ich eine kleine Anpassung in den Varianten vergessen.

Update ist raus. In V1.1 sollten nun alle Cards übernommen werden in denen ein Bild eingefügt ist.

Einfach Update laden und anschließend "Extras > Entwickler > Änderungen übernehmen". Danach sollen die bereits ausgefüllten Cards zu sehen sein.

Ok, das Widget ist jetzt online.

Hallo Tobias,

Einstellungen > CSS:

<style>
.wzp-footfix {
  z-index: 3;
}
</style>

Gehe in den Widget-Ordner und mache eine Sicherung der Datei hover1903.css.

Ändere folgendes in der hover1903.css.

CSS-Klasse .wzp-1903:hover figcaption lösche den Eintrag bottom: -200px;, ändere opacity: 0; in opacity: 1;.

CSS-Klasse .wzp-1903 p ändere bottom: -5%; in bottom: 60%;, ändere opacity: 0; in opacity: 1;.

- Extras > Entwickler > Änderungen übernehmen

- Im Widget Einstellungen Texte > Abstand Unten % den Wert 60 eintragen.

Den Wert 60% kannst du natürlich in der CSS-Datei und der Widget-Einstellung anpassen.