News Summary Bild einfügen

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
Micha

News Summary Bild einfügen

Post by Micha »

Das was in cmsms als NewsSummary bezeichnet wird, kann man wohl auch als Teaser bezeichnen.
Im Prinzip funktioniert auch alles so.
Allerdings gibt es ein Problem, wenn ich in diesen Teaser ein Bild über den Tinymce einfüge (z.B. mit einer skalierten Größe von 120 x 80). Dann läuft das Bild immer aus dem Rahmen des Teaser-Contents, weil sich Größe (hier Höhe) offenbar nur an der Länge und damit am Platzbedarf des Textinhalts orientiert.
Ich habe über die News-CSS-Datei schon alle möglichen Einstellungen versucht, aber nichts klappt.
Was Einstellungen sind möglich ? Ggf. wo und wie ?
Last edited by Micha on Sat Nov 10, 2007 9:55 pm, edited 1 time in total.
cyberman

Re: News Summary Bild einfügen

Post by cyberman »

Kleiner Tipp - für die Zusammenfassung/Teaser gibt es ein eigenes Template, wo man alles ganz nach Wunsch einbauen kann :) ...
Micha

Re: News Summary Bild einfügen

Post by Micha »

Das vorgegebene Zusammenfassungs-Template mit dem Namen Sample habe ich mir natürlich angesehen.

{if $pagecount > 1}
 
{if $pagenumber > 1}
{$firstpage} {$prevpage} 
{/if}
{$pagetext} {$pagenumber} {$oftext} {$pagecount}
{if $pagenumber
{/if}

{foreach from=$items item=entry}



           
{$entry->titlelink}
           

            {if $entry->formatpostdate}

{$entry->formatpostdate}

            {/if}


           
{$category_label} {$entry->category}
           

            {if $entry->author}

{$author_label} {$entry->author}

            {/if}

            {if $entry->summary}

{eval var=$entry->summary}



[{$entry->morelink}]


            {else if $entry->content}


{eval var=$entry->content}

            {/if}

            {if isset($entry->extra)}
           
            {eval var=$entry->extra}
{* {cms_module module='Uploads' mode='simpleurl' upload_id=$entry-value}          *}
   
{/if}


{/foreach}

Es gibt nur den Punkt summary mit der class NewsSummarySummary, hier kommt alles rein, was man bei der Erstellung des News-Artikels in das Feld Zusammenfassung eingegeben hat, ob nun mit Text und/oder mit Bild. Wie soll man dann noch Einfluss nehmen können ? Es gibt ja kein eigenes Feld für das eingefügte Bild.
Stellt man für das Bild zum Beispiel Text oben oder links oder rechts ein und ist das Bild höher als der Text, fällt es aus dem Rahmen und überlappt die nächste darunter stehende News. Stellt Text unten ein oder ist der Text länger wird alles richtig dargestellt, ist dann aber Zufall, oder ?
cyberman

Re: News Summary Bild einfügen

Post by cyberman »

Micha wrote: Es gibt ja kein eigenes Feld für das eingefügte Bild.
Jain, es kommt nur darauf an, wie man es anstellt 8).

Der interessanteste Teil düfte dies hier sein:

Code: Select all

{if isset($entry->extra)}
   <div class="NewsSummaryExtra">
      {eval var=$entry->extra}
	{* {cms_module module='Uploads' mode='simpleurl' upload_id=$entry-value}           *}
   </div>
{/if}
In der neuesten Version findet sich im News-Modul bei der Eingabe eines Artikels ein Feld namens Extra, welches über den o.g. Teil in das Summary-Template eingefügt wird. Dort können Texte oder auch xhtml drin stehen ...

Wie du siehst, ist das ein div-Block und den kannst du im Template beliebig platzieren und formatieren.

Mal angenommen, du lädst die jpg-Bilder für den Teaser immer nach uploads/images/news/teaser, könntest du den o.g. Teil des Templates wie folgt ändern:

Code: Select all

{if isset($entry->extra)}
   <div class="NewsSummaryExtra">
      <img src="uploads/images/news/teaser/{eval var=$entry->extra}.jpg" />
	{* {cms_module module='Uploads' mode='simpleurl' upload_id=$entry-value}           *}
   </div>
{/if}
Wenn du jetzt in das Feld "Extra" z.Bsp. Faschingsauftakt eingibst, wird in dem div mit der Klasse "NewsSummaryExtra" (wo immer es sich auch befindet) das Bild uploads/images/news/teaser/Faschingsauftakt.jpg angezeigt ;).
Micha

Re: News Summary Bild einfügen

Post by Micha »

Das Extrafeld funktioniert schon wie von Dir beschrieben, so dass das Bild in einem gesonderten Feld erscheint.
Das hat aber gegenüber dem Einfügen über den Tiny im Feld Zusammenfassung (und auch im Content) die folgenden Nachteile:
1. Das Bild erscheint dann immer an der selben Stelle (beim Tiny kann ich die Position bei jeder News neu auswählen)
2. Man hat keinen Einfluss auf die Bildgröße (es wird immer die Datei genommen, so wie sie beim Upload erstellt wurde; beim Tiny kann ich die Größe wählen/angeben)
3. Der Autor sieht keine Vorschau und muss wissen, wie die Datei, die er vorher irgendwie separat hochgeladen hat (sinnigerweise eben über den Tiny) genau heisst.

Wenn man die Artikel alle selbst erstellt, vielleicht auch kein Problem.
Wenn ich aber an meine potentiellen Autoren denke, die einfach nur einen Artikel schreiben und dabei ein Bild von der eigenen Festplatte einfügen wollen, nicht praxistauglich.
Da ist es sicher einfacher, den Autoren zu erklären, dass sie bei der Texteingabe von kurzen Texten die Enter-Taste betätigen müssen, bis sie an der Bildunterkante angekommen sind. Auch nicht schön, aber einfacher.
Dass die Feldhöhe sich am eingefügten Bild bzw. am Gesamtinhalt orientiert, statt nur am Text, muss man doch irgendwie ändern können.
So wie jetzt hängt es jedenfalls in der Luft.
Oder ist das vielleicht ein Problem des Tiny ?
cyberman

Re: News Summary Bild einfügen

Post by cyberman »

Die Nachteile sehe ich so nicht
Micha wrote: 1. Das Bild erscheint dann immer an der selben Stelle (beim Tiny kann ich die Position bei jeder News neu auswählen)
Dann schau dir mal die News-Portale (z.Bsp focus.de) an - im Teaser ist das Bild IMMER an der gleichen Stelle.

Und gerade im Sinne einer gleichbleibenden Qualität des Layouts eines Artikels würde ich den Autoren an dieser Stelle keinen Zugriff auf die Bildposition gewähren.
2. Man hat keinen Einfluss auf die Bildgröße (es wird immer die Datei genommen, so wie sie beim Upload erstellt wurde; beim Tiny kann ich die Größe wählen/angeben)
Auch im Zeitalter von DSL eine der Todsünden eines Webdesigners.

Folgendes Szenario - Lieschen Müller nimmt mit ihrer 10 Megapixel-Kamera ein Bild von 4 MB auf, lädt es (unbearbeitet) auf die Seite hoch und stellt dann eine Größe von 300x200 Pixel ein.

Damit wird jedoch nur die Ausgabegröße (also so, wie das Bild auf der Webseite erscheint) mit der Angabe von 300x200 Pixeln eingestellt. Das Bild bleibt trotzdem 4 MB groß !!! Es wird KEINE Skalierung vorgenommen.

Das heisst erstens, dass die Besucher der Webseite 'ne ganze Weile sitzen, bis das Bild von 4 MB runtergeladen und auf dem Bidlschirm aufgebaut ist. Zweitens belastet es ganz enorm deinen Traffic. Und drittens überlässt du damit das Skalieren der Bilder dem Browser, was qualitativ alles andere als optimal ist.

Und das einfache Skalieren von Bildern wirst du doch deinen Autoren noch beibringen können, oder  ;)?! Das kannste sogar mit dem eingebauten CMSms-ImageManager machen.
3. Der Autor sieht keine Vorschau und muss wissen, wie die Datei, die er vorher irgendwie separat hochgeladen hat (sinnigerweise eben über den Tiny) genau heisst.
Naja, der Autor sollte schon wissen, welches Bild er einfügen möchte. Und der Name stellt kein wirkliches Problem dar - verwende einfach "sprechende" Bildnamen, also faschingsauftakt.jpg und nicht DSC0000123456.jpg  8).
Dass die Feldhöhe sich am eingefügten Bild bzw. am Gesamtinhalt orientiert, statt nur am Text, muss man doch irgendwie ändern können.
So wie jetzt hängt es jedenfalls in der Luft.
Oder ist das vielleicht ein Problem des Tiny ?
Im Prinzip ja. Tiny hat in der Basic-Version keine Option, um einen div einzufügen, den man mit entsprechenden CSS formatieren und positionieren kann. Und mit dem, was du meinst (Zitat: ... Stellt man für das Bild zum Beispiel Text oben oder links oder rechts ein und ist das Bild höher als der Text ...), produzierst du nur solchen Murks



Und das ist keine saubere Lösung und führt zu den dir bestens bekannten "Bildstörungen".

Eine andere Option wäre noch, dir ein separates Template für den Tiny zu bauen (hat rein gar nix mit den CMSms-Templates zu tun). Guckst du hier

http://wiki.moxiecode.com/index.php/Tin ... s/template
Micha

Re: News Summary Bild einfügen

Post by Micha »

OK, alles nachvollziehbare Gründe.
Dann müsste man aber den Bilderupload völlig vom Tiny trennen und für den Bilderupload im Backend Einstellungen machen können, die eine Beschränkung der Dateigröße und/oder Bildergröße zulassen. Das ganze dann unter Umständen auch noch getrennt für Benutzergruppen und mit getrennten Verzeichnissen für die Bilder, je nach Zweck (Teaser, Haupttext, Bildergalerie).
Für den Tiny sind solche Einstellungen wohl nicht möglich.
Ich werde mir also mal das Upload-Modul anschauen.  Oder gibt es noch was anderes ?

Als weiteren Nachteil des festen Bilder-DIV ist mir noch eingefallen, dass es sicher unschön aussieht, wenn man kein passendes Bild für den bestimmten Teaser zur Verfügung hat (vielleicht geht auch ein Platzhalterbild).
cyberman

Re: News Summary Bild einfügen

Post by cyberman »

Micha wrote: Dann müsste man aber den Bilderupload völlig vom Tiny trennen
Das könnte man sowohl mit der Bildverwaltung als auch mit dem Filemanager erledigen 8).
die eine Beschränkung der Dateigröße und/oder Bildergröße zulassen.
Da gibts in der config.php eine Einstellung dafür. Hat aber auch das Uploads-Modul.
Ich werde mir also mal das Upload-Modul anschauen. 
Das würde den Upload von Bildern via Frontend bedeuten. Über das FEU-Modul könntest du dann auch verschiedene Verzeichnisse/Kategorien vorgeben.
Als weiteren Nachteil des festen Bilder-DIV ist mir noch eingefallen, dass es sicher unschön aussieht, wenn man kein passendes Bild für den bestimmten Teaser zur Verfügung hat
Das Bild ist ja nicht grundsätzlich fest. Wie du (vielleicht) an meinem Beispiel sehen kannst

Code: Select all

{if isset($entry->extra)}
wird der div-Container nur dann eingeblendet, wenn das Feld Extra Inhalt hat ...
Post Reply

Return to “Layout und Design”