Thema: News mit einem Headlinebild anzeigen passend zu Kategorie

Hallo Forum,

ich habe in einem anderem Bereich gefragt warum um ein Bild im editor immer ein p-Element geschrieben wurde.
Leider konnte die Aufgabe/das Problem nicht mit den Mitteln des CSS gelöst werden.
So entschied ich mich dazu, mein Template so anzupassen, das es eine Automatik hat, die erkennt ob ein Artikel in einem bestimmten Bereich ist und wenn ja, dann prüft in welcher Kategorie.

Da ich nicht in der Lage bin, dafür ein Plug-In o.ä. zu fertigen habe ich es auf eine ggf. etwas umständliche Art und Weise realisiert.
ABER: Das Ergebnis stimmt und erfüllt meinen Zweck.

Ich möchte euch heute die Lösung hier kurz vorstellen:
Das fertige Ergebnis ist hier zu sehen.

Das Problem was ich hatte ist, das wenn ich im Front oder Backend ein Bild an diese Position einfügen wollte, der Editor (egal welcher) um jedes Element ein p-TAG erstellt. Im Zuge des validen Codes ist das auch richtig und meine erste Lösung daher eigentlich sehr unschön gewesen.


Ich habe das Bild im Editor eingefügt und dann wenn alles erstellt war (Texte, usw.) auf den Button "Quellcode" geklickt und manuell das <p>-Tag um das Bild entfernt.

Habe ich dies nicht gemacht, wurde das Bild durch die Vererbung im CSS, zusätzlich mit den Eigenschaften des p-Tag belegt. Der Abstand zu den Rändern war nicht richtig. (padding umd margin)

Das ändern der Eigenschaften des p-Tags hätten keinen gewünschten Effekt gehabt, da sich dann die Abstände auch auf den normalen Text auswirken und der Text dann zu nah am Rand wäre und es nicht mehr angenehm zu lesen war.

Weiterer Nebeneffekt dieser schwchen Lösung ist, jedesmal wenn ich den Artikel zum bearbeiten aufgerufen habe, wurde das p-Tag wieder um das Bild erstellt. D.h. ich musste es jedesmal wieder entfernen. Eine sehr nervige Sache!

Auf dem Bild ist zu sehen das die manuell eingefügte Headline-Grafik, nach rechts aus dem Artikelkasten springt. Durch das einbringen meine Lösung ist hier nun leider nicht mehr zu sehen, dass der schwarze Bereich, wo Autor und Datum genannt werden, sonst völlig aus dem Ruder laufen.
Meine Grundidee war nun, das "Aussehen" des Artikel so zu verändern, das es abhängig von Bereich und Kategorie, in welcher der Artikel eingestellt wurde, eine entsprechende Grafik anzeigt.

Welche Datei musste ich dazu ändern?

im Ordner \templates\*templatename*\html\com_content\article \ bin ich dann schon auf die erste Datei gestoßen: default.php

Mit Firebug habe ich herausgefunden das der Text des Artikel in einem Div-Element mit Namen art-article untergebracht wurde.
Da sollte meine Grafik nun direkt vor dem Text eingestellt werden.

Die entsprechende Stelle im PHP-Code:

Code:

echo "<div class=\"art-article\">";
echo $this->article->text;

Genau zwischen diesen beiden Zeilen habe ich nun folgenden Code geschrieben:

Code:

if ($this->article->sectionid == "1")
{
	switch($this->article->catid)
	{

		case ("41"):
			echo "<div class=\"headline_bild\">";
			echo "<img src=\"/images/headlines/grafikname01.jpg\">";
			echo "</div>";
		break;

		case ("42"):
			echo "<div class=\"headline_bild\">";
			echo "<img src=\"/images/headlines/grafikname02.jpg\">";
			echo "</div>";
		break;

		case ("43"):
			echo "<div class=\"headline_bild\">";
			echo "<img src=\"/images/headlines/grafikname03.jpg\">";
			echo "</div>";
		break;

		case ("46"):
			echo "<div class=\"headline_bild\">";
			echo "<img src=\"/images/headlines/grafikname04.jpg\">";
			echo "</div>";
		break;
	}
}

Das einfügen dieses Codes in der default.php im oben genannten Verzeichnis, hat aber nur Auswirkungen auf den Artikel, wenn man ihn sich ganz anguckt.
Da ich bei mir auf der Seite aber auch einen Bereichs-Blog nutze, musste auch hier der Code angepasst werden um das richtige Bild zu zeigen.

Pfad der Datei: \templates\*templatename*\html\com_content\section
Datei: blog_item.php

Hier wird der Code zwischen folgenden beiden Zeilen benötigt:

Code:

 echo "<div class=\"art-article\">";
 echo $this->item->text;

Vorsicht ist hier nun geboten, denn der Code ist hier leicht verändert:

Code:

if ($this->item->sectionid == "1")
{
	switch($this->item->catid)
	{

		case ("41"):
			echo "<div class=\"headline_bild\">";
			echo "<img src=\"/images/headlines/grafikname01.jpg\">";
			echo "</div>";
		break;

		case ("42"):
			echo "<div class=\"headline_bild\">";
			echo "<img src=\"/images/headlines/grafikname02.jpg\">";
			echo "</div>";
		break;

		case ("43"):
			echo "<div class=\"headline_bild\">";
			echo "<img src=\"/images/headlines/grafikname03.jpg\">";
			echo "</div>";
		break;

		case ("46"):
			echo "<div class=\"headline_bild\">";
			echo "<img src=\"/images/headlines/grafikname04.jpg\">";
			echo "</div>";
		break;
	}
}

Wichtig ist hier die Veränderung von article zu item. Da wohl bei einer Blogansicht nicht der article sondern das jeweilige item geprüft wird. Leider habe ich dazu noch keine genauere Erklärung parat. Evtl. kann ja wer aushelfen?

Was macht der Code nun genau?
Ich habe als erstes Prüfen lassen ob der Artikel im Bereich (sectionid) 1 ist. Bei mir ist das der Bereich "News".
Weiter habe ich dann mit Hilfe des switch-Konstruktes verschiedene Fälle prüfen lassen. Hier wird geprüft in welcher Kategorie (catid) der entsprechende Artikel ist.
Da ich zur Zeit nur 4 verschiedene Kategorien im Bereich 1 habe, sind hier meine 4 Möglichkeiten geprüft worden.
Bei Eintreffen eines Falles, gibt der PHP-Interpreter dann den entsprechenden Code per echo aus und bricht die weitere Prüfung ab. Einen default-Wert oder eine else, habe ich hier nicht vergeben, da ich es nicht für nötig halte, denn entweder ist der Bereich 1 oder nicht. Wenn nicht macht der Interpreter nix weiter und stört sich auch nicht weiter an dem Rest des Codes.

Nachteil bei meiner momentanen Lösung ist, dass ich neu erstellte Kategorien manuell in beide PHP_Dateien einfügen und prüfen lassen muss. Der Mehraufwand ist aber meiner Meinung nach sehr gering, da ich nicht wöchentlich neue Kategorien hinzufüge.

Wichtig zu wissen ist noch folgendes: Der Pfad zu euren Bildern muss von der index.php aus gesehen werden, die in eurem Joomla!-Rootordner liegt. D.h. in diesem Fall habe ich einfach im joomla-eigenem image-Ordner einen neuen Ordner namens headlines erstellt.

Mit Hilfe dieser doch recht einfachen Funktion, habe ich es geschafft das zu jeden Artikel in der entsprechenden Kategorie, das passende Bild als Headline eingefügt wird und ich keine Headline-Grafiken mehr manuell einfügen muss. Das erleichtert auch das posten von News meinen anderen Autoren, die sich ggf. weniger gut mit HTML-Tags auskennen.
Man kann auch mit Hilfe einer random-funktion, die Bilder einer Kategorie per Zufall einblenden. lassne um nicht immer das gleich Bild für eine Kategorie zu nutzen.
Evtl. poste ich eine passende Lösung dazu auch bald, ist nämlich schon in arbeit.

Das fertige Ergebnis kann unter www.gau-gaming.de betrachtet werden. Folgt dort einfach den News!

Ich hab das jetzt nicht alles durchgelesen. Willst du unterschiedliche Bilder passend zu verschiedenen Kategorien, Bereiche oder Menüpunkte, bzw. Beiträge machen, dann nimm das hier:
http://extensions.joomla.org/search?q=flexheader



Und zumindest im JCE-Editor kannst einstellen, dass kein p-Tag benutzt wird.



Axel

Ich sag mal, wenn du damit auf die TEMPLATE OVERRIDES gestossen bist -> gähn

hm was soll ich dazu nun sagen?
Ich bin was Joomla angeht ein echter Anfänger und war froh das ich es ALLEINE hinbekommen und zu 95% auch verstanden habe. Das es sich dabei um die Template Overrides handelt, habe ich erst erfahren nachdem ich den Beitrag hier gepostet hatte und das Tutorial von Hagen Graf durchgeforstet hatte...

Gerade ihr als Mods und Premium Supporter, solltet doch mal froh sein das einer sich auch damit alleine mal befasst und seine Lösung hier postet, statt ständig die gleichen (nervigen) Fragen zu stellen.

Frage mich nur warum Eigenleistung hier so seltsam komentiert wird?
Als ich hier im Forum nach genau dieser Lösung mal fragte, hatte komischerweise keiner die Antowort mit dem Felx Header...

Ich bin nun ehrlich angepisst, denn den Komentar von joom_mob-i-co hätte er sich sparen können!! Ein einfaches Danke hätte gereicht...
Bleibe aber mit Stolz bei meiner eigenen Lösung!

PS: Der Felx Header ist nicht das was ich in meiner kleinen Anleitung realisiert habe. Meine Anleitung bezieht sich direkt auf einen Artikel in dem eine Header-Grafik gezeigt wird. Es geht hier um den Header des Artikels und nicht einer ganzen Seite!

den Kommentar vom Kollegen verstehe ich auch nicht so recht, aber ich bin selber auch davon ausgegebenen, dass du ein Problem hast und nicht eine Lösung präsentierst (habe einfach zu schnell gelesen).

Das dir damals niemand den Flexheader genannt hat, da kann ich ja nun nichts zu

Natürlich ist das super, dass du das selber gelöst hast.
Mit dem Flexheader kannst du aber auch zu jedem einzelnen Artikel die Grafik oder Flash ändern. Geht auch. Der Flexheader ist da wirklich sehr flexibel. Aber entscheidend - und da gebe ich dir recht - ist, dass du es selber gelöst hast!

Vielleicht sollte man das hier auch in die Tipps & Tricks verschieben...



Und als Mod: ich habe es schon beinahe aufgegeben, das hier User sich eigene Lösungswege überlegen - drum bin ich auch sogleich von einem Problem ausgegangen


Axel