Das Westfalenstadion bei Nacht

Montag, 15 Februar 2016 18:48

News aus dem Maschinenraum

Layout Anpassungen Teil 2 - Anpassungen an den Artikellisten

Artikel bewerten
(0 Stimmen)

Nachdem ich im ersten Teil beschrieben habe, was notwendig war, um die Voraussetzungen für die Anpassungen am Layout dieser Website zu schaffen, soll es heute um die konkreten Anpassungen gehen. Neben den offensichtlichen Änderungen auf der Website gibt es auch für mich im Backend kleine Arbeitserleichterungen...

Grundlagen / Ausgangssituation

Da ich die K2 Content Extension für die Pflege des Inhaltes einsetzte, war es notwendig, die K2 Templates zu überschreiben (alles dafür notwendige ist im ersten Teil beschrieben). Als Layout Template verwende ich für diese Website "Protostar", welches direkt mit Joomla ausgeliefert wird. 

Bislang verzichtete ich darauf, Fotos als Vorschaubild in den Listenansichten (beispielsweise wenn ihr direkt auf der Startseite moellerherm.net landet) einzubinden. Grund dafür war, dass K2 diese Bilder immer über dem Artikel platzierte, was mir persönlich nicht gefällt. Stattdessen hatte ich insbesondere bei den Fotoprojekten immmer das Projekt-Logo als kleines Icon in dem Introtext eingebunden. Das erwies sich aber als unpraktisch:

  • wenn ich in den vergangenen Wochen vornehmlich etwas für ein bestimmtes Projekt gemacht habe, findet sich das Projekt-Logo schnell 5 bis 10 mal auf der Startseite wieder, was unschön aussieht.
  • das einbinden des Projekt-Logos in den Introtext geschah immer manuell, d.h für jeden neuen Artikel zu einem Projekt musste ich das Logo neu platzieren.

Einfügen neuer CSS-Klassen in den K2 Templates

Benötigt man für seine Anpassungen Änderungen am CSS, ist das beste Vorgehen, eigene CSS-Klassen zu definieren und zu verwenden. Diese können dann in der custom.css Datei des verwendeten Templates (in meinem Fall also Protostar) definiert.

Das bedeutet, sämtliche Änderungen bzw. Erweiterungen am CSS habe ich in der Datei /templates/protostar/css/custom.css durchgeführt. Dadurch vermeidet man, sowohl Änderungen an der Datei /components/com_k2/css/k2.css (Vorsicht: bei einem Update würde diese überschrieben!) oder an den K2 - CSS - Klassen selbst durchzuführen.

Anpassung der Artikellisten

Fotos in den Artikellisten

Ich habe die Artikellisten so angepasst, dass ein gegebenfalls am Artikel hinterlegtes Foto jetzt - wie auf dem Screenshoot zu sehen - links neben dem Artikel-Teaser angezeigt wird.

Somit kann ich zumindest das wichtigste Foto eines Artikels bereits auf der Startseite platzieren - wenn auch nur in kleiner Form. Darüber hinaus wird eine lange Liste von Artikel dadurch etwas aufgelockert. 

 

Unpraktisch daran ist im Moment leider nur noch, dass ich dafür die Bilder in unterschiedlichen Größen vorhalten muss, um die Ladezeit der Startseite nicht zu groß werden zu lassen.

Einzige Änderungen an den K2 Templates dafür war, dass ich die folgenden CSS Klassen durch eigene ausgetauscht und in der customm.css Datei (siehe oben) definiert habe. Dabei habe ich im css festgelegt, dass das Foto immer eine feste Breite besitzt und somit alle Artikel mit Foto bündig abschließen. Die genannten Dateien befinden sich allesamt unter /components/com_k2/templates/<mein Template>/

Datei CSS-Klasse (Original) CSS-Klasse (Neu) Anmerkung

category_item.php

category_item_links.php

catItemImageBlock blogCatItemImageBlock Im CSS wird defiiniert, dass dieser Block links neben dem Artikel platziert wird. 

category_item.php

category_item_links.php

catItemImage blogCatItemImage Definiert im CSS, welcher Abstand zwischen Foto und dem Artikel rechts neben dem Foto liegen soll. Darüber hinaus definiert der Selektor span.blogCatItemImage img, wie breit ein Foto sein soll.

tag.php

tagItemImageBlock blogCagItemImageBlock Analog zu catItemImageBlock, nur dass diese Anpassung für die Tag-Listen sind (zB. Tag Liste zum Projekt 52)

tag.php

tagItemImage blogCagItemImage Analog zu catItemImage, nur dass diese Anpassung für die Tag-Listen sind (zB. Tag Liste zum Projekt 52)

Kategorie als Überschrift

Die zweite Änderung, die ich an den Artikellisten vorgenommen habe, ist dass jetzt die Kategorienamen direkt über dem Titel des Artikels erscheinen. Sie werden dort farblich auch noch etwas hervorgehoben, damit der Leser die Kategorie auf Anhieb einordnen kann. Neben dem aus meiner Meinung nach etwas schöneren optischen Erscheinungsbild ist der große Vorteil dieses Layouts, dass ich vor allem für die Projekte den Projektnamen nicht immer wieder im Artikel-Titel wiederholen muss.

Dafür wurde in den Dateien 

  • /components/com_k2/templates/<mein Template>/category_item.php
  • /components/com_k2/templates/<mein Template>/category_item_links.php

im ItemHeader-Element folgender Code Block eingefügt:

<?php if($this->item->params->get('catItemCategory')): ?>
  <!-- Item category name -->
  <h4 class="blogCatItemCategoryTitle">
    <a href="/<?php echo $this->item->category->link; ?>"><?php echo $this->item->category->name; ?></a>
  </h4>
<?php endif; ?>

Im CSS kann dann über den Selektor div.catItemHeader h4.blogCatItemCategoryTitle a das Erscheinungsbild des Kategorienamens angepasst werden. In der Datei tag.php erfolgt die Anpassung analog, nur dass die CSS-Klasse hier blogTagItemCategoryTitle heißt.

Wichtig hierfür ist, dass in K2 eingestellt ist, dass der Kategory Name auch in den Listen dargestellt werden soll (das 

Ausblick

In den kommenden Tagen wird es noch einen dritten Teil zu diesem Thema geben, der sich mit meinen Anpassungen an den Artikel Seiten selbst beschäftigt. 

 

Zusätzliche Informationen:

Letzte Änderung am Dienstag, 16 Februar 2016 21:55

Kommentar schreiben