Glitzer über den Karten

Hallo zusammen,

ich stehe vor einem Problem und mir fällt dazu nicht wirklich eine Lösung ein.
Wir vertreiben Einzelkarten eines Trading Card Games.

Bei den Karten gibt es sogenannt Foil Karten die glitzern.

Zur Zeit ist es so das wir dieses nur in der Kurzbeschreibung und rechts in der Leiste darstellen.
https://www.tappzeit.de/de/resurgent-belief.html

Habt ihr eine Idee wie man bei gewissen Produkten im Bild einen glitzernen Schimmer drüber legen kann?

Ich habe an sowas gedacht:
https://stackoverflow.com/questions/68216941/make-css-shimmer-effect-work-an-already-loaded-image

Allerdings weis ich noch nicht wie ich nur gewisse Artikel ansprechen soll.

 

Den Code von Stackoverflow kannst du so verwenden wie er da steht.



Falls du nicht weiß wie, könnte ich dir u.U. helfen.
Wenn nur eine Gruppe von Bildern diesen Effekt haben soll, müssen diese Bilder eine Klasse bekommen.

Code:

class="Bilder_mit_diesem_effekt"

Im StyleEdit kann man, wenn man Bilder anlegt, immer auch eine Klasse zuweisen.
Das ist bei "Bildeigenschaft - Allgemein - Klassen".
Danach kann man diesen Code im "StyleEdit - oben - die drei Punkte - SCSS/CSS bearbeiten" einfügen und ersetzt im Code von Stackoverflow das "shimmer" mit dem Klassennamen den man vergeben hat ODER man gibt den betreffenden Bildern den Klassennamen "shimmer". Dann muss man am Code von Stackoverflow gar nichts ändern.
Kein großer Akt wenn es nicht Hunderte Bilder sind.
Der Effekt lässt sich natürlich noch verbessern.
Falls es Poduktbilder sind, haben diese Bilder auch immer eine Klasse zugewiesen bekommen.
Bei Gambio (denk ich) ist das die Klasse: ".img-responsive". Diese Klasse bekommen alle Produktbilder im Shop.
Wenn es die Bilder in der Übersicht einer Kategorie sind, muss man sich an den Klassen der Elemente "hochhangeln". Das sollten dann die Klassen: ".productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image .product-image img" sein. (sowas in der Art)
Das Bild das du oben verlinkt hast hat die Klassen: ".product-info-image .product-info-image-inside .swiper-slide .swiper-slide-inside img". So genau kann ich dass jetzt nicht sagen welches Bild welche Klasse hat aber dafür gibt es in allen Browsern die DevTools.
Solltest du nicht weiter kommen, schreib mir einfach eine PN.

 

Das Problem ist das ich ca. 57000 Karten im Shop mittels Import hochgeladen habe inklusive den passenden Bildern. Diese Bilder haben eine gewisse Zeichenfolge Beispiel so 1da4d4f3-b3cb-4b61-81b8-06ae441c41bf.jpg

Nun ist es so das alle Bilder die auch Foil Karten sind unter dem Menüpunkt Einzelkarten gelistet sind. Du schreibst das man mittels StyleEdit den Bilder eine Klasse mitgeben könnte. Das ist aber ja mein Problem. Es handelt sich ja um Produkte und keine einzelnen Bilder über den StyleEdit.

Ich glaube das wird nun auch der Knackpunkt sein. Oder hast du noch eine Idee?

 

Eine Glitzerabbildung in der Beschreibung?

 

Liegen die Karten, die diesen Effekt bekommen sollen, verstreut im ganzen Shop oder gibt es eine gewisse Struktur bei diesen "besonderen" Karten? (liegen die Karten evtl. in einer eigenen Kategorie?)

 

Sie liegen alle unter Einzelkarten und haben als Zusatzfeld "Foil" eingetragen.

https://www.tappzeit.de/de/einzelka...ter_url=de/einzelkarten/&language=de&cPath=27

das sind aber bei weiten noch nicht alle. Ich habe noch tausende solcher Karten.
Man könnte natürlich überlegen eine unter Rubrik zu machen allerdings finde ich es über Filter besser.

Ich bekomme im Moment nichtmal das Shimmern mit einem Bild im StyleEdit hin ^^

 

Okay, du bist also sehr unerfahren mit css/html. Das macht es nicht gerade leicht.
Ich denke nicht dass man da ohne javascript weiter kommt. Diese Funktion z.B gibt mir alle Bilder in der aktuell geladenen Seite/Kategorie zurück.

Code:

(function(){
    let images = [];
    $("body img").each(function(){
      images.push($(this).attr('src'))
    })
    console.log(images);
  })()

Code:

(18) ['https://www.tappzeit.de/images/logos/logo_tappzeit.png', 'images/product_images/info_images/3c1baaa2-bd0b-4627-b93a-0753e0acd0f2.jpg', 'images/icons/status/green.png', 'images/icons/status/green.png', 'images/product_images/info_images/5edfb119-abc9-4d4d-bc46-33cce1a0922d.jpg', 'images/icons/status/green.png', 'images/icons/status/green.png', 'images/product_images/info_images/26d40e03-6de4-4373-9fbf-04c1dd79e995.jpg', 'images/icons/status/green.png', 'images/icons/status/green.png', 'images/product_images/info_images/a2c56479-4bee-4edb-80d7-4af010b7c793.jpg', 'images/icons/status/green.png', 'images/icons/status/green.png', 'images/product_images/thumbnail_images/carpet_gb.JPG', 'images/product_images/thumbnail_images/a0e60c9e-0b9c-4daa-8a61-52111e03f49f.jpg', 'images/dhl.png', 'images/hermesprops (1).png', 'https://www.it-recht-kanzlei.de/logo/AGB-Logo.png?i=3bf05-22687-39ca-9080-1']
0: "https://www.tappzeit.de/images/logos/logo_tappzeit.png"
1: "images/product_images/info_images/3c1baaa2-bd0b-4627-b93a-0753e0acd0f2.jpg"
2: "images/icons/status/green.png"
3: "images/icons/status/green.png"
4: "images/product_images/info_images/5edfb119-abc9-4d4d-bc46-33cce1a0922d.jpg"
5: "images/icons/status/green.png"
6: "images/icons/status/green.png"
7: "images/product_images/info_images/26d40e03-6de4-4373-9fbf-04c1dd79e995.jpg"
8: "images/icons/status/green.png"
9: "images/icons/status/green.png"
10: "images/product_images/info_images/a2c56479-4bee-4edb-80d7-4af010b7c793.jpg"
11: "images/icons/status/green.png"
12: "images/icons/status/green.png"
13: "images/product_images/thumbnail_images/carpet_gb.JPG"
14: "images/product_images/thumbnail_images/a0e60c9e-0b9c-4daa-8a61-52111e03f49f.jpg"
15: "images/dhl.png"
16: "images/hermesprops (1).png"
17: "https://www.it-recht-kanzlei.de/logo/AGB-Logo.png?i=3bf05-22687-39ca-9080-1"

Das ist zwar noch keine Lösung aber ich würde eher aus der Richtung ran gehen.
Ich bin mir sicher dass einer in Gambio-Crew eine Lösung dafür hat.
Man müsste jetzt quasi einen Filter schreiben der alle Bilder mit einer bestimmten Zeichenfolge auswählt und dann den Style darauf anwendet.

p.s
Das Bild aus deinem Link oben hat dieses html:

Code:

<img class="img-responsive" src="images/product_images/info_images/a0e60c9e-0b9c-4daa-8a61-52111e03f49f.jpg" alt="Resurgent Belief" title="Resurgent Belief" data-magnifier-src="images/product_images/original_images/a0e60c9e-0b9c-4daa-8a61-52111e03f49f.jpg">

 

Habe dir mal eine PN geschrieben. Bzgl. unerfahren geht eigentlich. Der Schnipsel ist ja quasi schon fertig und das einbetten ist auch kein Problem. Klasse zum Bild habe ich ebenfalls zugewiesen nur der Schimmer will noch nicht

Ja wäre cool wenn einer der Gambio Crew eine Idee hätte
Ansonsten baue ich wie schon bei Kartenzustand und Rarität es in den Artikelzuständen ein. Ist zwar eher uncool aber wäre eine Möglichkeit

 

So das mit dem Shimmer habe ich hinbekommen. Gibt es einen von Gambio hier der mir sagen kann wie ich die einzelen Klassen der Produkte ansprechen kann? Das wäre super nett

 

Man könnte die betreffenden Bilder mit einem CSS-Selector auswählen und den Style anpassen:

Code:

img[src*="/wo/die/Bilder/gespeichert/sind"] { style: diesen Schimmereffekt;}

oder:

Code:

[attribute]    [target]    Selects all elements with a target attribute
[attribute=value]    [target=_blank]    Selects all elements with target="_blank"
[attribute~=value]    [title~=flower]    Selects all elements with a title attribute containing the word "flower"
[attribute|=value]    [lang|=en]    Selects all elements with a lang attribute value equal to "en" or starting with "en-"
[attribute^=value]    a[href^="https"]    Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]    a[href$=".pdf"]    Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]    a[href*="w3schools"]    Selects every <a> element whose href attribute value contains the substring "w3schools"

Haben denn die Bilder irgendeine Angabe (außer bei der Beschreibung (Foil)) mit der man evtl. selektieren könnte?

 

Ja ein Filter "Foil" wird ebenfalls mitgegeben.

 

Evtl. könnte man über den Alt-Attributswert gehen nach dem Schema endet auf "(Foil)":

Code:

img[alt$="(Foil)"] {
  // Glitzereffekt
}

 

Ha! Der Dominik ist halt gut
Wenn jetzt alle Foil-Bilder (Foil) im alt= haben, sollte es klappen

 

Ich habe nun folgendes CSS hinzugeügt.

Code:

img[alt$="Foil"]{
color: grey;
display:inline-block;
-webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
background-repeat: no-repeat;
animation: shimmer 2.5s infinite;
font-size: 50px;
max-width:200px;
}

@keyframes img[alt$="Foil"] {
100% {-webkit-mask-position:left}
} 

Im Artikel habe ich das ALT Attribut und den Namen mit Foil gefüllt. Leider will es trotzdem nicht funktionieren.

Auch wenn ich die " wegnehme funktioniert es nicht

Code:

img[alt$=Foil]{
color: grey;
display:inline-block;
-webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
background-repeat: no-repeat;
animation: shimmer 2.5s infinite;
font-size: 50px;
max-width:200px;
}

@keyframes img[alt$=Foil)] {
100% {-webkit-mask-position:left}
}

 

exakt der selbe Style funktionier außerhalb von Gambio tadellos.
Gambio wirft bei:

Code:

-webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;

einen Fehler und

Code:

@keyframes img[alt$=Foil)] {
100% {-webkit-mask-position:left}
}

wird im Stylesheet garnicht erst angelegt.

 

Naja, da ist so manches durcheinander geraten. Zum Beispiel sind die runden Klammern gegenüber meinem Code verschwunden und den Animationsnamen an einer Stelle durch einen Selektor zu ersetzen, kann nicht funktionieren.

Aber scheinbar werden - zumindest in 4.4.0.4 - die 4stelligen Hexcodes im eigenen CSS zerstört. Damit stehen die Chancen m.E. besser:

Code:

img[alt$="(Foil)"]{
    color:grey;
    display:inline-block;
    mask:linear-gradient(-60deg,#000 30%,rgba(0,0,0,.5),#000 70%) right/300% 100%;
    -webkit-mask:linear-gradient(-60deg,#000 30%,rgba(0,0,0,.5),#000 70%) right/300% 100%;
    background-repeat:no-repeat;
    animation:shimmer 2.5s infinite
}
@keyframes shimmer{
    100%{mask-position:left;-webkit-mask-position:left}
}

 

Wenn ich die erste Zeile ändere, dann läuft es bei mir. Also Dollarzeichen raus.

Code:

img[alt="Foil"]

Beispiele:
(Link nur für registrierte Nutzer sichtbar.)
(Link nur für registrierte Nutzer sichtbar.)

 

Also in der Übersicht läuft es nun einwandfrei.
https://www.tappzeit.de/de/einzelka...ter_url=de/einzelkarten/&language=de&cPath=27

Aber es ist manchmal so das die Shimmereffekt in der Detailansicht des Artikels nicht funktioniert. Woran könnte das noch liegen?

 

Code:

@keyframes img[alt$=Foil)] {
100% {-webkit-mask-position:left}
}

ja, da sollte der Animationsnamen rein...

 

War das vielleicht ein Cache-Problem? Ich kann das Schimmern auf allen Ansichten problemlos erkennen.