Neues Modul in Entwicklung: Foldergallery

[BlackBird]

Sprachdatei -> Verzeichnis languages
view.htt -> das ist ein Template mit Platzhaltern; ich bin sicher, Du findest die richtige Stelle ohne weiteres

[mailts]

Hallo BlackBird,

vielen Dank. Ich hatte zwar erst die Sprachdatei des WB in Arbeit und nicht die der FG, aber der Fehler war schnell erkennbar. 
Jetzt verbleibt eigentlich nur das Problem, dass lange Ordnernamen für zweizeilige Unterschriften der Thumbs sorgen.
Diese ragen über den unteren Rand hinaus und verdrängen das darunter stehende Bild nach rechts.

Viele Grüße
Gerald

[BlackBird]

Schrift kleiner machen? (frontend.css)
Oder Ordnernamen weglassen? (view.htt)

[mailts]

Hallo BlackBird,

geht beides im Grunde nicht. Die Unterschriften sind unverzichtbar (wissenschaftliche Namen von Fischen) und wenn ich die Schrift noch kleiner mache, kann sie keiner mehr lesen.

Viele Grüße
Gerald

[BlackBird]

Naja, dennoch ist es ein Layout-Problem, kein Programmierproblem. Was war denn vorher anders? (alte Version) Kann man sich das irgendwo angucken?

[mailts]

Hallo BlackBird,

unsere Seite mit der alten FG 0.2.2 kann man sich nicht mehr ansehen, da ich das Modul ersetzt habe. Ja es sah anders aus - der Effekt, dass die lange Bildunterschrift andere Bilder verdrängt war nicht da. Dies kann man sich unter "w ....irg-online.de/pages/galerie.php" ansehen.

Viele Grüße
Gerald

[BlackBird]

Mach mal in der frontend.css Klasse .thumbwrapper die Einstellung für height etwas größer. (200px sehen bei mir ganz okay aus.)

Edit: Schöne Seite übrigens.

[mailts]

Hallo BlackBird,

sehr gute Idee, super und vielen Dank. Jetzt ist der Platz für lange Bildunterschriften ausreichend. Jetzt kann ich anfangen die einzelnen Bilder wieder zu beschriften.

Ebenso Danke für die Einschätzung zur Seite. Allerdings ist nur der Inhalt von mir. Das schöne Template ist von Peter Kämpf aus Erfurt.

Viele Grüße
Gerald

[mailts]

Hallo zusammen,

und noch eine Frage - wo verändere ich die vertikale Ausrichtung der Bildunterschriften (unter den Thumbs) innerhalb der Ordner (also nicht auf der ersten Ebene, der Startseite der Galerie).
Hintergrund der Frage - ich habe jetzt zwar hinreichend Platz im Fenster (dank des Spitzentipps)  , aber zweizeilige Unterschriften laufen dort auch aus dem Rahmen heraus.

Vorab vielen Dank und Grüße
Gerald

[BlackBird]

Klasse .thumb-caption
Kommentier mal "height: 15px" aus.
Edit: Zusätzlich auch noch "line-height: 15px" - bringt auch noch ein oder zwei Pixel

Sieht danach bei mir okay aus.

[mailts]

Hallo BlackBird,

vielen Dank. Auch das hat funktioniert. Ich war mir nicht sicher, ob man das Semikolon mit herauskommentieren muss, aber es scheint richtig zu sein, denn die Unterschriften sind jetzt nach oben in den Rahmen hinein gerutscht.
Hast Du noch eine Erklärung, warum einzeilige Unterschriften linksbündig, zweizeilige hingegen zentriert angeordnet sind?

Viele Grüße
Gerald

[BlackBird]

Würd gerne nachgucken, aber Deine Seite streikt bei mir gerade.

So, geht wieder. Das ist ein span. Ein span ist standardmäßig immer so breit wie sein Inhalt. Wenn man Inhalt in einem Block zentriert, der genauso breit ist wie der Inhalt, sieht man nichts davon. Man müßte also entweder den span so verbreitern, daß er so breit ist wie der übergeordnete Block, oder man zentriert den span selbst.

Konkret heißt das:

Code:

span.thumb-caption {
    width:100%;
}

(Auf das Wesentliche reduziert, also nicht den Rest löschen, der vorher da stand. )

[mailts]

Hallo BlackBird,

von der Funktion eines Span her, verstehe ich es (glaube ich). Nur was soll ich ändern? Die Zeile "width : 100%" habe ich dort stehen. Genau unter den beiden herauskommentierten Zeilen "line-height" und "height".

Viele Grüße
Gerald

[BlackBird]

Also wenn Du es richtig gemacht hast, sollte der span jetzt so breit sein, wie der übergeordnete Block. Und damit wiederum wird auch der einzeilige Text zentriert.

Edit: Laut Firebug steht dort keine width-Anweisung. Prüfe es nochmal genau nach.

Edit2: Du hast mit /.../ auskommentiert. Richtig ist /* ... */. Vielleicht liegt es daran. Alle nachfolgenden Anweisungen sind ungültig.

So ist es richtig:

Code:

div.thumbnail span.cat-caption,
div.thumbnail span.thumb-caption
{
    position             : absolute;
    bottom               : 0;
    left                 : 0;
    /*line-height          : 15px;*/
    /*height               : 15px;*/
    width                : 100%;
    text-align           : center;
}

[mailts]

also bei mir sieht das im Moment so aus

div.thumbnail span.cat-caption,
div.thumbnail span.thumb-caption
{
    position             : absolute;
    bottom               : 0;
    left                 : 0;
    /line-height          : 15px;/
    /height               : 15px;/
    width                : 100%;
    text-align           : center;

Viele Grüße
Gerald

[BlackBird]

Äh guckst Du oben. Hat sich überschnitten.

[mailts]

Hallo BlackBird,

ja es hat sich überschnitten. Vielen, vielen Dank jetzt stimmt es.
Ich habe vorhin beim herauskommentieren, nachgesehen wie es in anderen Zeilen gemacht wurde und habe dabei die Sterne für Bestandteile des Texts gehalten.

Viele Grüße
Gerald

Gibt es nicht irgendwo im Internet ein schönes Tutorial zu CSS - für Leute mit IT-Beruf aber ohne Entwickler-Kenntnisse, für gelegentliche Anwendungen.

[dbs]

leute mit it-beruf sollten doch schon mal was von google gehört haben. 

http://www.css4you.de/

[BlackBird]

Ansonsten immer wieder gern empfohlen: Firebug. (Plugin für Firefox.)

[mailts]

Hallo,

Google? Kenne ich - ja  

Mal ohne Flax. Über die Seite habe ich irgendwann einmal drüber geschaut, wahrscheinlich CSS-Referenz gelesen und wieder zugemacht. Jetzt habe ich aber entdeckt, dass es einen Workshop für Einsteiger gibt. Den werde ich mir einmal ansehen.

Viele Grüße Gerald

[chio]

Jepp, jetzt hab ich mir das Teil wieder mal angeschaut. Am localhost (PHP 5 usw).

Wenn ein Folder sehr große Bilder enthält, schmiert das Teil ab. "Groß" = ab 10 MegaPixel oder 2 Mb
Verschmerzbar, aber ein Hinweis wäre nicht schlecht.

Den Ordner kann ich zwar löschen - zumindest verschwindet er aus der Liste. Aber er ist immer noch da - und taucht auch wieder auf. Ergo: Schmiert wieder ab.

Ich denke, ich bin nicht der einzige, der wie der Ochs vorm Bildschirm sitzt...

Eine mögliche Lösung (Vorschlag):
Vor der Ausgabe sowas in den Code (if $wb -> isauthenticated..):
<div id="fg_startoutput">Ausgabe wird berechnet</div>
//Jetzt Ausgeben, dann:
<script..>
document.GetElement ByID("fg_startoutput").style.display = none;
</script>

Oder überhaupt vorher checken, wie groß die Bilder sind...

[Olli]

ich finde diese gallery-art seeeehr cool. danke erstmal dafür.
außerdem möchte ich gern', dass die bilder nicht aus dem document-root des apache erreichbar sind, damit man die bilder nicht hotlinken kann.

meint ihr es klappt einen bilderpfad zu nutzen, der nicht im document root liegt sondern darunter?
habe auch gerade gesehen, dass man hotlinking mit htaccess verhindern kann. ggf. reicht das ja schon aus.

außerdem wollte ich gern einen java-uploader mit integrierem picture upload einbauen, etwa diesen hier:

http://jupload.sourceforge.net/

sieht zwar nicht so toll aus das teil, aber die funktionalitäten fände ich sehr praktisch.

ich müßte das teil die nächsten tage fertig haben und poste es dann hier.
wäre toll wenn diese funktionen dann mit aufgenommen würden in die aktuelle version, damit die arbeit nicht umsonst war.

viele grüße

[jrast]

Hallo zusammen!

Ich bin also auch wieder hier und möchte als erstes mal zwie drei Dinge loswerden:
Ich bin momentan sehr viel Unterwegs und habe einige Projekte am laufen, welche meine Zeit für die Foldergallery sehr einschränken. Vorallem bin ich momentan nicht mehr sehr oft am Programmieren, was sich dann auch auf die Geschwindigkeit und den Durchblick beim Coden auswirkt. Trozdem möchte ich aber die Foldergallery nicht aus den Augen verlieren und daran arbeiten. Ich möchte mich an dieser Stelle bei allen entschuldigen, welche auf die Foldergallery1.0 warten, denn das wird noch eine Weile daueren. Ich hoffe ihr habt dafür Verständniss und nehmt mir dass nicht übel, denn es ist doch meine Freizeit die ich dafür opfer.

So, nun aber zu einer erfreulichen Nachricht:
Ich habe im Rahmen einer Homepage ein Droplet entwickelt für die Foldergallery. Dieses Droplet zeigt ein Vorschaubild an, hinter welchem sich die ganze Kategorie versteckt.

Hier mal den Code:

Code:

global $database;
// Header bearbeiten, damit JS vorhanden ist
$wb_page_data = str_replace('</head>',
'<script type="text/javascript">
shutterSettings = {
imgDir : "'.WB_URL.'/modules/foldergallery/scripts/shutter/images/",
imageCount : 1,
textBtns : 0
},

shutterOnload = function(){
shutterReloaded.Init();
}
</script>
<script type="text/javascript" language="javascript" src="'.WB_URL.'/modules/foldergallery/scripts/shutter/shutter.js"></script>
<link href="'.WB_URL.'/modules/foldergallery/scripts/shutter/shutter.css" rel="stylesheet" type="text/css" />
<link href="'.WB_URL.'/modules/foldergallery/frontend.css" rel="stylesheet" type="text/css" /></head>', $wb_page_data );

// Daten aus Datenbank laden
$sql = 'SELECT file_link, thumb_link, file_name, caption FROM '.TABLE_PREFIX.'mod_foldergallery_files WHERE parent="'.$cat.'" ORDER BY RAND();';
$query = $database->query($sql);
while($image = $query->fetchRow()){
$images[] = $image;
}


$ausgabe = '';
$display = true;

if(!isset($preview)){
$preview = $images[0][file_name];
}

foreach($images as $image) {
if($display && $preview == $image[file_name]){
$ausgabe.= '<div class="thumbwrapper">';
$display = false;

} else {
$ausgabe.= '<div class="thumbwrapper" style="display: none">';
}
$ausgabe.= '  <div class="thumbnail">';
$ausgabe.= '    <a href="'.$image[file_link].'" title="'.$image[caption].'" class="shutterset_'.$cat.'">';
$ausgabe.= '      <img src="'.$image[thumb_link].'" alt="'.$image[caption].'" />';
$ausgabe.= '      <span class="thumb-caption">'.$image[caption].'</span>';
$ausgabe.= '</a></div></div>';
}

return $ausgabe;

Anwendung:
[[foldergallery?cat=kategorie&preview=vorschaubild]]

cat --> Welche Kategorie angezeigt werden soll
preview --> Welches bild der Kategorie als Vorschaubild angezeigt werden soll (optional)

Beispiele:
[[foldergallery?cat=/Bilder]]   --> zweigt ein Zufälliges Vorschaubild an, bei Klick darauf öffnet sich die Bildergallerie der Kategorie Bilder
[[foldergallery?cat=/Bilder&preview=haus.jpg]]  --> zeigt haus.jpg als Vorschaubild an, bei Klick die Bildergallerie mit Kategorie Bilder

Einschränkungen: Da ich momentan auf meiner Homepage Shutter verwende funktioniert dieses Droplet nur mit der Shutter Lightbox. Es sollte aber relativ leicht aus dem Code ersichtlich sein, wie man den Code anpassen muss, damit er auch mit anderen Scripts funktioniert.

Gruss Jürg

[TN]

So, die Umlautefrage hat sich auch erledigt.

Lösung ist nicht im Modul zu suchen.
Siehe auch

http://www.websitebaker2.org/forum/index.php/topic,17882.msg122152.html#msg122152

Der Default-Zeichsatz war NICHT UTF-8.
Also Default-zeichsatz auf UTF-8 eingestallt und schon klappt das.

Hat ein wenig - und mehrere verschiedene 'Umlaute'-Probleme gedauert.

Ist nicht wirklich schön in der Installationsroutin e (weil gar nicht!) gelöst

[Olli]

habe gerade noch eine java-uploader gefunden, der danach schreit hier integriert zu werden 

http://jumploader.com/

werde es die nächsten tage mal angehen...