Sliderbild mit CSS beeinflussen

[Brubbel]

Hi Tim,

ich möchte erreichen, dass die Sliderbilder ein immer gleiches Farboverlay erhalten. Der Kunde möchte die Bilder vor dem Einstellen nicht noch überarbeiten müssen. Lösen tue ich dass so, dass ich der background-image Anweisung einen Gradientenverlauf mitgebe:

background-image: linear-gradient(rgba(103, 165, 113, 0.35), rgba(103, 165, 113, 0.35)), url("/files/img/dummy/hintergrundbild.jpg");

Das funktioniert soweit super, wenn ich im Template an die Stelle rankomme, wo das Bild eingebunden wird.

Beim Revolution-Slider finde ich diese Stelle leider nicht so einfach in den gegebenen Templates vor. Ich habe schon versucht es auf die Schnelle zur Laufzeit mit jQuery einfach zu ersetzen aber dann hat man natürlich je nach Clientgeschwindigkeit eine leichte Verzögerung drin, bevor sich der Schleier über das Bild legt ... Das taugt so nix.

Hast Du einen Tipp, wie man die obige Style-Anweisung ins Template bekommt?
Danke Dir!!

[Tim]

Setz das additiv setzen auf background {} gestylt, nicht auf background-image.

---
revoslider_default baut das Grundgerüst. In einer foreach die Slides per <li> Dort kommt je Slide die aufgearbeiteten Attribute rein.

Ein animatiertes Bild durchläuft ce_revolutionslider_image

[Brubbel]

Ich weiß nicht wie ich das additiv setzen könnte? Dieser Überlagerungstrick funktioniert ja nur, wenn man 2 "Bilder" in der background-image Anweisung angibt. Ich hatte es nicht hinbekommen, dass per CSS zu "addieren". Wie müsste ich das machen?

Die Stelle wo das Grundgerüst mit den verschiedenen Slides gebaut wird, hatte ich gefunden ... aber ICH kann daraus nicht erkennen, wie ich dann einen Inhalt von $content modifizieren kann? Ich dachte immer das Template ce_revolutionslider_image kümmert sich dann um Bilder die innerhalb des Sliders noch eingesetzt werden?

Schau, ich müsste ja hier eingreifen:



... und dafür sehe ich leider nirgendwo einen Hebel.

Aber wenn Du mir vielleicht zeigen könntest, wie ich den 2ten Bildteil im CSS addieren kann? Dann müsste ich hier in den Templates keinen Aufwand betreiben.

[Tim]

Background-image erlaubt doch keine zwei Bilder. Oder sehe ich das falsch?

Slide-Hintergrundbilder werden im System verarbeitet. Es steht dann im Array 'attributes' je Slide.

[Brubbel]

Doch, das geht wunderbar mit mehreren Bildern, stapeln sich dann wie früher auf dem Overhead-Projektor ;-). (https://developer.mozilla.org/de/doc...ckground-image oder https://www.w3schools.com/cssref/pr_...ound-image.asp)

Mit background-color kann man ja dafür nichts anfangen ... die liegt leider ganz unten ...

Array 'attributes' ... Phew ... das muss ich aber erst mal schauen ob ich da ran komme ...

[Tim]

Cool, wusste ich selbst nicht.

Klappt auch mit reinem background {}
https://www.w3schools.com/css/css3_backgrounds.asp

Damit kannst du dann doch deine zusätzlichen Bilder aufschalten, oder. Das ursprüngliche durch den Slider selbst ist via background-image, deine weiteren additiv über CSS mit background {}.

Mit jquery kommst du auch an das background-image ran. Das ist im jQuery('...SLIDE...').css('background-image');

[Brubbel]

Das mit jQuery hatte ich oben schon drüber geschrieben ... das hatte ich natürlich auch schon erwogen aber dadurch, dass da ja der Client erst ran muss, entsteht eine klitzekleine Zeitverzögerung, die dann ... bescheiden aussieht.

Du erwähnst immer additiv ... kannst Du mir das erklären was du meinst? Ich kriege es nicht hin. Wenn man es einfach versucht über Background hinzuzufügen, dann muss ich das ja mit important gewichten und zerstöre so die Werte die vom Elemnt selbst kommen:

[Tim]

Vielleicht dann ein inherit für background-image.

.tp-bgimage.defaultimg {background: ...; background-image:inherit;}

An das Bild kommst du im revoslider Template auch über die ID des Slides und ein Model (oder DB Abfrage). Du kannst ja den Slide-Datensatz abfragen. Damit kommst du auch an den Pfad.

[COLOR=#333333][SIZE=11px][COLOR=#878787]<?php[/COLOR] [COLOR=#0045aa]foreach[/COLOR][COLOR=#000000]([/COLOR][COLOR=#8735a5]$this[/COLOR][COLOR=#000000]->slides[/COLOR] [COLOR=#000000]as[/COLOR] [COLOR=#8735a5]$slide[/COLOR][COLOR=#000000])[/COLOR]: [COLOR=#878787]?[/COLOR][COLOR=#878787]>[/COLOR]
[COLOR=#878787]<?php[/COLOR]
[COLOR=#8735a5]$objSlide[/COLOR] [COLOR=#000000]=[/COLOR] \RevolutionSlider\Models\Slides[COLOR=#000000]::[/COLOR][COLOR=#3f6e7d]findByPk[/COLOR]([COLOR=#8735a5]$slide[/COLOR][[COLOR=#dd2400]'id'[/COLOR]]);
[COLOR=#8735a5]$imagePath[/COLOR] [COLOR=#000000]=[/COLOR] Controller[COLOR=#000000]::[/COLOR][COLOR=#3f6e7d]getImage[/COLOR]( FilesModel[COLOR=#000000]::[/COLOR][COLOR=#3f6e7d]findByPk[/COLOR]([COLOR=#8735a5]$objSlide[/COLOR][COLOR=#000000]->singleSRC[/COLOR])[COLOR=#000000]->path[/COLOR],[COLOR=#8735a5]$size[/COLOR][[COLOR=#007ab7]0[/COLOR]],[COLOR=#8735a5]$size[/COLOR][[COLOR=#007ab7]1[/COLOR]],[COLOR=#8735a5]$size[/COLOR][[COLOR=#007ab7]2[/COLOR]]);
[COLOR=#0045aa]echo[/COLOR] [COLOR=#8735a5]$imagePath;[/COLOR]
[COLOR=#878787]?[/COLOR][COLOR=#878787]>[/COLOR][/SIZE][/COLOR]