CP Bilder (div) als responsive Gallery

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Iller13
Posts: 291
Joined: Tue 23. Dec 2003, 15:18
Location: Stuttgart

CP Bilder (div) als responsive Gallery

Post 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
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CP Bilder (div) als responsive Gallery

Post by update »

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.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: CP Bilder (div) als responsive Gallery

Post 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;
}
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CP Bilder (div) als responsive Gallery

Post by update »

Ja, so ähnlich hab ich es dann auch gemacht ;)
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.
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: CP Bilder (div) als responsive Gallery

Post 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.
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
Iller13
Posts: 291
Joined: Tue 23. Dec 2003, 15:18
Location: Stuttgart

Re: CP Bilder (div) als responsive Gallery

Post 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. :D


Danke & Grüße 13
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: CP Bilder (div) als responsive Gallery

Post 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.
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: CP Bilder (div) als responsive Gallery

Post 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.
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
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CP Bilder (div) als responsive Gallery

Post by update »

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.
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: CP Bilder (div) als responsive Gallery

Post by santscho »

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
Iller13
Posts: 291
Joined: Tue 23. Dec 2003, 15:18
Location: Stuttgart

Re: CP Bilder (div) als responsive Gallery

Post by Iller13 »

Klasse! Vielen Dank santscho! :D
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: CP Bilder (div) als responsive Gallery

Post by Oliver Georgi »

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
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CP Bilder (div) als responsive Gallery

Post by update »

Die eben erwähnte fancybox wuppt prima!
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.
nameless1
Posts: 878
Joined: Sun 27. Apr 2008, 23:22

Re: CP Bilder (div) als responsive Gallery

Post by nameless1 »

und caroufredsel eignet sich für fast jede contentstrategy - auch ohne bilder.
Iller13
Posts: 291
Joined: Tue 23. Dec 2003, 15:18
Location: Stuttgart

Re: CP Bilder (div) als responsive Gallery

Post by Iller13 »

@santscho

In deinen gepackten Daten fehlt in der fancybox der jquery Ordner! :D

Aber sonst 1a! Danke

Grüße
13
Post Reply