Artikel Element außerhalb von .mod_article

**Slind** · 06.01.2013, 12:32

Tag zusammen,

gibt es eine Erweiterung für Contao die es mir erlaubt Artikel Elemente außerhalb des Artikel Blocks (class mod_article) ein zu fügen.
Bzw. beim Elementtyp Text, die Funktion Bild. Das das Bild sich quasi außerhalb des Artikel Blocks befindet, damit ich ihm die volle Webseitenbreite zuweisen kann während der Content nen padding für ne Sidebar besitzt. Sidebar fängt dann unterhalb des Bildes an, sofern Bild vorhanden.

**Slind** · 07.01.2013, 20:18

keiner ne Ahnung, oder ne Idee wie ich das möglichst sauber selber in Contao ändern könnte?

**melzebub** · 07.01.2013, 22:59

kannst du nicht mit position absolute arbeiten? dann dem elternelement des artikels ein relative verpassen und dem bildcontainer das absolute. dann bist du nicht mehr "gefangen"

**Slind** · 08.01.2013, 13:08

vielen Dank.

jetzt steht mod_article auf relative und hat ne padding
ce_text hat keine css styles mehr
und der image_container steht auf absolute

jetzt ist nur noch die Frage wie ich es schaffe das ce_text, unter dem Bild anfängt und nicht dahinter, genauso wie die Sidebar. Denn die Bildhöhe kann variieren.

**melzebub** · 08.01.2013, 16:44

z-index setzen und so die z-achse bestimmen

Gruß

**Slind** · 08.01.2013, 17:13

was hat die z Achse mit der Größe eines Bildes zu tun? und der Position anderer Elemente?

dadurch das ich ja absolut verwenden muss, wird das Element aus dem Fluss genommen und alles rutscht nach oben. wie kann ich das ohne eine feste Höhe in den Griff bekommen und wie regel ich das vor allem mit der Sidebar die ein paar Ebenen weiter oben auftaucht.

**melzebub** · 08.01.2013, 21:44

achso, ich habe "da unter" falsch verstanden. Dann ist z-index natürlich egal.

**Slind** · 08.01.2013, 21:49

irgendeine Idee?

kann doch nicht sein das dies mit Contao so schwer ist, nachdem der Rest bis jetzt so gut ging.

**melzebub** · 09.01.2013, 06:15

das hat ja bisher noch nichts mit Contao zu tun, da wir uns hier nur auf CSS Basis bewegen. Hast du mal einen Link? Dann kann man das besser nachvollziehen.

**Slind** · 09.01.2013, 12:17

naja ich hab ja anfangs nicht wegen css gefragt und ich bin auch immer noch der Meinung das dies nur mit css nicht lösbar ist, aber ich lasse mich gern eines besseren belehren.
Hast den Link via PN erhalten, kann den noch nicht veröffentlichen

**melzebub** · 09.01.2013, 12:57

wo ist da die Sidebar?

**Slind** · 09.01.2013, 13:06

sry, hatte die test sidebar schon wieder gelöscht, nimm einfach den neuen link, ist ja das gleiche.

**Toad** · 09.01.2013, 17:01

Umfluss kannst du mit Clear: both; im .mod_article oder float=none; im imagecontainer verhindern.

**Slind** · 09.01.2013, 17:37

Zitat von Toad

Umfluss kannst du mit Clear: both; im .mod_article oder float=none; im imagecontainer verhindern.

wie kommst du auf irgend einen Umfluss?

**Toad** · 09.01.2013, 17:41

Zitat von Slind

was hat die z Achse mit der Größe eines Bildes zu tun? und der Position anderer Elemente?

dadurch das ich ja absolut verwenden muss, wird das Element aus dem Fluss genommen und alles rutscht nach oben. wie kann ich das ohne eine feste Höhe in den Griff bekommen und wie regel ich das vor allem mit der Sidebar die ein paar Ebenen weiter oben auftaucht.

Aber OK, wenn es nicht im Fluß ist ... Ups.

Geht es nicht dem Bild einen eigenen Layoutbereich zu geben und den unter #header zu setzen? So mache ich das mit ner Top-Navi. Die soll über Seitenbreite und Spalten darunter. Kannst du im Layout festlegen.
Alles darunter ist dann zwischen den Sidebars.

Sorry für 's Missverständnis.

**Slind** · 09.01.2013, 17:45

bei einer Navigation geht das da sie für jede Seite gleich ist, wie macht man das aber mit einem Bild das für jeden Artikel anders ist und ohne langes Suchen ausgetauscht werden soll.

**Toad** · 09.01.2013, 18:15

Oh. Ich weiß leider nicht mehr, ob das in contao 2.x geht, aber in contao 3 kannst du angeben in welchem Bereich der Artikel angezeigt werden soll. Das macht man direkt im Artikel"Header".

Alternativ, mehr geraten. Im Layout kannst du Artikel als Modul in den Bereich deiner Wahl platzieren. Dabei fällt mir auf, dass das in cantao 3 irgendwie doppelt gemoppelt ist. hmmm. Kann das gerade nicht prüfen ...

Schau mal in contao nach. Das wäre eine sehr saubere Lösung.

**Toad** · 09.01.2013, 18:18

Ergänzend und Analog zum eigenen Bereich: https://community.contao.org/de/show...ikel-im-Header

**Toad** · 09.01.2013, 18:33

So, hab' das mal probiert und ist was du willst:

Im Layout musst dau das Artikelmodul in deinen erstellten Bereich festlegen und auf der Seite dann dem Artikel den Bereich zuweísen.
Damit ist das erledigt, wenn auch innerhalb der Klasse "mod_article". Nur, dass mod_article in dem Bereich eben nicht zwischen den Spalten steht.
Übrigens ist das in contao 3 auch für das wegklappen der Spalten ganz gut, denn der eigene Bereich bleibt oben über dem #maindie Spalten klappen unter #main. Aber das nur nebenbei.

Schade, dass man die eigenen Bereiche nur einmal festlegen kann. also entweder unter dem Header oder oberhalb von #main, aber eben nicht an verschiedenen Stellen. Kommt vielleicht noch.

**Slind** · 09.01.2013, 19:07

Zitat von Toad

So, hab' das mal probiert und ist was du willst:

Im Layout musst dau das Artikelmodul in deinen erstellten Bereich festlegen und auf der Seite dann dem Artikel den Bereich zuweísen.
Damit ist das erledigt, wenn auch innerhalb der Klasse "mod_article". Nur, dass mod_article in dem Bereich eben nicht zwischen den Spalten steht.
Übrigens ist das in contao 3 auch für das wegklappen der Spalten ganz gut, denn der eigene Bereich bleibt oben über dem #maindie Spalten klappen unter #main. Aber das nur nebenbei.

Schade, dass man die eigenen Bereiche nur einmal festlegen kann. also entweder unter dem Header oder oberhalb von #main, aber eben nicht an verschiedenen Stellen. Kommt vielleicht noch.

ich denke das du mein Problem immer noch nicht ganz verstanden hast. Es macht für mich keinen Unterschied ob mod_article im header wrap oder footer steht. Es geht darum das ein Kindelement von mod_article, nähmlich der image_container eine breitere Breite haben soll das der Inhalt des Artikels. Damit dies bei Unterschiedlich hohen Bildern auch mit dem Folgenden Text und der Sidebar funktioniert brauch ich quasi eine Lösung in dem der image container außerhalb vom mod_article aufgelistet wird, zu mindestens gibt es keine einfache CSS Lösung nach meinem Wissen.

Ich konnte das was du geschrieben hast leider nicht ganz nachvollziehen, wenn dennoch der Meinung bist das dies mein Problem löst, wäre ich sehr verbunden wenn du versuchen könntest dies noch mal strukturierter zu formulieren, oder das man mal kurz Telefoniert (dafür bitte PN).

Doppelt gemobbelt ist die Sache übrigens so weit nicht, das man die Möglichkeit hat mehrere Artikel zu erstellen und jedem Artikel einen Bereich zuzuweisen. Dessen Position vorher im Layout für den einzelnen Bereich definiert ist.

**Toad** · 09.01.2013, 20:02

Kurz, letzter Post für heute:

Du scheinst das Bild nicht vom Artikel trennen zu wollen.

Hier ohne Trennung:

Bereich unter dem header erstellen. Meinetwegen #imagecontainer
Im Layout dem Bereich das Modul Artikel hinzufügen.
Den Artikel der Seite hinzufügen. Einmal im #main und einmal im #imagecontainer. Alternativ kannst du auch den #main-Artikel als Verknüpfung zum Inhaltselement von #main in #imagecontainer anlegen. Das hat den Vorteil, dass immer nur der Artikel im #main modifiziert werden muss.

#imagecontainer .mod_article * = Display:none; // alles was nicht image ist unsichtbar
#imagecontainer .image_container = Display:block; // image_container sichtbar

#main .image_container = Display:none; // imagecontainer unsichtbar, Text sichtbar

Damit steht das/die Bilder über den Spalten und der Text zwischen den Spalten.

Trennung Bild/Text:
Ich würde allerdings auf das Bild im Artikel verzichten und es eben in einen Artikel der gleichen Seite in #imagecontainer ohne den Text verfrachten. Oder eben schlicht als Bild und nicht als Artikel.

Struktur:

Code:

-----#header------  (volle Seitenbreite)
-#imagecontainer--  (Bild, volle Seitenbreite)
#left #main #right  (je nach Einstellung, Text im #main)
-----#footer------  (volle Seitenbreite)

So willst du die Struktur doch, oder?

MfG.

Wie gesagt, für heute war es das. ich hoffe, dass es nachvollziehbar ist.

**Slind** · 09.01.2013, 20:06

sehr guter Ansatz.
Gibt es noch eine Möglichkeit dies mit einem Artikel hin zu bekommen? -> Wenn der gleiche Artikel automatisch an zwei stellen eingebettet wird, dann kann ich die einzelnen ja auch über header, bzw main ansprechen
Der Punkt warum das Bild im Artikel bleiben muss, ist das die Seite später von verschiedenen Standorten und Leuten verwaltet wird, von daher muss das alles so einfach wie möglich gehalten werden.
Wenn die jetzt einen extra Artikel anlegen müssen...., viel zu kompliziert für einen Contao Neuling, oder was denkst du?
Wenn du ne bessere Idee hast die später super einfach zu Verwalten ist, nur her damit.

**Toad** · 10.01.2013, 12:16

Da fällt mir nur eins ein:

Du hast bestimmt einen Header, sagen wir Höhe:100px. Definiere einen eigenen Bereich darunter, mit max-Höhe des Bildes. Da wird es wohl haken, stimmts? Der Bereich kann sich nicht anpassen, da das Bild, der Container, eben kein Element davon ist.

Würdest du javascript akzeptieren um den eigenen Bereich, #imagecontainer, in der Höhe anzupassen?

Jedenfalls kannst du den Bereich #imagecontainer dazu nutzen platz zu schaffen/halten für das Bild und #left, #main, #right nach unten zu verschieben.

Das Bild musst du dann per CSS absolut eben unter den #header platzieren. Im Beispiel y:100px

Wenn die Höhe des bildes immer gleich ist, dann reicht es den bereich #imagecontainer einfach auf die Höhe des Bildes zu begrenzen.

Ansonsten benötigst du im layout ein wenig Javascript.

Sag' mal, ob du mit javascript klarkommst und was ich mal wieder unverständlich/umständlich geschrieben habe. Dann erläutere ich das noch mal strukturiert.

**Slind** · 10.01.2013, 14:40

ja so hatte ich mir das auch schon vorgestellt. Ist mit Javascript bestimmt gut möglich, habe nur leider keine Ahnung davon. Es bleibt aber auch noch die Frage mit der Sidebar offen da die sich ja nicht wie ce_text auf der gleichen ebene wie der image_container befindet, ist aber vermutlich auch mit Javascript möglich oder?

Wie gesagt hab ich von Javascript überhaupt keine Ahnung und kenne auch nur einen der jedoch noch ein Anfänger auf dem Gebiet ist. Wäre das denn Kompliziert umzusetzen, bzw wärst du bereit da zu helfen?

Wie regelt man das für javascript Hasser, bzw. no script user?
Edit: Javascript Hasser Lösung hat sich erledigt, die leite ich dann einfach auf die mobile Seite um, Slider usw funktioniert ja dann auch nicht.

**Toad** · 10.01.2013, 15:09

Zitat von Slind

ja so hatte ich mir das auch schon vorgestellt. Ist mit Javascript bestimmt gut möglich, habe nur leider keine Ahnung davon. Es bleibt aber auch noch die Frage mit der Sidebar offen da die sich ja nicht wie ce_text auf der gleichen ebene wie der image_container befindet, ist aber vermutlich auch mit Javascript möglich oder?

Wie gesagt hab ich von Javascript überhaupt keine Ahnung und kenne auch nur einen der jedoch noch ein Anfänger auf dem Gebiet ist. Wäre das denn Kompliziert umzusetzen, bzw wärst du bereit da zu helfen?

Wie regelt man das für javascript Hasser, bzw. no script user?
Edit: Javascript Hasser Lösung hat sich erledigt, die leite ich dann einfach auf die mobile Seite um, Slider usw funktioniert ja dann auch nicht.

Wenn du mir das erklärst, erkläre ich den Rest.
Die Sidebar soll doch unter das Bild, oder? So wie in dem Schaubild, dass ich gestern gepostet habe?
Entweder erstellst du den eigenen Bereich "#imagecontainer" unter dem header oder über main. über #main wäre der bereich zwischen den Sidebars. unter #header wäre er über den sidebars auf voller seitenbreite. und volle Seitenbreite willst du doch, oder?

Ich wühle in der zwischenzeit mal den code heraus. hab sowas ähnliches rumliegen. poste ich gleich. ich gehe dabei dann davon aus, dass der eigene Bereich #imagecontainer heißt.

**Slind** · 10.01.2013, 15:10

geht klar, danke.

Die Sidebar soll unter dem Teaser Bild sein, ja.

**Toad** · 10.01.2013, 16:30

Das wäre für html5 und müsste im Layout unter "Eigener Javascript-Code" eingefügt werden. Damit wird der Bereich in der Höhe beim laden der Seite an die Bildhöhe angepasst. Da fehlt noch ein bisschen was, aber so kann es laufen. bin gerade zu beschäftigt ...
Da fehlt z.B. die Abfrage wenn kein Bild gefunden wird und eine bessere Eingrenzung der Auswahl des Elements.

Code:

<script>

function resize() 
{
  var container = document.getElementById('imagecontainer');
  var main = document.getElementById ("main");
  var articleimage = main.getElementsByClassName("image_container")[0];
  // hier gibt es das Problem, dass das Bild keine ID hat und somit nicht eindeutig ist.
  // Könnte man im template ändern. 
  // So wie es oben steht ist das erste Bild im Bereich #main, 
  // das Bild, dass die Größe des #imagecontainer-Bereichs angibt. 
  // Wenn da noch mehr Bilder sind kann das natürlich schief gehen ...

  container.style.height = parseInt(articleimage.offsetHeight) + "px";
}

resize();

</script>

**Toad** · 10.01.2013, 16:33

Ich weiß ja nicht wie gut du dich mit JS und CSS usw. auskennst, aber bis zum finalen Entwurf kannst du damit schon rumprobieren.
Ansonsten dauert es noch ein wenig.

Hast du eine Testplattform? Lokal oder so?

**Slind** · 10.01.2013, 16:51

jaein, hab die Seite halt online, aber die öffentliche ist noch mit nem ganz alten cms

js kann ich gar nicht, css mittelmäßig

**Toad** · 10.01.2013, 17:46

Kann erstmal so bleiben. Alles was schiefgehen kann wird abgefangen. Kann es allerdings gerade nicht testen.
Was noch fehlt wäre eine feinere Selektion des image_container. Also nur der erste image_container in einem mod_article. Aber so funkt. es erstmal.

Code:

<script>

function resize() 
{ 
    if (!document.getElementById('imagecontainer')) return; // kann eigentlich nicht passieren
    var container = document.getElementById('imagecontainer'); 

    if (!document.getElementById("main")) return; // kann eigentlich nicht passieren
    var main = document.getElementById("main"); 

    if (!main.getElementsByClassName("image_container")) 
    { 
        container.style.height = 0; // ken Bild, also containerhöhe = 0
    } 
    else 
    { 
        var articleimage = main.getElementsByClassName("image_container")[0];
        container.style.height = parseInt(articleimage.offsetHeight) + "px";
    }

}

resize();

</script>

Dann erstelle mal den Bereich "imagecontainer".

Dann im CSS

#main .mod_article .image_container =
Position: absolute;
Top: (headerhöhe);

und dann das Script ins Layout.

Mal schauen was passiert.
Vielleicht bin ich auch schon zu müde und übersehe da was. Die Arbeit nervt heute ... ;-)

Selber testen und verfeinern kann ich erst am Wochenende.

**Slind** · 10.01.2013, 17:57

super vielen Dank für deine große Hilfe und die aufgewendete Zeit.
Ich habe heute leider auch keine Zeit mehr dies auszuprobieren, werde das aber morgen Abend gleich mal testen.
Wenn ich in der Anleitung dann klar mache das es immer nur einen Image_Container geben darf reicht das vollkommen aus. Die Bilder die über den TextEditor eingefügt werden, werden ja nicht mit der Klasse/ID image_container verlinkt.

Darf man Fragen welche stressige Arbeit du ausübst?

**Toad** · 10.01.2013, 19:09

Nichts zu danken. Ein wenig Zerstreuung tut mal ganz gut. Ausserdem ist mein html/css/js-Wissen doch stark auffrischungsbedürftig. So geht das am Besten. Je nach Lust und Laune.

Ich nenne es mal "Elektronischer Hausmeister". Alles heile machen was so anfällt im administrativem Bereich als externer Mitarbeiter bei einem internationalem Großunternehmen. Das "extern" bemerkt man vor allem beim Gehalt ...

Für mich war es das auch für heute.

**Slind** · 10.01.2013, 19:54

dann ne gute Nacht.

Was hast du so für Projekte im Web gemacht?

**Toad** · 11.01.2013, 12:33

Hihi, Keine?!?

Ich programmiere Hobbymässig C/C++. Allerdings lag das die letzten Jahre brach. Früher war ich sehr intrinsisch-technisch-interessiert. Habe im Dezember wieder alles aus der Schublade geholt. Hatte die ganze Zeit einen CPC-Emulator online und habe die Seite gerade erst wieder mit contao 3 online gestellt. ist allerdings kein Bringer. Retro und leer wie Gobi. Das war mal besser. rolandemu.de
Wahrlich kein Prunkstück.

Da ich gleichzeitig an meinem richtigem Webauftritt feile (responsive at its Best, real full responsive Gallery, centered full responsive TopMenu, etc. ..., keine Kompromisse), den Emulator in die Neuzeit hieve und mein frisches Töchterchen auch Zeit verlangt, puzzelt es sich recht langsam aber zumindest kontinuirlich an allen Fronten voran. Webkram kann ich ja je nach Stress auch während der Arbeit erledigen.
Auf meiner eigenen unfertigen Seite wollte ich eigentlich völlig auf JS verzichten. Das grundsätzliche Verhalten kommt auch gut ohne aus, aber es gibt da ein klitzekleine Kosmetik, die bei CSS3 nur mit Javascript geht. Vielleicht kann ich das aber auch noch in PHP umsetzen. Das gerüst ist auch fast fertig und vorzeigbar. Einiges werde ich hier posten, da responsive ja in aller Munde ist.

Im übrigen bin ich mit JS nicht sonderlich vertraut, aber es ist sehr C/C++ähnlich. So wie PHP und Java auch. Von daher ist es Jacke wie Hose.

Apropos: Am Samstag kann ich, spätestens am Abend, mit 'nem Debugger das ganze mal anpassen und exakt das Bild selektieren. Dann ist es damit fertig.

**Toad** · 11.01.2013, 12:36

Da fällt mir aber was ein:
Probier' doch mal mit dieser Zeile rum:

Code:

var articleimage = main.getElementsByClassName("image_container")[0];

probiere anstelle von [0] mal [1] oder eine andere Nummer. Das ist nicht die Lösung, aber evtl. kannst du dann sehen wie es am Ende aussehen wird.

Ausserdem hab' ich gerade 'ne Erweiterung gesehen, die das vielleicht alles kann: [coverpicture] Titelbild (Seitenbild)
Was sie wirklich tut weiß ich nicht, aber in der Kurzinfo klingt es danach, dass es passen könnte. Ausserdem frisch für contao 3 freigegeben.

**Slind** · 11.01.2013, 23:28

schau ich mir an, Danke

die Erweiterung scheint noch nicht zu funktionieren, wäre aber genau das was ich brauche.

**Slind** · 12.01.2013, 16:09

hab die Erweiterung selbst zum laufen gebracht, kann also auf JavaScript verzichten. Vielen vielen Dank für deine Hilfe.

**Toad** · 13.01.2013, 16:00

Hallo.

Keine Ursache. Ich hätte auch erst jetzt Zeit. Und ich hab' wieder was dazu gelernt, bzw. aufgefrischt.

Besser eine Erweiterung als Flickschusterei.

Gruß.