OP_SWIPER on small devices

Third Party Plugins to CMSimple - how to install, use and create plugins

Moderator: Tata

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

OP_SWIPER on small devices

Post by Tata » Thu Oct 21, 2021 9:37 pm

The swiper doesn't show up on a device with e.g. smaller width than 300px. Why about? How to?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: OP_SWIPER on small devices

Post by frase » Fri Oct 22, 2021 5:15 am

Tata wrote:
Thu Oct 21, 2021 9:37 pm
The swiper doesn't show up on a device with e.g. smaller width than 300px. Why about? How to?
So far, I have not been able to determine this in any case.
Do you have an online example at hand?

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: OP_SWIPER on small devices

Post by Tata » Fri Oct 22, 2021 5:20 am

http://cmsimple.sk/ninthspace2/?Projects
On iPhone6. Eigentlich der Swiper läuft, nur die Bilder sind unsichtbar.
IMG_6897.PNG
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: OP_SWIPER on small devices

Post by frase » Fri Oct 22, 2021 5:37 am

Ja, verstehe. Das ist ein Safari-Problem in älteren iOS-Versionen, wobei webp-Bilder nicht dargestellt werden können.
https://caniuse.com/webp

Mögliche Hilfe:
webp UND jpg auf dem Server hinterlegen und ein Pictur-Element mit Source-Set für die Bilder setzen.
Ungefähr so, wie hier empfohlen:
https://css-tricks.com/webp-image-suppo ... to-ios-14/

Wie man das allerdings bei dem Swiper realisieren kann, ist mir momentan nicht klar.
Olaf?

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: OP_SWIPER on small devices

Post by Tata » Fri Oct 22, 2021 5:44 am

Der Screenshot ist vom FF, nicht von Safari :-(. Und ich habe alle Bilder in JPG und auch WEBP hochgeladen. Aber den Tip versuche ich jedenfalls. Obwohl, die Bilder sind in content.htm plaziert und ich kann mir nur kaum vorstellen, alle einzelne Bilder mit dem Snippet

Code: Select all

<picture>
  <source srcset="img/cat.webp" type="image/webp">
  <source srcset="img/cat.jpg" type="image/jpeg"> 
  <img src="img/cat.jpg" alt="Alt Text!">
</picture>
reinzugeben, besonders mit dem Editor. Das würde veralngen, jedes Bild im Code reinzugeben. Oder eine Funktion in userfuncs.php zu schreiben? Das wäre aber wohl nur mit JS möglich, oder?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: OP_SWIPER on small devices

Post by frase » Fri Oct 22, 2021 5:50 am

Tata wrote:
Fri Oct 22, 2021 5:44 am
Der Screenshot ist vom FF, nicht von Safari :-(.
Ja, das hängt auch mit dem Betriebssystem zusammen. Erst ab macOS 11 Big Sur wird webp unterstützt.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: OP_SWIPER on small devices

Post by Tata » Fri Oct 22, 2021 5:52 am

Dann sollte es wohl direkt im Swiper irgendwie eingestellt sein (wie es mit Videos eingestellt ist), dass - falls sich beide Formate im Ordner befinden - nimmt der Plugin den besten Format selbst. Naja, wie soll aber der Plugin wissen, was der User nutzt zum Browsen.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: OP_SWIPER on small devices

Post by frase » Fri Oct 22, 2021 5:59 am

Tata wrote:
Fri Oct 22, 2021 5:44 am
Obwohl, die Bilder sind in content.htm plaziert und ich kann mir nur kaum vorstellen, alle einzelne Bilder mit dem Snippet

Code: Select all

<picture>
  <source srcset="img/cat.webp" type="image/webp">
  <source srcset="img/cat.jpg" type="image/jpeg"> 
  <img src="img/cat.jpg" alt="Alt Text!">
</picture>
reinzugeben, besonders mit dem Editor. Das würde veralngen, jedes Bild im Code reinzugeben. Oder eine Funktion in userfuncs.php zu schreiben? Das wäre aber wohl nur mit JS möglich, oder?
Na ja, das ist im Swiper schwer bzw. gar nicht zu realisieren, weil die Bilder als Background-Images im Stylesheet definiert sind.
Ich habe momentan keine Idee, wie man das lösen könnte. Da hilft eigentlich nur, JPG zu verwenden.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: OP_SWIPER on small devices

Post by Tata » Fri Oct 22, 2021 6:06 am

Das ist nur eine Sache. Die andere ist, die Höhe des Swiper. Die kann ich nicht responsive einstellen. Auf schmallerem Bildschim blelibt eine Lücke unter dem Bild. Der Bild selbst ist responsive.
Übrigens, ich baue jetzt die stylesheet.css komplett um.
Ich habe momentan keine Idee, wie man das lösen könnte. Da hilft eigentlich nur, JPG zu verwenden.
Das wird nicht schwer umzuschreiben - alle webp zu jpg.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: OP_SWIPER on small devices

Post by Tata » Fri Oct 22, 2021 6:28 am

Ja, das läuft mit JPGs. Schade nur, dass die Bilder jetzt viel größer sind. Einige sogar bis 500kB. Obwohl ich sie zu 1600px reduziert habe. Im original waren sie 2400px. Damit ist aber auch die Qualität ziemlich gefallen.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply