webEdition: Sitemap aller Dokumente als Liste erstellen

Eine Sitemap als Liste für Google mit we:listview

Vor einiger Zeit gab es auf dem blaudenker einen Artikel über das Thema Sitemap. DIe dort vorgestellte Sitemap bildete eine komplette Navigation wieder. An dieser Stelle möchte ich eine Sitemap erstellen, die alle Dokumente die sich in webEdition befinden, auflisten. Zur Optimierung für Google werden dazu alle Title-Felder aus dem Reiter “Eigenschaften” des jeweiligen Dokument ausgelesen und mit einem Link zu Zielseite versehen in einer Liste dargestellt.

Die Sitemap kann dann zum Beispiel im Footerbereich verlinkt werden. So ist sichergestellt das Google auch Dokumente findet die nicht in der Navigation verlinkt sind. Die Ausgabe der Liste wird mit einem we:listview realisiert.

Codebeispiel:

<we:listview type="document" name="sitemap" workspaceID="1">
  <ul>
    <we:repeat>
      <li><we:field name="Title" alt="we_path" hyperlink="on"></li>
    </we:repeat>
  </ul>
</we:listview>

Zu beachten dabei ist, das der Schalter type=”" auf “document” gesetzt ist und das in workspaceID=”" die ID des Dokumentenordners eingetragen wird, der alle anzuzeigenden Dokumente enthält. Diese Funktion arbeitet rekursiv. Es werden alle Dokumente aufgelistet, bei denen im Reiter “Eigenschaften” der Haken “ist durchsuchbar” gesetzt ist.

webEdition: Einfaches erzeugen und verwalten von Thumbnails

webEdition bietet eine sehr gute Funktion um Thumbnails zu erzeugen. So kann für jedes Bild ein Thumbnail Typ hinterlegt werden. Die Definition des Thumbnail kann in webEdition einfach verwaltet werden. Die Thumbnailverwaltung kann über “Extras“->”Miniaturansichten” aufgerufen werden. Hier die Erklärung dieser Funktion:

Beschreibung der einzelnen Punkte:

1. Miniaturansichten: Überblick über alle vorhandenen Thumbnaileinstellungen. Beim anklicken wird die entsprechende Miniaturansicht zum editieren geladen.
2. Name: Hier kann der Name vergeben werden. Dieser Name muss nachher in den Templates identisch sein (Beispiele unten)
3. Breite: Breite der zu erzeugenden Miniaturansicht
4. Höhe: Höhe der zu erzeugenden Miniaturansicht
5. Qualität: Qualität des ausgegebenen Bildes. Skala von 1 bis 10, je niedriger der Wert, desto geringer die Dateigrösse und desto schlechte die Bildqualität.
6. Proportionen: Wenn dieser Haken gesetzt ist wird das Bild nicht verzerrt. Wird bei Breite und Höhe jeweils z. B. 100 Pixel eingetragen, ist das Bild maximal 100×100 Pixel wobei das Seitenverhältnis beibehalten wird.
7. Bei Bedarf maximieren: Wird ein Bild mit 200 Pixel angegeben und die Breite steht auf 300 Pixel rechnet webEdition das Bild automatisch hoch.
8. Interlace: Bilder interlaced umrechnen. Kann bei der Erzeugung von Thumbnails deaktiviert werden wenn Probleme auftreten.
9. Format: Entweder das originale Format beibehalten oder GIF,JPG oder PNG als Ausgabeformat erzwingen.

Codebeispiele:

Um einem Bild ein Thumbnail zuzuweisen, kann folgender Code benutzt werden:

<we:img name="bild" thumbnail="150 breit">

Es wird ein Bild im Dokument hinterlegt und webEdition rechnet dann das Bild auf ein Thumbnail mit 150 Pixel Breite um. Auf der Webseite wird dann ein Bild mit exakt 150px Breite angezeigt.

Manchmal kommt es vor, dass der Platz im Dokument extrem begrenzt ist. Da webEdition um das Bild im Editmode noch einen Rahmen mit einem kleinen Innenabstand macht, ist das komplette Element in webEdition um die 160 Pixel Breit. Wenn dieser Platz im Editmode nicht ausreicht, kann man auch die Eingabe von der Ausgabe trennen:

<we:ifEditmode>
  <we:img name="bild" thumbnail="130 breit">
</we:ifEditmode>

<we:ifNotEditmode>
  <we:img name="bild" thumbnail="150 breit">
</we:ifNotEditmode>

Im Editmode von webEdition wird nun eine 130 Pixel Breite Grafik angezeigt, auf der Webseite selber wird die 150 Pixel Grafik angezeigt.

Manchmal ist es nötig, nur den Pfad eines Bildes auszugeben. Auch hier kann der Pfad zum Thumbnail erzeugt werden:

<we:img name="bild" thumbnail="150 breit" only="src">

So können ohne Probleme Links auf Alternativgrößen erzeugt werden.

webEdition: Sitemap anhand der Navigation erstellen

Automatisch erzeugte Sitemap

Wer die Navigation mit dem Navitool von webEdition erstellt hat, kann ohne Probleme eine Sitemap auf dieser Basis erstellen. Dabei werden alle angelegten Navigationspunkte ausgegeben, unabhängig davon ob in den Eigenschaften des jeweiligen Dokument der Haken “durchsuchbar” gesetzt ist. Der Aufbau der Sitemap ist sehr einfach.

Wichtig dabei ist das die richtige ID des auszulesenden Navigationsordner beim Parameter parentid=”" angegeben wird.

Hier das entsprechende Codebeispiel:

<h1>Sitemap</h1>
<we:navigation navigationname="sitemap"  parentid="1"/>

<ul>
  <we:navigationWrite navigationname="sitemap" />
</ul>

webEdition: Navigation mit 2 Ebenen

webEdition bietet das Navitool an, das unter “Extras”->”Navigation” zu finden ist. Mit diesem Navitool kann unabhängig vom Seitenbaum eine Navigation erstellt werden [Bild 1].

Anhand dieses Navitools können Navigationseinträge auf webEdition Dokumente erstellt werden. Um die Navigationseinträge anschließend wieder auszugeben, kann ein Template includiert werden. Das Template kann komplett mit we:tags erstellt werden. Das gute an dieser Navigation: man hat volle Kontrolle über den ausgegebenen Code. Die Ausgabe der Navigation kann so ohne Probleme an den jeweiligen Bedarf angepasst werden [Bild 2].

Wichtig in diesem Beispiel ist das im Navitool keine Einträge, sondern Ordner erstellt werden. Das erspart beim Ausbau auf weitere Ebenen Probleme. Das Template in diesem Beispiel ist wie so aufgebaut:

  <we:navigation navigationname="default"  parentid="1">

Zuerst wird festgelegt wie die Navigation benannt werden soll. Da in webEdition das Erzeugen der Navigation und die Ausgabe an zwei verschiedenen Punkten geschieht, wird später bei der Ausgabe auf diesen Namen zurück gegriffen. parentid=”1″ gibt an, welche ID der Startordner der Navigation im Navitool hat. Wen man mit der Maus über einen Ordnereintrag im Navitool fährt, erscheint im unteren Bereich des Fensters die ID.

<? // ----  Navi normal 1. ebene start ----- // ?>
    <we:navigationEntry type="folder" level="1" navigationname="default">
      <li class="navilink"><a href="<we:navigationField name="href">" title="<we:navigationField name="display">"><we:navigationField name="text" /></a></li>
    </we:navigationEntry>
<? // ----  Navi normal 1. ebene ende ----- // ?>

Hier wird die erste Ebene der Navigation erstellt. Dieses Menü hat den Zustand “inaktiv”. Zusätzlich kann die Navigation im aktiven Zustand anders ausgeben werden. Dafür ist current=”true” verantwortlich:

» Den gesamten Beitrag lesen

webEdition: Klick-Vergrössern Funktion mit Multibox

webEdition bietet von Hause aus keine “vergrößern” Funktion für Bilder an. Mit Hilfe von we:tags und einer JavaScript Lightbox (JavaScript Image PopUp Effekt) kann man das aber auf eine sehr einfache Weise selbst nachbauen. Interessant dabei ist der Aspekt, das im Dokument eine Checkbox zur Verfügung steht, mit der man steuern kann, ob für das Bild eine Klickversion vorhanden ist.

Struktur nach Import der Multibox Dateien

Als erstes muss das Multibox Script bei phatfusion herunter geladen werden. Nach dem entpacken werden alle Dateien in webEdition importiert. In diesem Beispiel sollte folgende Ordnerstruktur erstellt werden:

/gobal
/global/javascript
/global/javascript/multibox

Innerhalb des Verzeichnisses multibox sollte dann folgende Struktur vorhanden sMein:

/files
/iepng
/mtv111
/images

Im ZIP Archiv von phatfusion findet sich im Ordner _common der mootools Framework. Die  mootools.js, die multibox.js und die overlay.js kommen in webEdition in das mtv111 Verzeichnis.  Die Datei iepngfix.htc wird in das Verzeichnis iepng importiert. Anschließend werden alle images und alle files in die gleichnamigen Ordner importiert. Danach stehen alle benötigten Dateien zur Verfügung.

» Den gesamten Beitrag lesen