Einfachen Inhaltstyp mit Bild rechts vom Text
Eingetragen von Topf (18)am 28.11.2014 - 19:25 Uhr in
Hallo zusammen,
ich suche ein einfaches Modul (oder generell eine Lösung), welches mir ermöglicht, in einem einfachen Inhaltstyp ein Bild mit Text umfließen zu lassen, ohne WYSIWYG-Editor.
Ich möchte die Möglichkeit haben, den Inhaltstyp Kalenderereignis mit einem Bild verschönern zu können. Grundsätzlich ist das sehr einfach. Hab ein Feld "Bild" hinzugefügt. Schön daran ist schonmal, dass die Benutzung für den Nutzer wenig aufwändig ist, er muss nur den Text schreiben, das Datum ausfüllen und das Bild über Upload hochladen. Auch schön ist, dass der Ordner für diesen Upload eingestellt werden kann, sowie die Größe einheitlich ist, maximal-Dateigröße begrenzt werden kann, usw...
Was nicht schön ist, dass das Bild einfach so unter dem Text steht. Oder darüber (je nachdem wo ich das Feld hinschiebe). Ich möchte aber, dass das Bild schön rechts vom Text zu sehen ist, also umflossen wird. Das soll automatisch geschehen. Der Nutzer soll pro erstelltes Event ein Bild auswählen, und das wird automatisch schön an die richtige Stelle eingefügt. Ein rumfummeln im WYSIWYG-Editor kann ich leider nicht zumuten.
Ich verdeutliche das nochmal mit Screenshots (siehe Anhänge). Titel der Bilder sollten Aussagekräftig sein.
Ich habe nach einem Tag rumsuchen keine geeignete Lösung gefunden, dabei sollte es ja recht einfach sein. Ich bin mir auch nicht sicher, ob wirklich ein Modul notwendig ist, oder ob es nicht auch mit Bordmitteln zu lösen ist. Aber mit views ist es z.B. nicht so einfach.
Freue mich über Vorschläge und Ideen!
Viele Grüße
Topf
| Anhang | Größe |
|---|---|
| 01 erstellen_funktioniert_so.png | 57.14 KB |
| 02 aktuell_sieht_es_so_aus.png | 83.93 KB |
| 03 so_soll_es_aussehen_photoshop.png | 90.08 KB |
- Anmelden oder Registrieren um Kommentare zu schreiben
Es kommt ganz darauf an, wie
am 28.11.2014 - 22:05 Uhr
Es kommt ganz darauf an, wie flexibel du die Sache gestalten möchtest.
1. Szenario:
Es gibt immer einen Text und immer ein Bild und alle Bilder haben die gleiche Breite.
Es kann mehrere Zeilen geben, die immer einen Text und ein Bild enthalten.
Das ist ziemlich einfach mit field_collection oder paragaph und etwas css zu lösen.
2. Szenario:
Es gibt einen Text und manchmal dazu ein Bild.
Gibt es kein Bild, soll der Text den ganzen Raum ausfüllen.
Es kann auch hier mehrere "Zeilen", sprich Text-Bild Kombinationen geben .
Dann würde ich ein Ausgabetemplate für diesen Inhaltstyp anlegen, dort die Felder einlesen und in zwei verschachtelten Tabellen ausgeben, ungefähr so:
<table><tr>
<td>
<table>
<tr>
<td>Text</td>
<td>Bild (falls vorhanden)</td>
</tr>
</table>
</td>
</tr>
</table>
Gruß
Berthold
Also wenns nur ein Bild ist,
am 29.11.2014 - 00:39 Uhr
Also wenns nur ein Bild ist, dann musst Du nur das Bildfeld im Inhaltstyp bei der Anzeige (nicht bei der Felddefinition) an den Anfang schieben (vor den Text) und mit CSS rechts floaten lassen. Damit kommt der obere Rand des Bildes bündig mit dem Beginn des Textes.
Vielen Dank an
am 29.11.2014 - 15:07 Uhr
Vielen Dank für die schnellen Antworten.
@torfnase
Szenario 2 ist gewollt (nicht immer wird jemand ein Bild hochladen).
Meinst du damit, das mit einem View lösen? Oder wo erstelle ich ein Ausgabetemplate (google hat mir nicht wirklich weitergeholfen). Oder wo/wie erstelle ich ein Ausgabentemplate?
Den HTML-Code verstehe ich.
Zusätzlich soll das Kalender-Event auf der Startseite angezeigt werden, und der Nutzer soll auswählen können, ob dieses eine Event oben in Listen sein soll. Wüsste nicht wie ich das mit nem View mache.
@ leda.ch!
Klingt eigentlich logisch und einfach, aber wo stelle ich das CSS dann ein? Wenn ich das Bild-Feld bearbeite, kann ich nirgendwo CSS einfügen oder bearbeiten. Gibt es da einen Trick? Bzw. wo schreibe ich den floating-Code hin?
Nun, das Stichwort heisst
am 29.11.2014 - 15:51 Uhr
Nun, das Stichwort heisst (Sub)Theming: Falls Du ein Drupal-Standard-Theme verwendet, dann musst Du dazu ein Subtheme erstellen. In der dortigen .info Datei gibst Du dann Deine eigene CSS-Datei an, und dort fügst Du dann den CSS-Code ein (Ziel: die Datei sollte bei einem Update dann nicht überschrieben werden).
Mit Googlen oder hier findest Du Infos dazu.
Bei einem andern Theme, das Du z.B. von Drupal.org herunterladen kannst, gibt es manchmal schon ein vorgegebenes "leeres" Stylsheeet, fresh.css oder custom.css zu diesem Zweck.
In Deinem Beispiel hast Du ja dann das Bild vor dem Text. Im Firefox kannst Du dann mit dem Plugin Firebug inspizieren, wie das Bildelement heisst und dann in Deinem Stylesheet ansprechen, z.B. so:
.node .field-name-field-bild {float: right;
margin-left: 30px;
margin-bottom: 10px;
}
Dankeschön
am 29.11.2014 - 16:56 Uhr
Vielen Dank, leda. Das probiere ich auch gleich mal aus!
@torfnase
Hab mich nochmal ein bisschen schlaugemacht wegen Templates. Verstehe was du meintest. Habe es jetzt auch schon fast geschafft! Meinen Code habe ich jetzt so:
<table style="width: 100%"><tbody>
<tr>
<td style="width: 50%; vertical-align: top; text-align: left;">
<?php print render($content['field_event_date'])?>
<?php print render($content['field_ort'])?>
<?php print render($content['body'])?>
<?php print render($content['field_kategorie'])?>
</td>
<td style="width: 50%; vertical-align: top; text-align: right;">
<?php print render($content['field_event_bild'])?>
</td>
</tr>
</tbody>
</table>
Das sieht auch schon gut aus. Allerdings nur wenn ein Bild vorhanden ist. Wie mache ich da die zugehörige If-Abfrage?
Viele Grüße
Topf
laß mal die Breite der
am 29.11.2014 - 17:04 Uhr
laß mal die Breite der Tabelle (width=50%) weg, dann müßte es doch gehen oder ?
torfnase schrieb laß mal die
am 29.11.2014 - 17:49 Uhr
laß mal die Breite der Tabelle (width=50%) weg, dann müßte es doch gehen oder ?
Hatte ich schon versucht. Also dann so:
<table style="width: 100%"><tbody>
<tr>
<td style="vertical-align: top; text-align: left;">
<?php print render($content['field_event_date'])?>
<?php print render($content['field_ort'])?>
<?php print render($content['body'])?>
<?php print render($content['field_kategorie'])?>
</td>
<td style="vertical-align: top; text-align: right;">
<?php print render($content['field_event_bild'])?>
</td>
</tr>
</tbody>
</table>
Dann wird mein Bild miniklein. Ich weiß nicht warum. Hab bei dem Bild-Feld die Pixelzahl 480x480 eingestellt. Sieht dann so aus, wie im Anhang (einmal mit Bild und einmal ohne).
leda.ch schrieb .node
am 29.11.2014 - 18:03 Uhr
.node .field-name-field-bild {float: right;
margin-left: 30px;
margin-bottom: 10px;
}
Hab das auch nochmal mit dem subtheme probiert. Aber das haut nicht so ganz hin. Sieht jetzt folgendermaßen aus (siehe Bildanhang). Witzig ist, dass alles blau wird (sehr merkwürdig).
wenn du es so nicht
am 29.11.2014 - 18:48 Uhr
wenn du es so nicht hinbekommst, kannst du die zweite Tabellenspalte ja auch nur einblenden, wenn das Feld: $content['field_event_bild'] ungleich leer ist.
Und wenn du sie einblendest, gibst du ihr z.B. 50% Breite.
Das sollte doch in jedem Falle funktionieren.
torfnase schriebwenn du es
am 29.11.2014 - 19:17 Uhr
wenn du es so nicht hinbekommst, kannst du die zweite Tabellenspalte ja auch nur einblenden, wenn das Feld: $content['field_event_bild'] ungleich leer ist.
Und wenn du sie einblendest, gibst du ihr z.B. 50% Breite.
Das sollte doch in jedem Falle funktionieren.
Das meinte ich mit If-Abfrage. Aber die habe ich bisher nicht hinbekommen... Aber ich arbeite daran :-)
Edit:
Hat fast geklappt! Habe jetzt Fehlermeldungen an der Backe.
Wollte es so machen:
<?php if($content['field_event_bild'] == 0): ?><div>Keine Tabelle</div>
<?php else: ?>
<div>Tabelle</div>
<?php endif; ?>
Das dürfte doch keinen Fehler verursachen, oder?
Okay, war so nicht
am 29.11.2014 - 19:26 Uhr
Okay, war so nicht korrekt!
Jetzt klappts! Tausend Dank nochmal!
<?php if(!empty($content['field_event_bild'])): ?><table style="width: 100%">
<tbody>
<tr>
<td style="width: 50%; vertical-align: top; text-align: left; background-color: white;border:0px; padding: 0px;">
<?php print render($content['field_event_date'])?>
<?php print render($content['field_ort'])?>
<?php print render($content['body'])?>
<?php print render($content['field_kategorie'])?>
</td>
<td style="width: 50%; vertical-align: top; text-align: right; background-color: white;border:0px; padding: 10px;">
<?php print render($content['field_event_bild'])?>
</td>
</tr>
</tbody>
</table>
<?php else: ?>
<?php print render($content['field_event_date'])?>
<?php print render($content['field_ort'])?>
<?php print render($content['body'])?>
<?php print render($content['field_kategorie'])?>
<?php endif; ?>
Was ist der Vorteil an einem Sub-Theme? Gibt es da welche im Gegensatz zum Template?
Der Vorteil? Du musst dich
am 29.11.2014 - 22:25 Uhr
Der Vorteil? Du musst dich nicht mit Programmierung herumschlagen.... Ich sehe nicht, was bei im Bild Dir blau geworden ist, auch scheint mir das Bild zuweit hinaufgeschoben - ist es unmittelbar vor dem Textfeld? Und ob Du das richtige Element zum Floaten angesprochen hast, weiss ich auch nicht.
Es ist ja nicht falsch, das Problem mit einem Template und einer Table zu lösen, da hast Du wirklich was Tolles und Nützliches gelernt!
Persönlich bin ich davon abgekommen, Tables zu Designzwecken zu nutzen, wenn ich es mit CSS machen kann, vor allem auch deshalb, weil CSS im Kontext von responsive Design viel einfacher zu handhaben ist. UND ich kann testweise mit Firebug zusammen mit dem Kunden am Design rumspielen.
Das ist aber Geschmacksache und dem individuellen Anspruch überlassen.
Hm, aber ich fand das mit dem
am 30.11.2014 - 14:10 Uhr
Hm, aber ich fand das mit dem Subtheme viel schwieriger und es hat auch irgendwie mein Design zerschmissen. Das Design ist blau geworden, obwohl ich rot eingestellt hatte.
Das Bild ist unmittelbar vor dem Datumsfeld, schließlich soll es ja rechts von "Datum, Ort, Text" sein. Wenn ich es tiefer schiebe, also direkt vor das Textfeld, dann sieht das nicht gut aus. Müsste man im CSS ändern, oder?
Tatsächlich sieht meine Lösung auf dem Handy scheiße aus (dank der Hardgecodeten Tabelle). Darum werde ich wohl mich nochmal mit Subthemes beschäftigen.
Ich glaube, am Thema
am 30.11.2014 - 15:12 Uhr
Ich glaube, am Thema Subtheming kommt man bei Drupal nicht drumrum...
Wenn Dein Bild rechts vom Datum sein soll, ist's ja OK. Ein gefloatetes Objekt flutscht sozusagen an die Seite des nachfolgenden Objekt.