Page 1 of 2
CP Bilder (div) als responsive Gallery
Posted: Mon 25. Nov 2013, 15:36
by Iller13
Hi zusammen,
hat jemand ein Template, oder eine Idee, wie sich der CP Bilder (div) als responsive Gallery umsetzen lässt?
Oder gibt es gar schon eine Anpassung?
Das Problem sind ja die festgelegten Breiten der Bilder im Backend.
Vielen Dank
13
Re: CP Bilder (div) als responsive Gallery
Posted: Mon 25. Nov 2013, 20:25
by update
Das interessiert mich jetzt auch
Re: CP Bilder (div) als responsive Gallery
Posted: Tue 3. Dec 2013, 01:07
by Oliver Georgi
die festen Breiten sind nicht das Problem, können templateseitig komplett überschreiben werden. Es bleiben aber immer feste Breiten, auch bei Responsive, zumindest was das Ausgangsmaterial betrifft. Es wird nur meist ein größeres Bild geladen und ann per CSS auf Format gebracht. Üblicherweise legt man einen Tag um das Bild, dann bekommt dieses entsprechende Breitenangaben per CSS. Muss man aber auch nicht. Geht auch direkt dem Bild zuzuordnen, wenn man nicht irgend was abschneiden möchte und gecroppte Größe auf CSS Basis benötigt.
Die Responsive Bildeinstellung ist oft eine solche (siehe Twitter Bootstrap):
Code: Select all
img {
/* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%; /* Part 1: Set a maxium relative to the parent */
width: auto\9; /* IE7-8 need help adjusting responsive images */
height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Re: CP Bilder (div) als responsive Gallery
Posted: Tue 3. Dec 2013, 14:43
by update
Ja, so ähnlich hab ich es dann auch gemacht
Allerdings nicht mit bootstrap, sondern zu Fuß...
Re: CP Bilder (div) als responsive Gallery
Posted: Mon 9. Dec 2013, 12:27
by santscho
An welche Art Galerie hast du denn so gedacht? Bild-Slider? Thumbnail-Galerie? Erzaehl mir was Du genau moechtest und ich schlage Dir was vor.
Re: CP Bilder (div) als responsive Gallery
Posted: Mon 9. Dec 2013, 15:01
by Iller13
Hi santscho,
eigentlich eine ganz schlichte einfache Galerie, ohne Schnick Schnack.
Bilder nebeneinander z. B. 5 Stück, untereinander auch noch einmal 5 Stück, einzeln anklickbar mit Vergrößerung in der Lightbox.
Möglichkeit einer BU wäre schön aber nicht zwingend.
Und das halt responsive tauglich und über CP Bilder Div pflegbar.
Danke & Grüße 13
Re: CP Bilder (div) als responsive Gallery
Posted: Tue 10. Dec 2013, 16:07
by santscho
Okay, das ist simpel. Wenn...
a) Alle Thumnails die gleichen Dimensionen haben (ich empfehle "Beschneiden" auszuwaehlen)
b) Bildunterschrift in der Thumbnail-Ansicht nicht verwendet wird
Wenn das fuer Dich okay ist?
[edit] Vergiss Bedingungen a und b. Habe eine einfache Variante die unterschiedliche Bildgroessen und Bildunterschriften enthalten kann.
Re: CP Bilder (div) als responsive Gallery
Posted: Tue 10. Dec 2013, 17:50
by santscho
Hier runterladen:
https://github.com/santscho/Responsive-Gallery
...und alles in die entsprechenden Verzeichnisse kopieren.
...Gallery.tmpl im CP Bilder (div) auswaehlen
...fuer beste Darstellung: Bilder beschneiden und Bildunterschrift ausschalten. Dann siehts einheitlicher aus
Damit die Bilder scharf dargestellt werden, im CP lieber die Bilder etwas groesser definieren. Hier eine Richtlinie:
Der Mutter-Container ist ca. 800px breit. 5 Bilder pro Reihe. Bildbreite: 800px/5Bilder = 160px
- FancyBox ist ein jQuery-Plugin!
- Die Thumbnails werden responsive dargestellt, egal welche Screen-Breite
- In der Lightbox-Ansicht werden die Bilder responsive angezeigt (maximal so breit wie Screen-Breite)
- Bildunterschrit kann in der "gallery.css" angepasst werden. Klasse: .img-gallery capt
- Bei unerschiedlich grossen Bildern werden diese in der Reihe immer oben ausgerichtet
- Wenn Bildunterschrit fuer Thumbnails verwendet werden, werden diese direkt unter dem jeweiligen Bild dargestellt.
- Sollen alle Galerien ausnahmslos mit den gleichen Einstellungen ausgegeben werden, koennen die CP-Einstellungen im Template Gallery.tmpl ueberschrieben werden. einfach in den Settings die jeweiligen Semikolons (;) entfernen und die Werte bestimmen.
Re: CP Bilder (div) als responsive Gallery
Posted: Tue 10. Dec 2013, 17:52
by update
Super. Danke Dir!
Re: CP Bilder (div) als responsive Gallery
Posted: Tue 10. Dec 2013, 18:09
by santscho
Ach ja... die Lightbox unterstuetzt Mousewheel und Touch-Events. Kann aber alles in der "fancyBox.php" eingestellt umgestellt werden.
Re: CP Bilder (div) als responsive Gallery
Posted: Wed 11. Dec 2013, 09:10
by Iller13
Klasse! Vielen Dank santscho!
Re: CP Bilder (div) als responsive Gallery
Posted: Wed 11. Dec 2013, 09:54
by Oliver Georgi
Re: CP Bilder (div) als responsive Gallery
Posted: Wed 11. Dec 2013, 10:25
by update
Die eben erwähnte fancybox wuppt prima!
Hatte ich neulich erst wieder eingebaut. Danke noch mal!
Re: CP Bilder (div) als responsive Gallery
Posted: Wed 11. Dec 2013, 12:06
by nameless1
und caroufredsel eignet sich für fast jede contentstrategy - auch ohne bilder.
Re: CP Bilder (div) als responsive Gallery
Posted: Fri 10. Jan 2014, 15:58
by Iller13
@santscho
In deinen gepackten Daten fehlt in der fancybox der jquery Ordner!
Aber sonst 1a! Danke
Grüße
13