WebsiteBaker Community Forum

WebsiteBaker Support (2.12.x) => General Help & Support => Hilfe & Support (deutsch) => Topic started by: astricia on February 08, 2019, 07:04:17 PM

Title: FG - Zusätzliche Klasse bei den Bildern?
Post by: astricia on February 08, 2019, 07:04:17 PM
Hallo zusammen,

ich sitze gerade an der Website für einen Künstler. Auf der Seite, wo er seine Gemälde vorstellt, möchte er gerne die Gemälde, die bereits verkauft sind, mit einem roten Punkt markieren, so wie auch bei Ausstellungen üblich.

Gibt es irgendeine Möglichkeit, in der Foldergallery (3.0.14) ein zusätzliches Feld (Typ Checkbox) zu integrieren? Wenn man dieses anklickt, wird dann dem entsprechenden Bild (sowohl in der Thumbnail-Darstellung als auch in der Lightbox-Darstellung) eine zusätzliche Klasse hinzugefügt. Diese Klasse könnte ich dann per CSS so definieren, dass ein roter Punkt darüber gelegt wird.

Könnte mir da jemand helfen?

LG,
Astrid
Title: Re: FG - Zusätzliche Klasse bei den Bildern?
Post by: Gast on February 09, 2019, 12:26:27 AM
Grundsätzlich gibt es wohl keine Lösung mit Bestand, soll heißen: alles, was man hier jetzt umbaut, wäre im nächstem Upgrade verschwunden. Ich hab das gerade durch mit meiner Bildersuche, macht keinen Spaß...

zum Vorhaben selbst:
in der Foldergallery gibt es wohl nur die Möglichkeit, in die Kategorieverwaltung einzugreifen, dort, wo die Bildtitel und Beschreibungen eingetragen werden. Anzulegen wäre ein zusätzliches Feld mit Namen "class" (abhängig von der endgültigen Lösung, die ja auch auf einer DIV-ID beruhen könnte) in der Tabelle mod_foldergallery_files,
Die modules/foldergallery/admin/modify_cat.php wäre die entsprechende Datei zum Erweitern. Der Bearbeitungsvorgang wäre analog dem Bildtitel, hier schauen, wie der Bildtitel "img_title" angewendet wurde, der ist nämlich genau so entstanden.

Für's Speichern gilt das Gleiche, Datei wäre hier die  modules/foldergallery/admin/save_files.php

Bis hierher nur "Copy&Paste". Wer halbwegs PHP-Code lesen und verstehen kann, sollte keine Probleme bekommen. Wer da aber Angst hat, besser die Finger von lassen, sonst geht eventuell garnichts mehr.

dann kommt das Knifflige
Ich persönlich verwende ausschließlich die Colorbox. Um das Original nicht zu vermurksen, würde ich mit einer Kopie der Lightbox beginnen

Ordner modules/foldergallery/templates/default die entsprechende Datei view_.......htt sowie den Ordner dazu im js-Ordner kopieren und umbenennen, in meinem Fall eben die view_colorbox.htt und den Ordner js/colorbox

Eine Lösung wäre wohl, transparente PNG-Dateien mit diesem Punkt anzufertigen, je eines für Thumb und Großbild, das man dann anstelle des Bildes anzeigt, das eigentliche Bild wäre dann das Background-Image dazu, so hab ich das mal mit einem "Wasserzeichen" gemacht.
Eine andere Möglichkeit wäre, mittels CSS zu zeichnen. So oder so braucht es aber mindestens eine Einstellungsmöglich keit in der Bilderverwaltung.
Den entsprechenden Code der gewählten Lösung am besten in einer separaten HTML-Datei testen mit Thumb und Großbild, wie es die FG verlangt. So kann man dann die htt-Datei entsprechend anpassen.

Vorletzter Punkt wäre die view.php. Hier ist wieder das Prinzip des Bild-Titels, der nachträglich eingefügt wurde.

Zu allerletzt dann in den FG-Einstellungen die "neue" Lightbox auswählen.

Hört sich alles einfach an und der Copy&Paste-Job wäre vielleicht in einer Stunde erledigt. Länger braucht es wohl, die Details der Darstellung auszuknobeln. Ich würde wohl über oben beschriebene Methode eine CSS-Klasse hinzufügen. In der view.php muß ich diese Klasse dann noch mal unterscheiden in Thumb und Großbild. Zu beachten wären dann noch unterschiedliche Darstellungsgrößen, das responsive Verhalten des jeweiligen Punktes, aber das soll ja in der separaten Test-Datei ausprobiert werden.

Ein paar Links auf die Schnelle

https://www.mediaevent.de/css/transition.html
https://www.youtube.com/watch?v=R7OcJyL_rbw

Und wie gesagt, beim nächsten Upgrade oder Überschreiben der Dateien ist alles verschwunden, zumindest in den PHP-Dateien.
Außer OFA fällt mir aber kein anderes, verfügbares Modul ein, das erlauben würde, eine individuelle Checkbox anzulegen.

Title: Re: FG - Zusätzliche Klasse bei den Bildern?
Post by: dbs on February 09, 2019, 08:13:28 AM
Vielleicht geht es auch, wenn man dem Bild in Titel oder Beschreibung ein Keyword mitgibt, zB. "verkauft".
Per jQuery liest man das aus und gibt bei Treffer dem Bild eine Klasse. Dann darf CSS ran.
Ungetestet.
Title: Re: FG - Zusätzliche Klasse bei den Bildern?
Post by: astricia on February 09, 2019, 01:54:29 PM
Danke für eure Tipps.

Ich bin jetzt wie folgt vorgegangen:

1. Habe die gewünschte Lightbox (Responsive Lightbox) kopiert (also die htt-Datei in templates/default und den ganzen Ordner von templates/default/js)

2. Dann habe ich die view.php so angepasst, dass ich in der Eingabe sowohl Bildtitel als auch Bildbeschreibung nutzen kann (ich habe nie verstanden, warum immer nur eins davon nutzbar ist...). Habe also lediglich in Zeile 645 ein
Code: [Select]
'IMGTITLE' => $bildfilenamehinzugefügt, damit ich auch eine Variable für den Bildtitel habe (diese wurde vom Code sonst überschrieben, wenn ich den PHP-Code richtig verstanden habe...)

3. Dann habe ich die htt-Datei so angepasst, dass der Bildtitel auf der Thumbs-Übersicht mitgezeigt wird, also
Code: [Select]
                    <li class="imgbox">
                        <a href="{ORIGINAL}" data-caption="{CAPTION}"  data-rel="boudi" >
                            <img src="{THUMB}" alt="{CAPTION}" style="width: {CATWIDTH}px; height: auto;" />
                        </a><p class="imgtitle">{IMGTITLE}</p>
                    </li>

4. In das Feld Bildtitel kommt jetzt, immer dann, wenn ein Bild verkauft ist, der Code
Code: [Select]
<img src='../../media/img/sold.png' class='sold' />rein. Ich denke, das werde ich dem Kunden erklären können - muss er ja dann nur durch Copy und Paste ersetzen. Die Grafik sold.png ist dabei ein roter Punkt auf transparentem Hintergrund, Größe 16 x 16px.

5. Die CSS-Klasse imgtitle ist dabei relativ irrelevant, entscheidender ist die CSS-Klasse "sold". Diese habe ich (bei Thumbnails von 150 x 150px) wie folgt definiert:
Code: [Select]
.sold {
width: 16px !important;
position: relative;
top: -150px;
float: right;
}
(Das fand ich jetzt gar nicht knifflig. war eigentlich ziemlich einfach...)
Und schon klappt das. Die Großbild-Ansicht ist dabei irrelevant, der rote Punkt sollte nur in der Galerie-Ansicht zu sehen sein. Steht so oben rechts, wie gewünscht.

Einzig das view.php würde halt bei einem Update überschrieben und dann gäbe es ggf. gar keinen Inhalt mehr zu {IMGTITLE}. Aber genau deswegen habe ich das jetzt hier dokumentiert, um das später wieder nachlesen zu können.... ;-)

Vielleicht erbarmt sich ja jemand beim nächsten Update und sorgt dafür, dass es dafür auch generell eine nutzbare Variable gibt.... Es macht nämlich durchaus Sinn, sowohl Titel als auch Beschreibung nutzen zu können. Wenn ich den relativ kurzen Titel des jeweiligen Bildes jetzt auch noch in das Feld "Bildtitel" reinsetze, dann wird es mir unterhalb der Bilder in der Galerieansicht mit angezeigt. Bei der Großansicht wird dann eine ausführlichere Bildbeschreibung angezeigt, die dann auch noch Größe des Bildes, Maltechnik, Preis etc. beinhalten kann.

LG,
Astrid
Title: Re: FG - Zusätzliche Klasse bei den Bildern?
Post by: Gast on February 09, 2019, 03:19:53 PM
Quote
Vielleicht erbarmt sich ja jemand beim nächsten Update und sorgt dafür, dass es dafür auch generell eine nutzbare Variable gibt.... Es macht nämlich durchaus Sinn, sowohl Titel als auch Beschreibung nutzen zu können. Wenn ich den relativ kurzen Titel des jeweiligen Bildes jetzt auch noch in das Feld "Bildtitel" reinsetze, dann wird es mir unterhalb der Bilder in der Galerieansicht mit angezeigt. Bei der Großansicht wird dann eine ausführlichere Bildbeschreibung angezeigt, die dann auch noch Größe des Bildes, Maltechnik, Preis etc. beinhalten kann.

"Jemand" ist gut - das liegt in Dietmar's Hand. Hat sich damals nicht bewährt, das alle Näse lang ein anderer mal etwas ändert und dann veröffentlicht, meist sogar unter der gleichen Versionsnummer

Beim Titel hab ich mal meine vorhandenen Versionen durch geschaut. Wie gesagt, wurde der Title-Tag ja erst mit den ersten 2er-Versionen eingefügt, davor gab es nur die Caption, also Beschreibung. Und seit der Einführung gab es auch diese Schaltung: wenn eine Beschreibung da ist, verwende diese Beschreibung an Stelle des Titels. Ist auch kein Titel vorhanden, verwende den Dateinamen.
In einer privaten Version hab ich das mal so umgestellt, analog deiner Vorgehensweise. Der Titel im title-tag des Links, die Beschreibung im Bild

Aus heutiger Sicht frag ich mich auch, warum wir die Platzhalter nicht so zur Verfügung gestellt haben   :roll: :oops: :roll:
einmal als behandelter TITLE und einmal als ORIG_TITLE (wie er gespeichert wurde), das Gleiche für die Beschreibung, CAPTION und ORIG_CAPTION,
dann steht es jedem frei, zu verwenden, was er möchte und brauch.

Und auch ein zusätzliches Feld ist da nicht unbedingt falsch. Ein frei definierbares Textfeld, in das man einen Klassennamen einträgt. Sicherer wäre ein Auswahlfeld mit vordefinierten Klassen, dann kann niemand was verkehrtes Eintippen.

Mal schauen, was der Meister sagt.....