WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 07.11.2017 21:58:58

bastie
Mitglied

MiniGallery v2.2 Bildunterschriften

Hi zusammen,

gibt es irgendwo die Möglichkeit den Bildern Unterschriften / Captions hizuzufügen? Beim Minislider geht es, aber in der MiniGallery finde ich nichts.

Gruß Bastie


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen unter der MIT-Lizenz.

Offline

#2 08.11.2017 08:52:35

florian
Administrator

Re: MiniGallery v2.2 Bildunterschriften

Im Modul ist das nicht vorgesehen. Es ist aber mit ein paar kleinen Änderungen möglich, den Bild-Dateinamen als Beschreibung zu hinterlegen, der dann in der Thumbnailübersicht als Tooltip beim Zeigen mit der Maus auf das Bild erscheint und in der Großansicht als Bildunterzeile verwendet wird.

Dafür

1. in der /modules/minigal2/javascript.php die Zeile 52

showTitle: false

zu

showTitle: true

ändern

2. in der /modules/minigal2/view.php nach

if (!file_exists($basedir.$curdir.'thumbs/'.basename($img['file']))) {
			minigallery_resize_image ( $basedir.$curdir.basename($img['file']), $basedir.$curdir.basename($img['file']) , $maxsize, 0 );
			minigallery_resize_image ( $basedir.$curdir.basename($img['file']), $basedir.$curdir.'thumbs/'.basename($img['file']) , $thumbsize, $ratio, true);
		}

einfügen:

		$bu = str_replace('_',' ',basename($img['file']));
		$bu = str_replace('.jpg','',$bu);

Die Zeilen

echo '  <a'.$addtoimg.' href="'.str_replace(' ','%20',$baseurl.$curdir.basename($img['file'])).'">'; 
		echo '    <img width="'.$w.'" height="'.$h.'" src="'.str_replace(' ','%20',$baseurl.$curdir.'thumbs/'.basename($img['file'])).'" alt="" />'; 
		echo '  </a>'; 

ändern zu:

echo '  <a'.$addtoimg.' title="'.$bu.'" href="'.str_replace(' ','%20',$baseurl.$curdir.basename($img['file'])).'">'; 
		echo '    <img width="'.$w.'" height="'.$h.'" src="'.str_replace(' ','%20',$baseurl.$curdir.'thumbs/'.basename($img['file'])).'" alt="" title="'.$bu.'" />'; 
		echo '  </a>'; 

Das stößt natürlich an gewisse Grenzen; alternativ sind vielleicht die Slider-/Galerie-Presets von Itemz sonst eine Option.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

byteworker

#3 08.11.2017 16:48:40

bastie
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Danke Florian, ich werde es mal ausprobieren. Mit Itemz muß ich mich noch näher beschäftigen, war mir bislang einfach zu kniffelig.


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen unter der MIT-Lizenz.

Offline

#4 19.11.2017 14:36:39

byteworker
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Hier ist meine Demo:

http://schmuckmix.ch/pages/test-mit-neuer-gallerie.php

in der Detailansicht läuft es, aber in der Thumbnailansicht ist es noch nicht zu sehen. Fehlt da am Ende etwas CSS im Template?

Offline

#5 19.11.2017 15:09:12

florian
Administrator

Re: MiniGallery v2.2 Bildunterschriften

Ich glaube, das liegt an der Art der Vorschaugalerie, also ob die Thumbnnails normal nebeneinander oder als "Bildertapete" angezeigt werden, da kommen dann unterschiedliche Scripte zum Einsatz. Versuch mal, ob es hilft, wenn Du in der view.php die Zeile

echo '    <img width="'.$w.'" height="'.$h.'" src="'.str_replace(' ','%20',$baseurl.$curdir.'thumbs/'.basename($img['file'])).'" alt="" title="'.$bu.'" />'; 

änderst zu

echo '    <img width="'.$w.'" height="'.$h.'" src="'.str_replace(' ','%20',$baseurl.$curdir.'thumbs/'.basename($img['file'])).'" alt="'.$bu.'" title="'.$bu.'" />'; 

also den Bilddateinamen nicht nur als title="...", sondern auch als alt="..." übergibst.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#6 20.11.2017 09:18:15

byteworker
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Getestet: nun steht da 2x der Dateititel, eben auch als "alt" Ausgabe. Nimmst du für die Ägyptenseite ein anderes Albumscript (..Bildtapete) oder auch lightcase?

http://testpage.grafik-job.de/

die Thumbsvorschau zeigt die Captions nicht an, ich vermute das ich da ins Template noch was reinsticken muss.

Beitrag geändert von byteworker (20.11.2017 09:19:13)

Offline

#7 20.11.2017 09:31:03

florian
Administrator

Re: MiniGallery v2.2 Bildunterschriften

An den Scripten habe ich nichts geändert, und auch im Stylesheet nicht. So recht verstehe ich nicht, wieso das nicht funktioniert.
Auf Deiner Testseite ist aber auch immer noch alt="" und tittle="...".
Die Doppelung durch Weglassen des Titles verhindern, also nur alt="..." übergeben.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#8 20.11.2017 09:58:00

byteworker
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

... Test: nun habe ich nur das "alt" als Ausgabe verwendet, das kommt dabei heraus. in der Vorschau ist das Caption Element nicht zu sehen.

Offline

#9 20.11.2017 10:01:57

byteworker
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

hier noch die Thumbsansicht, denke da sollte die Textausgabe erfolgen. Ich werde es nochmal auf einem anderen Template mit einer ganz frischen Minigallery 2.2 probieren. Die hier war ein Update aus der alten Version (ohne den smarten Download im Backend), kann gut sein das dabei was nicht richtig überschrieben wurde.

Offline

#10 20.11.2017 11:21:22

florian
Administrator

Re: MiniGallery v2.2 Bildunterschriften

Das kann sein. Vielleicht liegt es auch an der jQuery-Version.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#11 21.11.2017 12:30:59

byteworker
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Ich habe ein Update auf die 1.3 WBCE gemacht und nochmal ein frisches Minigallerie Modul zum Umbauen verwendet.

Würde gern ein reinslidendes CSS Element wie  hier als Bildbeschriftung verwenden:

https://css-tricks.com/examples/SlideinCaptions/

So isses geworden (liegt vermutlich daran, dass ich keinen genauen Plan habe, wo ich in der view.php die Ausgaben machen muss, die CSS ist um die Standards aus der Tricks Seite ergänzt.

http://testpage.grafik-job.de/

Ich würde das Script gerne erweitern, wäre vermutlich auch für andere Leute brauchbar.

echo '<figure class="cap-left">';
        echo ' <a'.$addtoimg.' alt="'.$bu.'" title="'.$bu.'" href="'.str_replace(' ','%20',$baseurl.$curdir.basename($img['file'])).'">';
        echo '    <img width="'.$w.'" height="'.$h.'" src="'.str_replace(' ','%20',$baseurl.$curdir.'thumbs/'.basename($img['file'])).'" alt="" title="'.$bu.'" />';
        echo '  </a>';
        echo '<figcaption>'.$bu.'</figcaption>';
    }
    echo '</figure>';

Offline

#12 21.11.2017 12:32:30

byteworker
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

die frontend.css der Minigallery habe ich um diese Angaben ergänzt.

.minigal2 figure {
    display: block;
    position: relative;
    float: left;
    overflow: hidden;
    margin: 0 20px 20px 0;
}

.minigal2 figcaption {
    position: absolute;
    background: black;
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 10px 20px;
    opacity: 0;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    }
   
.minigal2 figure:hover figcaption {
    opacity: 1;
}

.minigal2 figure:before {
    content: "?";
    position: absolute;
    font-weight: 800;
    background: black;
    background: rgba(255,255,255,0.75);
    text-shadow: 0 0 5px white;
    color: black;
    width: 24px;
    height: 24px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    -moz-transition: all 0.6s ease;
    opacity: 0.75;
    }
   
.minigal2 figure:hover:before {
    opacity: 0;
}

.cap-left:before {
    bottom: 10px;
    left: 10px;
}

.cap-left figcaption {
    bottom: 0;
    left: -30%;
}

.cap-left:hover figcaption {
    left: 0;
}

.cap-right:before {
    bottom: 10px;
    right: 10px;
}

.cap-right figcaption {
    bottom: 0;
    right: -30%;
}

.cap-right:hover figcaption {
    right: 0;
}

.cap-top:before {
    top: 10px;
    left: 10px;
}

.cap-top figcaption {
    left: 0;
    top: -30%;
}

.cap-top:hover figcaption {
    top: 0;
}

.cap-bot:before {
bottom: 10px;
left: 10px;
}

.cap-bot figcaption {
    left: 0;
    bottom: -30%;
}

.cap-bot:hover figcaption {
    bottom: 0;
}

Offline

#13 25.11.2017 16:10:15

bastie
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Was mir aufgefallen ist:

wenn als Vorschau quadratische Bilder eingestellt sind erscheint zwar der Tooltip aber es wird keine Bildunterschrift angezeigt.

Ist Quadratische Vorschaubilder nicht angetickert, klappt's


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen unter der MIT-Lizenz.

Offline

#14 26.11.2017 07:53:40

byteworker
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Echt jetzt? Gleich mal testen...

Offline

#15 26.11.2017 22:22:41

bastie
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Jo, ist so, Du hast es ja auf Deiner Testseite geändert -und Schwupps haste Captions. Es wäre natrlich nicht schlecht, wenn es auch in der Quadratischen Vorschau klappen würde.

Was ich jetzt noch interessant fände, wäre wenn dieCaptions nicht nur beim Hovern angezeigt würden, sondern direkt - ich meine überhaupt. Der Tooltip ist mMn nicht so wichtig.


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen unter der MIT-Lizenz.

Offline

#16 27.11.2017 04:37:16

florian
Administrator

Re: MiniGallery v2.2 Bildunterschriften

Vielleicht einfach mal den Modulersteller, Ruud, direkt kontaktieren, also auf holländisch oder englisch einen Kommentar  auf der Modulhomepage posten. Vielleicht hat Ruud ja Interesse, die Option, die Dateinamen als Captions zu verwenden, im Modul zu implementieren
https://dev4me.com/modules-snippets/ope … allery-v2/


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#17 27.11.2017 11:04:41

byteworker
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Ich habe mit dem Ruud schon mal Kontakt wg Übersetzung für ein anderes Modul gehabt, ich frage ihn was man da tun kann.

Gruß Norbert

Offline

Liked by:

bastie

#18 27.11.2017 19:29:26

byteworker
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Ruud war so freundlich, hat die frisch entwickelte Version 2.4 der Minigallery freigeschaltet.
Im Backend ist nun eine Funktion einen Text als Caption auszugeben.

Danke Ruud (dev4me.nl) guter Mann!

MiniGallery 2.4

Offline

Liked by:

bastie, florian

#19 27.11.2017 23:08:53

florian
Administrator

Re: MiniGallery v2.2 Bildunterschriften

Das ist ja... whow. Ist denn schon Weihnachten? Ich bin hin und weg.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#20 27.11.2017 23:26:10

bastie
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Das ist fast wie Weihnachten vorgezogen und dabei haben wir noch nicht einmal den ersten Advent! Diese Mini-Gallery scheint ausbaufähig zu sein und könnte sich zu einer Alternative zur doch etwas (mMn) überladenen RFG entwickeln.

Jedenfalls erst mal WOW


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen unter der MIT-Lizenz.

Offline

#21 28.11.2017 05:48:21

byteworker
Mitglied

Re: MiniGallery v2.2 Bildunterschriften

Nun ja, die rsp Foldergallery ist mächtig... Aber auch toll konfigurierbar. Je mehr Features eingebaut werden, umso sperriger wird so ein Teil. Die Minigallery ist für sich und in der einfachen Version sehr brauchbar gewesen. Klick - hochgeladen - Bilder sichtbar. Ich werde beide gerne verwenden.

Offline

Liked by:

screamindan

Fußzeile des Forums

up