Suche eine etwas aussergewöhnliche Lösung und komme nicht weiter. Ich müsste ein Bild (via REX_MEDIA_BUTTON[1]) im Stylesheet (bzw. style tag im Modul) per Medienpool verwalten.
Der Aufbau ist folgendermaßen. Im Modul steht im Header:
<style type="text/css">
<!--
.rbbox { background: url(../bilder/testpic.jpg) no-repeat; }
-->
</style>
Das ".../textpic" möchte ich verwalten können!
Das Bild wird als Hintergrund benötig, da ich per css verschiedene Kantenformen eines Bildes generieren kann, obwohl nur ein viereckiges in den Medienpool geladen wird!
Ist dies überhaupt möglich?
gruß
gab
Hallo,
Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.
Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.
Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
- Markus.Staab
- Entwickler
- Beiträge: 9634
- Registriert: 29. Jan 2005, 15:50
- Wohnort: Aschaffenburg/Germany
- Kontaktdaten: ICQ Website
Ok, ich versuche, es genauer zu erklären. Ich kann ja ganz normal per REX_MEDIA_FILE Bilder in meinen Modulen verwenden, die dann irgendwie formatiert mit Text etc. in Kombination mit Templates auf der Website erscheinen.
Das Problem ist, dass ich für meine Zwecke eine CSS Definition habe, wo ich ein Bild in den Background eines per CSS definierten Boxen-Konstrukts legen muss. Somit erhalte ich z.B. runde Ecken, obwohl das Bild rechteckig in den Medienpool hochgeladen wird! Das ist meines Wissens der einzige Trick, runde Ecken hinzubekommen, ohne das Bild selbst manipulieren zu müssen. Dieses Background Bild möchte ich in meinen Artikeln ändern und verwalten können.
Falls immer noch nicht klar, paste ich mal den Source Code hier hin...
Gruß
gab
Das Problem ist, dass ich für meine Zwecke eine CSS Definition habe, wo ich ein Bild in den Background eines per CSS definierten Boxen-Konstrukts legen muss. Somit erhalte ich z.B. runde Ecken, obwohl das Bild rechteckig in den Medienpool hochgeladen wird! Das ist meines Wissens der einzige Trick, runde Ecken hinzubekommen, ohne das Bild selbst manipulieren zu müssen. Dieses Background Bild möchte ich in meinen Artikeln ändern und verwalten können.
Falls immer noch nicht klar, paste ich mal den Source Code hier hin...
Gruß
gab
-
- Beiträge: 230
- Registriert: 22. Sep 2004, 17:47
- Wohnort: Aschaffenburg
- Kontaktdaten: Website
wäre sowas nicht möglich? wenn ich es richtig verstanden habe.
Code: Alles auswählen
<?
echo "<div id=\"box\" style=\"float: right; padding: 4px 10px 5px 0; background: url(/files/FILE[1]) top right no-repeat\"></div>";
?>
Danke für den Lösungsansatz. Ich bekomme es leider so nicht hin. Vielleicht habe ich auch einen Denkfehler drin, bin nicht direkt der CSS-Profi. Aber das Konstrukt funktioniert einwandfrei mit folgendem Code. Ein im Stylesheet angegebenes Bild (background: url(../bilder/testbild.jpg) no-repeat;) wird mit runden "Ecken" dargestellt!
Hier ist der Code für die darzustellende Seite (der dann im Modul so umgebaut werden müsste, dass ein beliebig im Artikelmodul eingesetztes Bild genommen wird)
<html>
<head>
<link href="../styles/styles.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<p><div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent"></div>
<div class="rbbot"><div></div></div>
</div>
</p>
</body>
</html>
Und hier der code des stylesheets:
/* set background images for corners */
.rbroundbox { background: url(../bilder/testbild.jpg) no-repeat; }
.rbtop div { background: url(../bilder/rc_top_left.png) no-repeat top left; }
.rbtop { background: url(../bilder/rc_top_right.png) no-repeat top right; }
.rbbot div { background: url(../bilder/rc_bottom_left.png) no-repeat bottom left; }
.rbbot { background: url(../bilder/rc_bottom_right.png) no-repeat bottom right; }
/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 77px;
font-size: 1px;
}
.rbcontent { margin: 0 14px; }
.rbroundbox { width: 15em; margin: auto; }
Vielleicht hilft das ja weiter. Die "runden" Ecken werden durch die Überlagerung der jeweiligen Bilder "top_left", "top_right" etc. erzeugt.
Ich finde die Funktion an sich genial, da man sehr flexibel ist (wenn man feste BIldgrößen nimmt!). Der User lädt ein Bild in den Medienpool und es wird per CSS gesteuert, wie die Kanten etc. dargestellt werden.
Wäre toll, wenn dies irgendwie funktionieren würde.
Gruß
gab
Hier ist der Code für die darzustellende Seite (der dann im Modul so umgebaut werden müsste, dass ein beliebig im Artikelmodul eingesetztes Bild genommen wird)
<html>
<head>
<link href="../styles/styles.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<p><div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent"></div>
<div class="rbbot"><div></div></div>
</div>
</p>
</body>
</html>
Und hier der code des stylesheets:
/* set background images for corners */
.rbroundbox { background: url(../bilder/testbild.jpg) no-repeat; }
.rbtop div { background: url(../bilder/rc_top_left.png) no-repeat top left; }
.rbtop { background: url(../bilder/rc_top_right.png) no-repeat top right; }
.rbbot div { background: url(../bilder/rc_bottom_left.png) no-repeat bottom left; }
.rbbot { background: url(../bilder/rc_bottom_right.png) no-repeat bottom right; }
/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 77px;
font-size: 1px;
}
.rbcontent { margin: 0 14px; }
.rbroundbox { width: 15em; margin: auto; }
Vielleicht hilft das ja weiter. Die "runden" Ecken werden durch die Überlagerung der jeweiligen Bilder "top_left", "top_right" etc. erzeugt.
Ich finde die Funktion an sich genial, da man sehr flexibel ist (wenn man feste BIldgrößen nimmt!). Der User lädt ein Bild in den Medienpool und es wird per CSS gesteuert, wie die Kanten etc. dargestellt werden.
Wäre toll, wenn dies irgendwie funktionieren würde.
Gruß
gab
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
Nein, leider nicht, Bilder des Medienpools liegen in /files!
Wenn ich das richtig verstanden habe, muss ich den code von "Goldfisch" in die Ausgabe des Moduls einsetzen? Aber wie und wo muss ich Veränderungen vornehmen, damit es funktioniert? Wie gesagt läuft es ja ohne Einbindung in Redaxo wunderbar. Nur kann ich dann keine Bilder per Artikelmodul austauschen.
Nochmal die Beschreibung, wie es bereits funktioniert:
Der Code auf einer beliebigen HTML-Seite
<p><div class="rbroundbox"> = ruft das Background-Bild aus dem im CSS definierten Pfad auf.
Dazugehörige Angabe im CSS:
.rbroundbox { background: url(../bilder/rc_background3.jpg ) no-repeat; }
und folgendes platziert in einer beliebigen HTML-Seite die im CSS definierten Eckbilder über dem im CSS definierten Background-Bild!
<div class="rbtop"><div></div></div>
<div class="rbcontent"></div>
<div class="rbbot"><div></div></div>
</div>
Die Eckbilder sind lediglich kleine Quadrate mit einem transarenten Bereich (der sich dann über dem Background-Bild befindet) und der Abrundung in der Farbe des Seitenhintergrundes.
Gruß
gab
Wenn ich das richtig verstanden habe, muss ich den code von "Goldfisch" in die Ausgabe des Moduls einsetzen? Aber wie und wo muss ich Veränderungen vornehmen, damit es funktioniert? Wie gesagt läuft es ja ohne Einbindung in Redaxo wunderbar. Nur kann ich dann keine Bilder per Artikelmodul austauschen.
Nochmal die Beschreibung, wie es bereits funktioniert:
Der Code auf einer beliebigen HTML-Seite
<p><div class="rbroundbox"> = ruft das Background-Bild aus dem im CSS definierten Pfad auf.
Dazugehörige Angabe im CSS:
.rbroundbox { background: url(../bilder/rc_background3.jpg ) no-repeat; }
und folgendes platziert in einer beliebigen HTML-Seite die im CSS definierten Eckbilder über dem im CSS definierten Background-Bild!
<div class="rbtop"><div></div></div>
<div class="rbcontent"></div>
<div class="rbbot"><div></div></div>
</div>
Die Eckbilder sind lediglich kleine Quadrate mit einem transarenten Bereich (der sich dann über dem Background-Bild befindet) und der Abrundung in der Farbe des Seitenhintergrundes.
Gruß
gab
-
- Beiträge: 230
- Registriert: 22. Sep 2004, 17:47
- Wohnort: Aschaffenburg
- Kontaktdaten: Website
du kannst nur bei der ausgabe, also an der stelle im dokument, an der das modul eingesetzt wird, den wert aus FILE[1] holen und dort einsetzen. also es geht auch im template, aber es macht keinen unterschied.
die betreffenden styles in einem extern dokument zu definieren, macht hier wenig sinn, da sie dort nicht mehr veränderbar sind.
hier schon. nur muss du die angaben direkt an ort und stelle angeben.
dann kannst du sie auch manipulieren.
ausgabe des moduls:
ich hab den exakten syntax jetzt nicht ausprobiert, sollte aber gehen.
wenn du einen link hast, wo du das setup hast, dann könnte man sich daten mal kopieren und es probieren.
die betreffenden styles in einem extern dokument zu definieren, macht hier wenig sinn, da sie dort nicht mehr veränderbar sind.
hier schon. nur muss du die angaben direkt an ort und stelle angeben.
dann kannst du sie auch manipulieren.
ausgabe des moduls:
Code: Alles auswählen
<?
echo "
<p>
<div id=\"rbroundbox\" style=\"background: url(../files/FILE[1] ) no-repeat;\"></div>
";
?>
ich hab den exakten syntax jetzt nicht ausprobiert, sollte aber gehen.
wenn du einen link hast, wo du das setup hast, dann könnte man sich daten mal kopieren und es probieren.
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
- Markus.Staab
- Entwickler
- Beiträge: 9634
- Registriert: 29. Jan 2005, 15:50
- Wohnort: Aschaffenburg/Germany
- Kontaktdaten: ICQ Website
Die Eingabe habe ich nicht verändert. Ist ein Standard REX_MEDIA_BUTTON.
Beispielsweise so:
<b>Bild:</b>
REX_MEDIA_BUTTON[1]
<?
if ("FILE[1]" != "")
{
echo "<img src=$REX[HTDOCS_PATH]/files/FILE[1] width=155>";
}
?>
Die Ausgabe lautet:
<?
echo "<div class=\"rbroundbox\" style=\"width: 239px; heigth: 155px; margin: auto; background: url(files/FILE[1]) no-repeat\">";
echo "<div class=\"rbtop\"><div></div></div>";
echo "<div class=\"rbbot\" ><div></div></div></div>";
?>
...wobei im dazugehörigen stylesheet rbtop, rbbot etc. definiert werden müssen. Oder man schreibt es direkt in das Modul, wie man möchte. Die Höhenangabe bei "height and width details" muss man an die Bildhöhe anpassen. Das ist ein relativer Wert, so ganz genau habe ich keine Richtlinie, welcher Bildhöhe (px) ein entsprechender exakter Wert entspricht.
CSS:
/* Hintergrundbilder für Ecken */
.rbtop div {
background: url(//top_left.png) no-repeat top left;
}
.rbtop {
background: url(/top_right.png) no-repeat top right;
}
.rbbot div {
background: url(/bottom_left.png) no-repeat bottom left;
}
.rbbot {
background: url(/bottom_right.png) no-repeat bottom right;
}
/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 103em;
font-size: 1px;
}
Gruß
gab
Beispielsweise so:
<b>Bild:</b>
REX_MEDIA_BUTTON[1]
<?
if ("FILE[1]" != "")
{
echo "<img src=$REX[HTDOCS_PATH]/files/FILE[1] width=155>";
}
?>
Die Ausgabe lautet:
<?
echo "<div class=\"rbroundbox\" style=\"width: 239px; heigth: 155px; margin: auto; background: url(files/FILE[1]) no-repeat\">";
echo "<div class=\"rbtop\"><div></div></div>";
echo "<div class=\"rbbot\" ><div></div></div></div>";
?>
...wobei im dazugehörigen stylesheet rbtop, rbbot etc. definiert werden müssen. Oder man schreibt es direkt in das Modul, wie man möchte. Die Höhenangabe bei "height and width details" muss man an die Bildhöhe anpassen. Das ist ein relativer Wert, so ganz genau habe ich keine Richtlinie, welcher Bildhöhe (px) ein entsprechender exakter Wert entspricht.
CSS:
/* Hintergrundbilder für Ecken */
.rbtop div {
background: url(//top_left.png) no-repeat top left;
}
.rbtop {
background: url(/top_right.png) no-repeat top right;
}
.rbbot div {
background: url(/bottom_left.png) no-repeat bottom left;
}
.rbbot {
background: url(/bottom_right.png) no-repeat bottom right;
}
/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 103em;
font-size: 1px;
}
Gruß
gab
- Markus.Staab
- Entwickler
- Beiträge: 9634
- Registriert: 29. Jan 2005, 15:50
- Wohnort: Aschaffenburg/Germany
- Kontaktdaten: ICQ Website
Hi,
habe noch eine Anmerkung zu den "runden" Ecken. Ich hatte das zuerst mit PNGs versucht, aber nicht berücksichtigt, dass der Internet Explorer keine PNGs mit Transparenz anzeigen kann. Also müsste man gifs nehmen. Leider habe ich das mit der Qualität bei den gifs nicht so hinbekommen, sodass die Rundungen gerastert waren etc.
Habe auch mit der IE-spezifischen Filter Funktion experimentiert, mit deren Alpha() Funktion man Vordergrundelemente und Hintergrundelemente ineinander verschmelzen lassen kann - ging auch nicht so wie ich wollte.
IE 7 soll angeblich PNGs voll unterstützen. Aber funktioniert vom Prinzip her schon, nur im Moment habe ich das erstmal auf Eis gelegt.
Gruß
gab
habe noch eine Anmerkung zu den "runden" Ecken. Ich hatte das zuerst mit PNGs versucht, aber nicht berücksichtigt, dass der Internet Explorer keine PNGs mit Transparenz anzeigen kann. Also müsste man gifs nehmen. Leider habe ich das mit der Qualität bei den gifs nicht so hinbekommen, sodass die Rundungen gerastert waren etc.
Habe auch mit der IE-spezifischen Filter Funktion experimentiert, mit deren Alpha() Funktion man Vordergrundelemente und Hintergrundelemente ineinander verschmelzen lassen kann - ging auch nicht so wie ich wollte.
IE 7 soll angeblich PNGs voll unterstützen. Aber funktioniert vom Prinzip her schon, nur im Moment habe ich das erstmal auf Eis gelegt.
Gruß
gab
-
- Beiträge: 230
- Registriert: 22. Sep 2004, 17:47
- Wohnort: Aschaffenburg
- Kontaktdaten: Website
den typ kann ich zwar nicht ab, aber die seite von jamie oliver finde ich sehr gut gemacht.
wenn ich mich richtig erinnere, hab ich bei durchlesen des css files gesehen, dass die abgerundeten ecken der verschiedenen boxen ohne grafiken gemacht sind.
schau doch mal dort rein.
http://www.jamieoliver.net/
der xml mob blog über das handy ist auch bemerkenswert.
wenn ich mich richtig erinnere, hab ich bei durchlesen des css files gesehen, dass die abgerundeten ecken der verschiedenen boxen ohne grafiken gemacht sind.
schau doch mal dort rein.
http://www.jamieoliver.net/
der xml mob blog über das handy ist auch bemerkenswert.