CP Bilder (div) als responsive Gallery
CP Bilder (div) als responsive Gallery
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
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
Das interessiert mich jetzt auch
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
- Oliver Georgi
- Site Admin
- Posts: 9892
- Joined: Fri 3. Oct 2003, 22:22
- Contact:
Re: CP Bilder (div) als responsive Gallery
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):
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
Ja, so ähnlich hab ich es dann auch gemacht
Allerdings nicht mit bootstrap, sondern zu Fuß...
Allerdings nicht mit bootstrap, sondern zu Fuß...
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Re: CP Bilder (div) als responsive Gallery
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.
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
Re: CP Bilder (div) als responsive Gallery
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
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
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.
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.
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
Re: CP Bilder (div) als responsive Gallery
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.
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.
Last edited by santscho on Tue 10. Dec 2013, 18:12, edited 2 times in total.
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
Re: CP Bilder (div) als responsive Gallery
Super. Danke Dir!
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Re: CP Bilder (div) als responsive Gallery
Ach ja... die Lightbox unterstuetzt Mousewheel und Touch-Events. Kann aber alles in der "fancyBox.php" eingestellt umgestellt werden.
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
Re: CP Bilder (div) als responsive Gallery
Klasse! Vielen Dank santscho!
- Oliver Georgi
- Site Admin
- Posts: 9892
- Joined: Fri 3. Oct 2003, 22:22
- Contact:
Re: CP Bilder (div) als responsive Gallery
Eine ähnliche Variante gibt es bereits zur globalen Ersetzung:
https://github.com/slackero/phpwcms-ext ... s-fancyBox
Ich habe diverse weitere Lösungen, z.B. auf Basis des RoyalSliders (Super Teil), carouFredSel:
http://codecanyon.net/item/royalslider- ... ery/461126
http://docs.dev7studios.com/jquery-plugins/caroufredsel
https://github.com/slackero/phpwcms-ext ... s-fancyBox
Ich habe diverse weitere Lösungen, z.B. auf Basis des RoyalSliders (Super Teil), carouFredSel:
http://codecanyon.net/item/royalslider- ... ery/461126
http://docs.dev7studios.com/jquery-plugins/caroufredsel
Re: CP Bilder (div) als responsive Gallery
Die eben erwähnte fancybox wuppt prima!
Hatte ich neulich erst wieder eingebaut. Danke noch mal!
Hatte ich neulich erst wieder eingebaut. Danke noch mal!
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Re: CP Bilder (div) als responsive Gallery
und caroufredsel eignet sich für fast jede contentstrategy - auch ohne bilder.
Re: CP Bilder (div) als responsive Gallery
@santscho
In deinen gepackten Daten fehlt in der fancybox der jquery Ordner!
Aber sonst 1a! Danke
Grüße
13
In deinen gepackten Daten fehlt in der fancybox der jquery Ordner!
Aber sonst 1a! Danke
Grüße
13