Das gab es mal als Plugin im Marketplace von mir. Da ich nur noch Kundenservice Automatisierung mache, ist das Plugin leider nicht mehr online aber hier die zwei entschiedenen Codes, falls es jemand weiterführen will:
Kann man sich mit ChatGPT wahrscheinlich fix zurecht biegen und einbauen.
Im Kern wird da lediglich nur die Domain vom plenty CDN durch die von sirv ersetzt. Bilder werden automatisch übertragen aber das Upload Tool hilft beim vorwärmen..
ItemImageCarousel.twig:
CODE ANZEIGEN
{% set fullParams = config('SirvCDN.itemImageCarouselParams') %}
{% set middleParams = config('SirvCDN.itemImageCarouselMiddleParams') %}
{% set previewParams = config('SirvCDN.itemImageCarouselPreviewParams') %}
{% set cdnBase = config('SirvCDN.cdnBase') %}
{% set sirvBase = config('SirvCDN.sirvBase') %}
{% set jsSnippetFull = ".replace('" ~ cdnBase ~ "','" ~ sirvBase ~ "').replace(imageUrlAccessor == 'url' ? 'url' : imageUrlAccessor.replace('url','').toLowerCase(),'full') + '" ~ fullParams ~ "'" %}
{% set jsSnippetMiddle = ".replace('" ~ cdnBase ~ "','" ~ sirvBase ~ "').replace(imageUrlAccessor == 'url' ? 'url' : imageUrlAccessor.replace('url','').toLowerCase(),'full') + '" ~ middleParams ~ "'" %}
{% set jsSnippetPreview = ".replace('" ~ cdnBase ~ "','" ~ sirvBase ~ "').replace('preview','full') + '" ~ previewParams ~ "'" %}
{% if config('SirvCDN.isPreloading') == "true" %}
{% set preloadImage = (item.documents[0].data.images.all[0].url | replace({ (cdnBase ~''): sirvBase})) ~ middleParams %}
{{ add_asset(preloadImage,'image') }}
{% endif %}
<!-- SSR:template(item-image-carousel) -->
<script type="x/template" data-component="item-image-carousel">
<div itemscope itemtype="http://schema.org/Thing">
<template>
<div class="single-carousel owl-carousel owl-theme owl-single-item mt-0" ref="single">
<div v-for="image in singleImages" class="prop-1-1">
<a :href="image.url{{ jsSnippetFull | raw }}" :data-lightbox="'single-item-image' + _uid">
<img class="owl-lazy" :data-src="image.url{{ jsSnippetMiddle | raw }}" :alt="getAltText(image)"
:title="getImageName(image)">
</a>
</div>
</div>
<div v-if="showThumbs" id="thumb-carousel" class="owl-thumbs owl-carousel owl-theme owl-single-item"
ref="thumbs">
<div class="prop-1-1" v-for="(imagePreview, index) in carouselImages">
<div class="image-container" @click="goTo(index)">
<lazy-img
picture-class="owl-thumb border-appearance"
v-bind:class="{ 'active': currentItem === index}"
:image-url="imagePreview.url{{ jsSnippetPreview | raw }}"
:alt="getAltText(imagePreview)"
:title="getImageName(imagePreview)">
</lazy-img>
</div>
</div>
</div>
</template>
<div v-if="!initialized" class="single-carousel owl-carousel owl-loaded owl-theme owl-single-item mt-0">
<div class="prop-1-1">
<img
class="owl-placeholder"
:src="singleImages[0].url{{ jsSnippetMiddle | raw }}"
:alt="getAltText(singleImages[0].url)"
:title="getImageName(singleImages[0].url)"
>
</div>
</div>
</div>
</script>
<!-- /SSR -->
CategoryImageCarousel.twig
CODE ANZEIGEN
{% set params = config('SirvCDN.categoryImageCarouselParams') %}
{% set cdnBase = config('SirvCDN.cdnBase') %}
{% set sirvBase = config('SirvCDN.sirvBase') %}
{% set jsSnippet = ".replace('" ~ cdnBase ~ "','" ~ sirvBase ~ "').replace('middle','full') + '" ~ params ~ "'" %}
<!-- SSR:template(category-image-carousel) -->
<script type="x/template" data-component="category-image-carousel">
<a :id="'owl-carousel-' + _uid" v-if="$data.$_enableCarousel" class="owl-carousel owl-theme" :href="itemUrl" role="listbox" :aria-label="$translate('Ceres::Template.itemImageCarousel')">
<div v-for="(imageUrl, index) in imageUrls" :key="index">
<lazy-img v-if="index === 0 && !disableLazyLoad" ref="itemLazyImage" picture-class="img-fluid" :image-url="imageUrl.url{{ jsSnippet | raw }}" :alt="getAltText(imageUrl)" :title="getTitleText(imageUrl)" role="option"></lazy-img>
<img v-else-if="index !== 0 && !disableLazyLoad" class="img-fluid owl-lazy" :data-src="imageUrl.url{{ jsSnippet | raw }}" :alt="getAltText(imageUrl)" :title="getTitleText(imageUrl)" role="option">
<img v-else class="img-fluid" :src="imageUrl.url{{ jsSnippet | raw }}" :alt="getAltText(imageUrl)" :title="getAltText(imageUrl)" role="option">
</div>
</a>
<a v-else :href="itemUrl">
<lazy-img v-if="!disableLazyLoad" ref="itemLazyImage" picture-class="img-fluid" :image-url="imageUrls[0].url{{ jsSnippet | raw }}" :alt="getAltText(imageUrls[0])" :title="getTitleText(imageUrls[0])"></lazy-img>
<img v-else class="img-fluid" :src="imageUrls[0].url{{ jsSnippet | raw }}" :alt="getAltText(imageUrls[0])" :title="getTitleText(imageUrls[0])">
</a>
</script>
<!-- /SSR -->
Alte Marketplace Anleitung:
Zusammenfassung
SirvCDN
Beta-Hinweis: Teste das Plugin zunächst in einer inaktiven Plugin-Set-Kopie.
Dieses Plugin ermöglicht dir in wenigen Minuten, alle deine Bilder im modernen und viel schnelleren webP-Bildformat auszuliefern.
Und zwar ohne, dass du dich technisch mit Web-Entwicklung oder Bildformaten auseinandersetzen musst und auch ohne das du irgendwelche Dateien hin und her kopieren oder aufwendig pflegen musst.
Das Sirv CDN ermittelt bei jedem Shop-Aufruf die technischen Voraussetzungen deines Besuchers und liefert immer das beste Bildformat, in der besten Qualität, aber mit minimalen Dateigrößen aus. Dadurch sparst du je nach Bild zwischen 30% und 40% an Dateigröße, was deinen Shop zu einer kleinen Bild-Rakete macht.
Da die meisten modernen Browser mittlerweile das webP-Bildformat verstehen, bedeutet das, dass deine Bilder fast ausschließlich in diesem Format ausgegeben werden.
Überzeug dich selbst und teste deinen Shop im Google Pagespeed Insights Test mit Vorher-/Nachher-Werten.
Welche Plugin Version muss ich installieren?
Prüfe hier ob Deine aktuelle Ceres Version kompatibel ist und welche Version du installieren musst.
| Ceres Version |
Plugin Version |
| ab Version 5.0.23 |
Version 1.0.4 |
| ab Version 5.0.29 |
Version >= 1.0.5 |
Schritt 1: Registrierung beim CDN Dienst Sirv
>> Hier geht es zur Registrierung <<
Du kannst den Dienst Sirv 30 Tage lang kostenlos testen. Wenn du wenig Speicher brauchst oder wenig Traffic (Datenübertragung von Bildern) hast, kannst du Sirv sogar komplett kostenlos nutzen (allerdings ist das komfortable Auto-Fetch Feature dann nicht dabei und du musst die Bilder manuell hochladen).
Schritt 2: Konfiguriere dein neues CDN
Klicke oben links auf deinen Profilnamen und wähle “Manage your account”
Einstellungen im Bereich “Account”
- Im Bereich Account kannst du optional einen eigenen Accountnamen definieren. Dieser Name wird später auch in der CDN Domain auftauchen.
Einstellungen im Bereich “Content Delivery”
- Aktiviere das CDN (“Enable CDN”)
- Kopier dir die “SIRV DOMAIN” für später!
Auto-Fetch aktivieren und einrichten!
Aktiviere unbedingt die Auto-Fetch Funktion. Dadurch werden Bilder beim ersten Aufruf automatisch von deinem Ceres-Shop ins CDN von Sirv geladen und du musst dich um nichts mehr kümmern! Neue Bilder kannst du einfach in deinem Plenty-System hinterlegen. Eine Übertragung findet nur einmal statt, danach werden die Bilder von deinem Sirv CDN in optimierter Form ausgeliefert.
Als Basis-Pfad muss deine CDN Domain von Plentymarkets hinterlegt werden
So findest du deine CDN Domain in Plentymarkets
- Öffne einfach einen Artikel in deinem Plentymarkets-Backend
- Wechsel in das Tab-Bilder
- Kopier dir den ersten Teil der angezeigten URL - Aufbau: https://cdn0XY.plentymarkets.com/benutzerdefinierterKey
- Wenn du eine eigene CDN Domain in Plentymarkets hinterlegt hast, nimmst du den definierten Domain-Namen
Schritt 3: Lade deine Bilder über unser Tool hoch
Damit alle Bilder beim Start in deinem Shop verfügbar sind, musst du einmalig das CDN von sirv über unser Tool vorbereiten. Der Schritt ist nur am Anfang nötig. Neue Bilder werden in Zukunft automatisiert hochgeladen.
>> Hier geht es zum Upload-Tool + Anleitung <<
Beachte das beim Upload ein stündliches Limit von 2.000 Bildern gilt, allerdings wird dieses Limit sofort auf 6.000 erhöht, wenn man es überschreitet. Das neue Limit steht euch dann bis zu 24h zur Verfügung. Wenn ihr große Mengen an Bildern hochladen wollt, solltet ihr also innerhalb der 24h Frist handeln. Diese Ausnahme Regel könnt ihr alle 30 Tage nutzen. Zur besseren Übersicht, solltet ihr eure Datei in 6.000-er Pakete aufteilen. Ob und welche Limits aktuell greifen, seht ihr im Bereich „Usage“ eures Accounts. Ihr könnt ggf. auch ein höheres Limit anfragen.
Schritt 4: Richte das Plugin ein
- Öffne das SirvCDN Plugin
- Klicke auf Einstellungen
- Trage bei Basispfad - Plentymarkets CDN den Wert aus dem letzten Schritt ein (ohne https://)
- Trage bei Sirv CDN Domain den Wert aus deinem sirv Account ein (ohne https://)
- Aktiviere den webP Support für deine Artikeldetailseite und Kategorieseite
Optional: Parameter ändern
Die Standard-Einstellungen kannst du so lassen, wenn du ein normalen Ceres Shop ohne Anpassungen verwendest. Hierbei geht es lediglich um die verschiedenen Bildgrößen. Wenn du jedoch ein eigenes Theme hast oder andere Anforderungen, melde dich in unserem Support-Beitrag
Optional: Preloading aktivieren
Über die Plugin-Einstellung kann Preloading für das erste Artikelbild auf der Artikeldetailseite aktiviert werden.
Damit die Bilder nicht doppelt vorgeladen werden, muss die Preloading-Option im Shopbuilder Artikelbild-Widget deaktiviert werden.
FAQ
Wie viel Speicher brauche ich bei Sirv?
- Gehe in dein Plenty-System
- Klicke oben links auf das rote Plenty-Logo >> Hosting
- Wechsel links in den Bereich “Speicherverbrauch”
- Schaue dir die Spalte Website-Daten an und betrachte am besten den Vormonat
Anmerkung: In dieser Kennzahl stecken sicher jede Menge Daten-Typen. Bei unseren Tests wurde erheblich weniger Speicher bei Sirv gebraucht, als im Backend angegeben.
Wie viel Traffic habe ich im Monat?
- Gehe in dein Plenty-System
- Klicke oben links auf das rote Plenty-Logo >> Hosting
- Wechsel links in den Bereich “Traffic”
- Schaue dir die Spalte CDN-Traffic an und betrachte am besten den Vormonat
Anmerkung: Auch hier wird der Wert von Sirv deutlich drunterliegen, sodass ihr mit den Limits klar kommen solltet. Der Traffic sinkt zudem erheblich, weil die webP Bild-Dateien viel kleiner sind.
Agenturprofil ansehen
Das Upload Tool gibt es sogar noch 
+49 (0) 2974 77 999 99
