Bildtext

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
antibart
Power Poster
Power Poster
Posts: 1155
Joined: Sun Aug 17, 2008 9:29 am

Re: Bildtext

Post by antibart »

Chris_3 wrote:

Ich will möglichst einfach einen Bildtext zu einem Bild hinzufügen.
Soll heißen benutzerfreundlich, dass jeder Leihe das machen kann. Ich würde einfach nen Div machen und fertig. Aber das Problem ist, dass der Benutzer dies in dem WYSIWYG machen soll.
Du meinst sicher LAIE...



Das Album-Modul sollte alle deine Wünsche erfüllen. Es hat eine Uploadfunktion, eine Kommentarfunktion und Bilder können vergrößert werden. Auf Wunsch auch in einer Lightbox.

Alle anderen Lösungen über Tabellen, mehrere Contentblöcke oder über das News-Modul mit Bild als Extrafeld sind wohl zu komplziert. Es hängt natürlich davon auf welche Art und Weise Du die Bilder in den Inhalt einfügen willst.


Chris_3 wrote:Gibt es da eigentlich irgendeinen Eintrag oder ähnliches, der lange umständliche Einschulungen umgeht?
Diesen Satz verstehe ich nicht so ganz. Es gibt eine gut gegliederte Dokumentation zu CMSMS, die alles andere als umständlich ist. Zudem gibt es zu jedem Modul eine kurz, knapp und einfach gehaltene Hilfe-Seite und ein Wiki. Das Schöne an CMSMS ist doch, dass man eben auch ohne lange Schulungen schnell was hinkriegt. Wer mal mit Typo3 gearbeitet hat, weiß wohl, was ich meine. Ein kleines bißchen lesen und ausprobieren muss man natürlich auch bei CMSMS.
Chris_3 wrote: Kann man via Mausklick das Bild vergrößern z.b. in einem Anderen Fenster o.ä.?
Ja.... siehe oben: das Album-Modul kann das. Die Lightbox als eigenes Modul macht auch sowas in der Art. Die Möglichkeit, einzelne Dateien in einem neuen Fenster zu öffnen, gibt es über die "Externer Link"-Funktion im Editor natürlich ebenfalls....

...
Last edited by antibart on Sat Dec 13, 2008 8:11 am, edited 1 time in total.
antibart
Power Poster
Power Poster
Posts: 1155
Joined: Sun Aug 17, 2008 9:29 am

Re: Bildtext

Post by antibart »

Chris_3 wrote: Aber geht das denn nicht einfacher?
Dass ich einfach im WYGIYS ein Bild einfüge, darunter ein Bildtext und beim mouseclick() ein neues Fenster mit dem großen Bild kommt?
Ja sicher. Es funktioniert beinahe genau so, wie du es formulierst: Bild einfügen -> Text drunter oder daneben schreiben >Bild markieren > Link einfügen klicken > Reiter "Popup" auswählen" ... wieviel einfacher soll es noch gehen ? Es gibt leider keine Lösung, bei der das Bild von alleine weiß, dass es ein Link zu einem Popup oder ein Link zu einer Lightbox sein soll.... außer eben dem Album - Modul, dem Lightbox-Modul oder mit etwas Aufwand von Deiner Seite noch das Newsmodul mit dem Extrafeld.

Chris_3 wrote: Grundsätzlich - für mich als Web-Designer ist das keine Aufgabe einen Bildtext hinzufügen etc. Aber wenn ich das einem Laien (sry für meinen Tippfehler ;-) ) erklären muss, fragt der mich ob ich blöd bin und ob das denn nicht viel einfacher geht?!
Du als Webdesigner weisst Du dann aber sicher auch, was rein technisch gebraucht wird, um ein Bild mit einem neuen Fenster / Lightbox zu verlinken und welche Möglichkleiten es gibt, Text um, unter und neben eine Bild fließen zu lassen. Welche davon Du der Sekretärin zumuten kannst, musst Du da selbst entscheiden. Möglichkeiten gibt es da wie gesagt mehrere (Lightbox-Modul, externer Link mit neuem Fenster, News-Modul, Album, mit oder ohne Tabellen oder Divs). Welches die richtige ist, hängt dann nicht zuletzt auch vom Konzept oder Seite ab.
Last edited by antibart on Mon Dec 15, 2008 9:08 am, edited 1 time in total.
cyberman

Re: Bildtext

Post by cyberman »

Chris_3 wrote: Aber wenn ich das einem Laien (sry für meinen Tippfehler ;-) ) erklären muss, fragt der mich ob ich blöd bin und ob das denn nicht viel einfacher geht?!
Geht nicht, gibts (fast) nicht  ;D.

OK, hier meine Sekretärinnen-freundliche Lösung (beispielhaft für Lightbox1):

Code: Select all

{* sekretärin beginn *}
{content block='Bildunterschrift' wysiwyg='false' oneline='true' assign='caption'}
{if $caption != ''}
<div class="thumbnail">
<a href="{content_image block='Bild-groß' dir='images' urlonly='true'}" rel="lightbox" title="{$caption}">{content_image block='Bild' dir='images' alt=$caption}</a>
   <div class="caption">{$caption}</div>
</div>
{/if}
{* sekretärin ende *}
PS: Der Parameter urlonly für den content_image Tag war aus mir unbekannten Gründen bislang nicht in der Tag-Hilfe. Ist nun ergänzt.
User avatar
hibr
Forum Members
Forum Members
Posts: 73
Joined: Fri Feb 08, 2008 11:22 pm

Re: Bildtext

Post by hibr »

Chris_3 wrote: Ich will möglichst einfach einen Bildtext zu einem Bild hinzufügen.
Soll heißen benutzerfreundlich, dass jeder Leihe das machen kann. Ich würde einfach nen Div machen und fertig. Aber das Problem ist, dass der Benutzer dies in dem WYSIWYG machen soll.

Gibt es da eigentlich irgendeinen Eintrag oder ähnliches, der lange umständliche Einschulungen umgeht?

Achja, was ich noch fragen wollte:
Kann man via Mausklick das Bild vergrößern z.b. in einem Anderen Fenster o.ä.?
Ich verwende für diesen Zweck das Plugin "Imagecaptions".

http://dev.cmsmadesimple.org/projects/imagecaptions

Nimmt den ALT- oder TITLE-Text des Bildes (den man über WYSIWYG-Bild-Einfügen-Funktion des TinyMCE eingeben kann) als Bildunterschrift. Die mit beigelegte CSS-Datei liefert schon schöne Resultate, kann man aber natürlich noch anpassen. Ob ein Bild eine Beschreibung erhält oder nicht und ob das Bild zentriert, links oder rechts im Text erscheinen soll, wird durch das Setzen der Klasse caption (Bild mittig), leftcaption (Bild links) oder rightcaption (Bild rechts) in der Bild-Einfügen-Dialogbox des TinyMCE festgelegt. Wird keine Klasse festgelegt, bekommt das Bild keine Beschreibung.

Um ein größeres Bild beim Daraufklicken anzuzeigen, verwende ich die "externe Link einfügen" Funktion (Kettensymbol in der Symbolleiste) des TinyMCE.

Bei dieser 2-stufigen Vorgehensweise muss dein Redakteur keine Zeile Code eingeben und kann alles über die WYSIWYG Benutzerschnittstelle des Editors realisieren.

Beispiel:
http://www.daec-duesseldorf.de/news/13/ ... imbel.html

Gruß Hani

PS: Lies dir die Hilfe gut durch.
1.) jQuery runterladen und jquery.js per FTP in dein Webspace kopieren, z.B. /lib.
2.) imagecaptions.php runterladen und ins /plugins Directory kopieren.
3.) CSS Datei von imagecaptions runterladen und den Inhalt der Datei in ein neues Stylesheet unter Layout->Stylesheets eintragen und das Stylesheet mit deinen/deinem Template(s) verbinden.
4.) zwischen {literal} und {/literal} im head-Bereich deines Templates/deiner Templates eintagen.
5.) {imagecaptions} im head Bereich deines Templates eintragen. (ACHTUNG: Nicht zwischen den literal-Tags!)
6.) Fertig, den Rest machen deine Redakteure über WYSIWYG.

PPS: ImageCaptions erzeugt einige XHTML-Fehler. Du musst nur zwei Zeilen in imagecaptions.php ändern, um das abzustellen:

Gebe die nachfolgende Zeile

Code: Select all

echo '<!--' . "\n";
nach dieser Zeile

Code: Select all

echo '<__script__ type="text/javascript">' . "\n";
ein und gebe

Code: Select all

echo '-->' . "\n";
vor der Zeile:

Code: Select all

echo '</__script>' . "\n";
ein.
Last edited by hibr on Sat Jun 20, 2009 7:52 pm, edited 1 time in total.
Hanis Sammelsurium - How To's, Erfahrungs- und Meinungsberichte
nockenfell
Power Poster
Power Poster
Posts: 751
Joined: Fri Sep 12, 2008 2:34 pm
Location: Schweiz / Switzerland

Re: Bildtext

Post by nockenfell »

Danke für die Anleitung Hani. Die von dir beschriebene und genutze Konfiguration mit imagecapture und floatbox funktioniert tadellos.
[this message is written with 100% recycled bits]
nicmare
Power Poster
Power Poster
Posts: 1150
Joined: Sat Aug 25, 2007 9:55 am
Location: Berlin

Re: Bildtext

Post by nicmare »

cyberman wrote:

Code: Select all

{* sekretärin beginn *}
{content block='Bildunterschrift' wysiwyg='false' oneline='true' assign='caption'}
{if $caption != ''}
<div class="thumbnail">
<a href="{content_image block='Bild-groß' dir='images' urlonly='true'}" rel="lightbox" title="{$caption}">{content_image block='Bild' dir='images' alt=$caption}</a>
   <div class="caption">{$caption}</div>
</div>
{/if}
{* sekretärin ende *}
hey cyber,
nen echt cooles snippet! ich mag die Einfachheit. CMSMS ist echt nett :D
Aber die Fotoauswahl ist leider grenzwertig da einem ja im Backend nur die Dateinamen zur Verfügung stehen und keine Uploadfunktion oder so. Also für "dumme" Sekretärinnen auch nicht optimal.
nockenfell
Power Poster
Power Poster
Posts: 751
Joined: Fri Sep 12, 2008 2:34 pm
Location: Schweiz / Switzerland

Re: Bildtext

Post by nockenfell »

Für "dumme" Sekretärinnen bietet sich imagecaptions in Verbindung mit einem Lightbox Plugin an:

http://wiki.cmsmadesimple.org/index.php/User_Handbook/Admin_Panel/Tags/imagecaptions

Um ein Lightbox Plugin zu benutzen muss noch folgendes im Header eingefügt werden. (Das Beispiel baut auf Lytebox)

Code: Select all

<__script__ type="text/javascript" language="javascript" src="lytebox_v3.22/lytebox.js"></__script>
<link rel="stylesheet" href="lytebox_v3.22/lytebox.css" type="text/css" media="screen" />

<__script__ type="text/JavaScript">
<!--
jQuery(function($) {
$("a[href$='.jpg']").attr( {rel: "lytebox[page]"});
$("a[href$='.jpeg']").attr( {rel: "lytebox[page]"} );
$("a[href$='.gif']").attr( {rel: "lytebox[page]"} );
$("a[href$='.png']").attr( {rel: "lytebox[page]"} );
$("a[href$='.JPG']").attr( {rel: "lytebox[page]"} );
$("a[href$='.JPEG']").attr( {rel: "lytebox[page]"} );
$("a[href$='.GIF']").attr( {rel: "lytebox[page]"} );
$("a[href$='.PNG']").attr( {rel: "lytebox[page]"} );
});
//-->
</__script>
Webseite von Lytebox

Voraussetzung das oben stehender JavaScript Code funktioniert, ist eine eingebundene jquery Library.
Die Sekretärin muss somit zwei Bilder haben: Das Detailbild und das Thumb. Zuerst fügt sie das Thumbnail in den Text ein und platziert mittels Style das Bild mit dem Text-Container. Unter Bemerkung gibt sie den Bildtext an.

Danach fügt sie einen Link auf das Detail Bild ein. Hier gibt sie den Titel an, damit beim Detailbild ein Text angezeigt wird.

Fertig.

Eine Demo des ganzen gibt es hier:

http://www.blattertech.ch/faq/tutorials/lightbox/lytebox.html
[this message is written with 100% recycled bits]
nicmare
Power Poster
Power Poster
Posts: 1150
Joined: Sat Aug 25, 2007 9:55 am
Location: Berlin

Re: Bildtext

Post by nicmare »

nockenfell wrote:

Code: Select all

<__script__ type="text/JavaScript">
<!--
jQuery(function($) {
$("a[href$='.jpg']").attr( {rel: "lytebox[page]"});
$("a[href$='.jpeg']").attr( {rel: "lytebox[page]"} );
$("a[href$='.gif']").attr( {rel: "lytebox[page]"} );
$("a[href$='.png']").attr( {rel: "lytebox[page]"} );
$("a[href$='.JPG']").attr( {rel: "lytebox[page]"} );
$("a[href$='.JPEG']").attr( {rel: "lytebox[page]"} );
$("a[href$='.GIF']").attr( {rel: "lytebox[page]"} );
$("a[href$='.PNG']").attr( {rel: "lytebox[page]"} );
});
//-->
</__script>
eure sekretärinnen sind eindeutig noch zu schlau! :D bilder IN TEXT einfügen ist viel zu fehleranfällig. da können die viel zu viel zerschießen. Daher sollten Text und Bilder im Backend autark bzw unabhängig von einander laufen. im Frontend kann das eine ja im anderen floaten!
im übrigen geht das obige auch einfacher:

Code: Select all

$("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png'], a[href$='.JPG'], a[href$='.JPEG'], a[href$='.GIF'], a[href$='.PNG']").attr( {rel: "lytebox[page]"});
nockenfell
Power Poster
Power Poster
Posts: 751
Joined: Fri Sep 12, 2008 2:34 pm
Location: Schweiz / Switzerland

Re: Bildtext

Post by nockenfell »

Den Code könnte man noch weiter vereinfachen in dem man den a href String in Kleinbuchstaben umwandelt. Zumindest diesem Code entsprechend (der ja wahrscheinlich kein jquery Code zu schein scheint):

Code: Select all

function onload_func() {
    var links = document.getElementsByTagName("a");
            
    for (i=0; i<links.length; i++) {
        if ( 
            (links[i].getAttribute('href').toLowerCase().indexOf('.jpg') > -1) ||
            (links[i].getAttribute('href').toLowerCase().indexOf('.gif') > -1)
           ) links[i].setAttribute('rel','lytebox[test]');
    }
    initLytebox();
}  
Da ich mit jquery noch zu wenig Erfahrung habe, habe ich mich noch nicht dahinter gesetzt. Ev hast du die Idee wie man das noch weiter vereinfachen kann.

Bezüglich den Sekretärinnen:
Nur schon der Text kann "verschossen" werden. Insofern kommt es auf die Bilder auch nicht mehr an. Bisher hatte ich jeweils zwei Arten von Kunden: Bei den einen siehts immer Scheisse aus und bei den anderen klappts. Die erste Gruppe bekommst du auch mit reinem Text nicht dahin wo sie sein sollten. (Da wird an Schriftgrösse, Schriftart, direkt Kopien formatiert aus dem Word, etc gearbeitet)
[this message is written with 100% recycled bits]
Post Reply

Return to “Layout und Design”