CP Bilder (div) als responsive Gallery

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

CP Bilder (div) als responsive Gallery

Post by Iller13 » Mon 25. Nov 2013, 15:36

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: 6390
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CP Bilder (div) als responsive Gallery

Post by update » Mon 25. Nov 2013, 20:25

Das interessiert mich jetzt auch ;)
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
Oliver Georgi
Site Admin
Posts: 9554
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: CP Bilder (div) als responsive Gallery

Post by Oliver Georgi » Tue 3. Dec 2013, 01:07

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: 6390
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CP Bilder (div) als responsive Gallery

Post by update » Tue 3. Dec 2013, 14:43

Ja, so ähnlich hab ich es dann auch gemacht ;)
Allerdings nicht mit bootstrap, sondern zu Fuß...
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: CP Bilder (div) als responsive Gallery

Post by santscho » Mon 9. Dec 2013, 12:27

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

Re: CP Bilder (div) als responsive Gallery

Post by Iller13 » Mon 9. Dec 2013, 15:01

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: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: CP Bilder (div) als responsive Gallery

Post by santscho » Tue 10. Dec 2013, 16:07

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: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: CP Bilder (div) als responsive Gallery

Post by santscho » Tue 10. Dec 2013, 17:50

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: 6390
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CP Bilder (div) als responsive Gallery

Post by update » Tue 10. Dec 2013, 17:52

Super. Danke Dir!
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: CP Bilder (div) als responsive Gallery

Post by santscho » Tue 10. Dec 2013, 18:09

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

Re: CP Bilder (div) als responsive Gallery

Post by Iller13 » Wed 11. Dec 2013, 09:10

Klasse! Vielen Dank santscho! :D

User avatar
Oliver Georgi
Site Admin
Posts: 9554
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: CP Bilder (div) als responsive Gallery

Post by Oliver Georgi » Wed 11. Dec 2013, 09:54

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: 6390
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CP Bilder (div) als responsive Gallery

Post by update » Wed 11. Dec 2013, 10:25

Die eben erwähnte fancybox wuppt prima!
Hatte ich neulich erst wieder eingebaut. Danke noch mal! :)
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

nameless1
Posts: 847
Joined: Sun 27. Apr 2008, 23:22

Re: CP Bilder (div) als responsive Gallery

Post by nameless1 » Wed 11. Dec 2013, 12:06

und caroufredsel eignet sich für fast jede contentstrategy - auch ohne bilder.

Iller13
Posts: 288
Joined: Tue 23. Dec 2003, 15:18
Location: Stuttgart

Re: CP Bilder (div) als responsive Gallery

Post by Iller13 » Fri 10. Jan 2014, 15:58

@santscho

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

Aber sonst 1a! Danke

Grüße
13

Post Reply