[cssspritegen] CSS-Sprite-Generator direkt in Contao

[tl_richard_user]

Habe soeben eine Beta meiner Erweiterung [cssspritegen] hochgeladen.
Ich habe gleich, ganz zukunftsschauend , für Contao 3 programmiert.

Die Einstellungen für die Erweiterungen werden in den Theme-Einstellungen vorgenommen. Dort bestimmt man v.a. den Pfad für die Quelldateien und die Ausgangsdatei sowie die Anordnung der einzelnen Bilder im zusammengefassten Bilder.

Erweiterungskatalog:

http://contao.org/de/extension-list/...itegen.de.html

github:

https://github.com/richardhj/contao_cssspritegen

Momentan überlege ich noch, ob es noch sinnvoll ist, zusätzlich das erstellte Stylesheet im Frontend einzubinden.

Mit Bitte um Feedback
Richard

[CarlosBrasil]

Da Google Page Speed meckert, dass ich meine Grafiken in Sprites umwandeln soll, habe ich unter Contao 3.1.1 cssspritegen installiert. Funktioniert so weit auch alles. Nur leider bin ich zu dumm, die vorhandenen Grafiken durch die generierten Sprites zu ersetzen.

Ich habe die erstellte Grafik als Hintergrundgrafik in die Zelle einer Tabelle eingebunden. Ins Layout die erstellte css Datei.

Manchmal wird das erste Sprite und ein Teil des zweiten Sprites angezeigt, manchmal auch mehrere Sprites und manchmal auch gar nichts. Der Zelle habe ich unter CSS-Klasse den Namen aus der CSS sprite generator CSS gegeben.

also zum Beispiel
.fotografie{
background: url(files/blog/sprite.png) no-repeat;
background-position: -0px 0px;
width: 16px;
height: 16px;

CSS-Klasse : fotografie

Was mache ich falsch?

Gruß Carlos

[CarlosBrasil]

Habe es inzwischen selbst geschafft, wenn ich bei Anordnung der Bilder anstatt 0, 1 auswähle klappt es


Zu früh gefreut, im System-Log bekomme ich nachfolgende Fehlermeldung:
No active page for page ID "assets", host "..." and languages "de, de-DE, pt-BR, pt, en, en-US" (.../de/assets/css/files/blog/sprites/sprite.png)

[tl_richard_user]

Ich habe gerade mal im Internet nach einem Beispiel geguckt, wie man Sprite-Grafiken am besten verwendet:
http://webstandard.kulando.de/post/2...sts-verringern
Dort siehst du, dass das Hintergrund ".flags" zugeordnet ist und das du dann den einzelnen Flaggen mit "#de", "#fr"... die Hintergrundverschiebung festlegen musst.
Die Selektoren, die dir im generierten Stylesheet gegeben werden, sind so nur als Vorlage verwendbar.

[Spooky]

Zu früh gefreut, im System-Log bekomme ich nachfolgende Fehlermeldung:
No active page for page ID "assets", host "..." and languages "de, de-DE, pt-BR, pt, en, en-US" (.../de/assets/css/files/blog/sprites/sprite.png)

->

.fotografie{
    background: url(files/blog/sprite.png) no-repeat;
    background-position: -0px 0px;
    width: 16px;
    height: 16px;
} 

Wo genau befindet sich diese CSS Definition? In einem File oder direkt im Theme? Wenn es sich in einem CSS file befindet, dann musst du die URLs relativ zum CSS file angeben (in Contao 3.1).

[CarlosBrasil]

Es lag tatsächlich an den Pfaden. Nachdem ich diese von Hand angepasst hatte, war die Fehlermeldung im Log verschwunden. Bedanken möchte ich mich bei tl_richard_user und Spooky für ihre Hilfe.

Carlos

[tl_richard_user]

In der neuen Version 1.0.0 können jetzt die CSS-Selektoren im Backend modifiziert werden:



Das .assets.css, das zusätzlich generiert wird, kann direkt im Layout eingebunden werden.