Announcement

  •  » Themes
  •  » [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

#1 2016-05-23 20:51:52

teekay
Member
2013-06-12
427

[Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Every theme needs a thread, so here's the one for Bootstrap Darkroom, a mobile-ready theme based on philb's Bootstrap Default. The main motivation for this theme was to have a consistent look and feature set across all devices, from desktop to tablet and phones.

Features:
* Plenty of color schemes, thanks to Bootswatch. Includes a custom dark color scheme based on Lightroom.
* Album navigation on the picture page with touch support using Slick slider.
* Fullscreen slideshow view using PhotoSwipe
  * supports video content using standard HTML5 video widget. Works independently of other plugins.
  * supports autoplay (so, replaces default slideshow with a true fullscreen one)
  * supports displaying EXIF metadata
  * can be started from both the thumbnail and the picture detail page
  * album thumbnails can be linked to PhotoSwipe directly (like smartpocket)
  * fully compatible with GThumb+/gdThumb
* Native HTML5 video support on picture page, too
* 100% mobile device ready (responsive layout, asynchronous loading of content, tap & swipe events)
* Most features are configurable (enable/disable, various options)
* Compatible with many plugins, see Plugin Support Matrix

Download: http://piwigo.org/ext/extension_view.php?eid=831
Github Source/Issues/Wiki: https://github.com/tkuther/piwigo-bootstrap-darkroom
Documentation: https://github.com/tkuther/piwigo-boots … kroom/wiki
Demo: https://pwgdemo.kuther.net

The theme is tested on OS X (Safari/Chrome), iOS 9 (iPad, iPhone), Android 5 (Chrome) and Linux (Chrome/Firefox). Due to the various configuration options and their interaction with plugins it could happen that I miss some rather obvious bugs.

If you find any, please open an issue on the Github issue tracker. For any other questions feel free to post here.

Preview:
https://raw.githubusercontent.com/tkuther/piwigo-bootstrap-darkroom/master/screenshot.png

Last edited by teekay (2016-06-19 23:02:52)

Offline

 

#2 2016-05-23 20:55:16

teekay
Member
2013-06-12
427

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

There is some discussion already happening here about viewport fixes for Windows Phone, and an issue with Firefox on OS X: http://piwigo.org/forum/viewtopic.php?p … 68#p163468

Let's continue that discussion here.

kuzco wrote:

2. When looking pictures on my Mac (10.10.4) it only works with Safari. When using Firefox (46.0.1) the picture I would like to see is only visible for some miliseconds and after that I am back in the overview of the folder.

A fix for this is now in master, will be available with the next version. Thanks for reporting.

Last edited by teekay (2016-05-23 21:55:50)

Offline

 

#3 2016-05-23 23:15:07

MrVaulen
Member
2016-04-17
9

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Thanks for the new option to default to "swipemode".

I have an issue though with that function. "Thumbnail Link Target". Tried setting it to PhotoSwipe. On my Lumia 1020 (w8.1) it tries to open a picture in swipemode, but before a picture is loaded it reverts to the album. Clicking the picture again opens it in swipemode but when swiping it crashed my browser so that it closes (no warning or error)

On my Lumia 930 (w10) I can click the picture as many times I want; I can see it try to start swipemode (screen fades) but it quickly reverts to album again, every time.

My Nexus is running latest Android (6) with Chrome. Photoswipe works ok on this device.

Perhaps Microsofts IE and Edge browsers have issue with latest "photoswhipe" version?

Offline

 

#4 2016-05-23 23:45:57

teekay
Member
2013-06-12
427

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

MrVaulen wrote:

Thanks for the new option to default to "swipemode".

I have an issue though with that function. "Thumbnail Link Target". Tried setting it to PhotoSwipe. On my Lumia 1020 (w8.1) it tries to open a picture in swipemode, but before a picture is loaded it reverts to the album. Clicking the picture again opens it in swipemode but when swiping it crashed my browser so that it closes (no warning or error)

On my Lumia 930 (w10) I can click the picture as many times I want; I can see it try to start swipemode (screen fades) but it quickly reverts to album again, every time.

I suspect the issue is similar to the Firefox one reported by kuzco above. I guess it has to do with jQuery tap/click/etc. event handlers.

I just uploaded a new version 1.2.1 with a fix included. On my work Lumia 935 w/ WinPhone 8.1 "Thumbnail link target -> PhotoSwipe" now starts the slideshow correctly (it didn't work at all before), but when I close PhotoSwipe the whole page turns white and I have to reload it. Does it do the same on yours?

Offline

 

#5 2016-05-24 12:43:32

kuzco
Member
2013-09-17
58

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

First of all - BEST THEME ever found
(and in case PhotoSwipe will support sometime video it will be even better)

I am playing again a little bit with latest version (1.2.1) and have now an issue with viewing pictures on iPad or iPhone.

Have the following folders:
- Vacations (no pictures included)
-- 2016 (no pictures included)
--- sub1 (pictures included)
--- sub2 (pictures included)
--- sub3 (pictures included)
---- sub31 (pictures included)
---- sub32 (pictures included)
---- sub33 (pictures included)

When clicking on sub3 I do the the subfolder sbu31, sub32 and sub33, but I do not see the pictures in sub3.
On my Mac (10.10.4- Firefox and Safari) everything is fine. On iPad and iPhone (both 9.3.2 and Safari) I do have the above issue.

Important: When deleting sub33 (so, only 2 subalbums in sub3) I do also see the pictures from sub3 on my iPad, but not on the iphone.
When deleting sub33 and sub32  (so, only 1 subalbum in sub3) I do also see the pictures from sub3 on my
ipad, but not on the iphone.

It seems it is an issue with the screen-resoution.

Probably you can create a similar structure on your demo site and I can do a test.

Regards
kuzco

Last edited by kuzco (2016-05-24 13:07:50)

Offline

 

#6 2016-05-24 13:11:24

teekay
Member
2013-06-12
427

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

kuzco wrote:

First of all - BEST THEME ever found

Thanks! :)

I am playing again a little bit with latest version (1.2.1) and have now an issue with viewing pictures on iPad or iPhone.

Have the following folders:
- Vacations (no pictures included)
-- 2016 (no pictures included)
--- sub1 (pictures included)
--- sub2 (pictures included)
--- sub3 (pictures included)
---- sub31 (pictures included)
---- sub32 (pictures included)
---- sub33 (pictures included)

When clicking on sub3 I do the the subfolder sbu31, sub32 and sub33, but I do not see the pictures in sub3.
On my Mac (10.10.4- Firefox and Safari) everything is fine. On iPad and iPhone (both 9.3.2 and Safari) I do have the above issue.

Important: When deleting sub33 (so, only 2 subalbums in sub3) I do also see the pictures from sub3 on my iPad, but not on the iphone.
When deleting sub33 and sub32  (so, only 1 subalbum in sub3) I do also see the pictures from sub3 on my
ipad, but not on the iphone.

It seems it is an issue with the screen-resoution.

Probably you can create a similar structure on your demo site and I can do a test.

Regards
kuzco

Hmm, I'm strictly using Lightroom and Alloyphoto's Piwigo publisher plugin to manage albums. That one doesn't even allow to add pictures directly to an "album set" (sub3 in your example). Do you have any plugins enabled that influence thumbnail/category display, like GThumb+ or gdThumb? I could imagine that especially GTHumb+ could cause a mixed bag of standard thumbnails and masonry-style ones.

I'll try to reproduce it on my iDevices then.

Offline

 

#7 2016-05-24 13:16:29

kuzco
Member
2013-09-17
58

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

teekay wrote:

Hmm, I'm strictly using Lightroom and Alloyphoto's Piwigo publisher plugin to manage albums. That one doesn't even allow to add pictures directly to an "album set" (sub3 in your example). Do you have any plugins enabled that influence thumbnail/category display, like GThumb+ or gdThumb? I could imagine that especially GTHumb+ could cause a mixed bag of standard thumbnails and masonry-style ones.

I'll try to reproduce it on my iDevices then.

Bam - you are correct. After disabling GThumb+ I do not have any longer the issue on my iDevices.
Many thanks.

However, strange that only the iDevices were affected, not Firefox on Mac.
And secondly, the iPad was only affected when I do more than 2 subsub-albums.

Last edited by kuzco (2016-05-24 13:22:14)

Offline

 

#8 2016-05-24 13:30:09

teekay
Member
2013-06-12
427

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

kuzco wrote:

teekay wrote:

Hmm, I'm strictly using Lightroom and Alloyphoto's Piwigo publisher plugin to manage albums. That one doesn't even allow to add pictures directly to an "album set" (sub3 in your example). Do you have any plugins enabled that influence thumbnail/category display, like GThumb+ or gdThumb? I could imagine that especially GTHumb+ could cause a mixed bag of standard thumbnails and masonry-style ones.

I'll try to reproduce it on my iDevices then.

Bam - you are correct. After disabling GThumb+ I do not have any longer the issue on my iDevices.
Many thanks.

However, strange that only the iDevices were affected, not Firefox on Mac.

OK, I can reproduce it on my demo page. You can see what happens if you resize the browser window on the desktop version: the GThumb+ thumbnails drift into the offcanvas on the right. It's a viewport size issue, indeed.

Solution: use gdThumb instead of GThumb+. gdThumb also turns the categories in a masonry style view, and it works with that one. Check the "Landscapes" album on my demo page.

EDIT: seems to cause the whole site to crash now when clicking on the picture inside the "Black & White" Sub-Album. I'll look at that issue soon.

Last edited by teekay (2016-05-24 13:35:40)

Offline

 

#9 2016-05-25 23:00:03

MrVaulen
Member
2016-04-17
9

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Photoswipe now works like expected on both w8.1 and w10 Lumia. Great! Don't think it makes a difference, but I have mine set to photoswipe on mobile devices only.

Offline

 

#10 2016-05-25 23:06:42

teekay
Member
2013-06-12
427

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

MrVaulen wrote:

Photoswipe now works like expected on both w8.1 and w10 Lumia. Great! Don't think it makes a difference, but I have mine set to photoswipe on mobile devices only.

Great! Thanks for the feedback.

kuzco wrote:

(and in case PhotoSwipe will support sometime video it will be even better)

PhotoSwipe video support is now available in git master. Still needs some polishing, though.

Offline

 

#11 2016-05-26 11:45:52

kuzco
Member
2013-09-17
58

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Wow !!

As I said before - the best Theme I have found.

Two comments to the latest version from github:
- PhotoSwipe with Video support ist really working on iPhone and iPad, but I have to click the play-button twice. Not really a big issue for me. On Firefox and IE (Windows) only once.
- On each album overview page I do see on the left bottom side some "vifdeo player buttons". (please see attachment)

Update: When leaving the  Photo-swipe Modus to "normal view" and going back to photo-swipe modus the video play does not work any longer (tested on iPad 9.3.2)


Uploaded Images

Last edited by kuzco (2016-05-26 15:05:13)

Offline

 

#12 2016-05-28 18:55:47

teekay
Member
2013-06-12
427

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

kuzco wrote:

Two comments to the latest version from github:
- PhotoSwipe with Video support ist really working on iPhone and iPad, but I have to click the play-button twice. Not really a big issue for me. On Firefox and IE (Windows) only once.
- On each album overview page I do see on the left bottom side some "vifdeo player buttons". (please see attachment)

Update: When leaving the  Photo-swipe Modus to "normal view" and going back to photo-swipe modus the video play does not work any longer (tested on iPad 9.3.2)

Hi kuzco,

thanks for early testing.

- For the iOS play button issue there is no workaround. Technically the first play button is a layer over the preview image in PhotoSwipe, when clicked, the actual video modal is created. The video is set to autoplay, but both iOS and Android do not support this and show their own play button (which is actually a good thing).
- The phantom buttons issue on category pages is fixed.
- I couldn't reproduce the broken video issue on my iPad Air w/ 9.3.2.

In the meantime I did more fixes and I think video support is ready for prime time. Tested on iPad Air, iPhone 6, OS X (Safari, Firefox, Chrome), Windows 10 (IE11, Edge, Chrome, Firefox), Android 4, Android 5 and even on my business Lumia Windows Phone 8.1 thingy it does work fine.

Offline

 

#13 2016-05-28 19:37:38

kuzco
Member
2013-09-17
58

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Thanks for this great update.
I have done some tests with latest github version and have found some issues (Thumbnail Link Target is always Photoswipe Slideshow).

1. Have created an album with 5 picture and 1 video. When open this album Photoswipe Slideshow will open as expected. Number of pictures are visible in the top left corenr (1/6, ...).After clicking at the bottom link on a picture I do get the expected "more information" screen. When going back to the "PhotoSwipe Slideshow" with the fullscreen (middle icon over the picture) I do have 12 pictures more 1/18, ... !
Have tested this on Windows (firefox, IE - screen resolution 1280x1024). On my iPhone 5s (iOS 9.3.2) I do have 4 more pictures (1/10, ...) in portrait view and 8 more in landscape mode. On iPad also 12 more picture.

2. Have created an album with 5 picture and 1 video. When open this album photoswipe Slideshow will open as expected. Number of pictures are visible in the top left corenr (1/6, ...).After clicking at the bottom link on a picture I do get the expected "more information" screen. On this screen I do get also on the right side a new icon for EXIF and IPTC informationn. So far so good.
When going back to the "PhotoSwipe Slideshow" with the fullscreen button (middle icon over the picture), this icon (EXIF and IPTC information) is stil on the right side and I can not gor forward or backwards with the arrows on left or right side.
Have tested this on Windows (firefox, IE- rresolution 1280x1024).

3. iPhone 5s, not on my iPad 3
Samealbum as above. When clicking at the bottom link on a picture (i.e. 4/10) the more information link and go back with the fullscreen button (middle icon over the picture) I am back to picture (2/10 - means 2 picture backwards.

Will play more later.

Update:
3. Issue happens also on iPad. But I am back 6 pictures backwards..

Last edited by kuzco (2016-05-28 21:21:02)

Offline

 

#14 2016-05-28 22:23:21

teekay
Member
2013-06-12
427

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

kuzco wrote:

Thanks for this great update.
I have done some tests with latest github version and have found some issues (Thumbnail Link Target is always Photoswipe Slideshow).

1. Have created an album with 5 picture and 1 video. When open this album Photoswipe Slideshow will open as expected. Number of pictures are visible in the top left corenr (1/6, ...).After clicking at the bottom link on a picture I do get the expected "more information" screen. When going back to the "PhotoSwipe Slideshow" with the fullscreen (middle icon over the picture) I do have 12 pictures more 1/18, ... !
Have tested this on Windows (firefox, IE - screen resolution 1280x1024). On my iPhone 5s (iOS 9.3.2) I do have 4 more pictures (1/10, ...) in portrait view and 8 more in landscape mode. On iPad also 12 more picture.

This seems really weird. Could you give some more information about how you created the album? Is it a virtual album with the video synced in from galleries/?

2. Have created an album with 5 picture and 1 video. When open this album photoswipe Slideshow will open as expected. Number of pictures are visible in the top left corenr (1/6, ...).After clicking at the bottom link on a picture I do get the expected "more information" screen. On this screen I do get also on the right side a new icon for EXIF and IPTC informationn. So far so good.
When going back to the "PhotoSwipe Slideshow" with the fullscreen button (middle icon over the picture), this icon (EXIF and IPTC information) is stil on the right side and I can not gor forward or backwards with the arrows on left or right side.
Have tested this on Windows (firefox, IE- rresolution 1280x1024).

The sidebar... Ok, will take a look at this.

3. iPhone 5s, not on my iPad 3
Samealbum as above. When clicking at the bottom link on a picture (i.e. 4/10) the more information link and go back with the fullscreen button (middle icon over the picture) I am back to picture (2/10 - means 2 picture backwards.

Sounds related to 1.). Again, very weird behaviour.

Thanks for testing again.

Offline

 

#15 2016-05-28 22:38:23

kuzco
Member
2013-09-17
58

Re: [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Regarding 1 and 3:
I have the same (only iPad tested) when going to your demo site. Please the the attachment.
-I am opening travel and will see picture dsc02819 (1/6 see left top corner)
- clicking link at bottom of picture
- clicking full screen button (middle above the picture)
- this brings me back to slide slow mode and I do see picture p1000905 and now there are 16 pictures (please see number top left corner)

To be clear: the real number is still the same, but the "counter" on the top left corner is completely wrong.

My iPad does not upload the pictures. In case you need them please give me a signal.

Last edited by kuzco (2016-05-28 22:58:56)

Offline

 
  •  » Themes
  •  » [Theme] Bootstrap Darkroom (w/ PhotoSwipe, HTML5 video & more)

Board footer

Powered by FluxBB

github twitter facebook google+ newsletter Donate Piwigo.org © 2002-2019 · Contact