projectblacklight / blacklight-gallery

Gallery views for Blacklight

Blacklight::Gallery

Gallery views for Blacklight search results

Installation

Add this line to your Blacklight application's Gemfile:

gem 'blacklight-gallery'

And then execute:

$ bundle

Or install it yourself as:

$ gem install blacklight-gallery

Usage

Run the gallery generator:

$ rails g blacklight_gallery:install

Available Views

If you would like to add or remove any particular view either add or remove the following configurations from your Blacklight controller.

Gallery

config.view.gallery.partials = [:index_header, :index]

Masonry

config.view.masonry.partials = [:index]

Slideshow

config.view.slideshow.partials = [:index]

Screenshot

Contributing

1. Fork it ( http://github.com//blacklight-gallery/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Releasing

1. Edit lib/version.rb and package.json to set the new version
2. Commit the changes e.g. git commit -am "Bump version to X.X.X"
3. Push release to rubygems bundle exec rake release
4. Push release to NPM npm publish
5. Create a release on github with the tag that was just created: https://github.com/projectblacklight/blacklight-gallery/releases/new

blacklight-gallery's Issues

Improrting blacklight_gallery/default.scss causes 2 copies of Bootstrap styles

Because default.scss includes bootstrap, and because blacklight itself already includes bootstrap, there are two copies. I worked around this by replacing:

@import 'blacklight_gallery/default'

With

@import "blacklight_gallery/gallery";
@import "blacklight_gallery/masonry";
@import "blacklight_gallery/slideshow";
@import "blacklight_gallery/osd_viewer";

sequenceMode should be true in openseadragon viewer

When using multiple IIIF tile_sources,

• the prev/next buttons don't work (switching between tile sources)
• openseadragon starts fetching ALL tiles for all tile sources, leading to hundreds of requests in the background
• at startup the viewer goes rapidly through all pages, and ends at the last page

When you change these parameters, it starts working:

app/views/catalog/_openseadragon_default.html.erb:

osd_config_referencestrip = {
    sequenceMode: true
    showReferenceStrip: false
    ...
}

(I set showReferenceStrip to false, because openseadragon shows the refence strip INSIDE the viewer)

Replace masonry.js with a lighter solution

https://css-tricks.com/a-lightweight-masonry-solution/

Browse detail page: Slideshow view needs styling updates

• Need vertical margin between rows of thumbnails (#64)
• Need vertical margin above pagination or below final row of thumbnails (#64)
• The "Select an image to start the slideshow" heading should be centered (#64)

Extra .css in SCSS file is unnecessary

I get this deprecation warning in rails 4.2

DEPRECATION WARNING: Extra .css in SCSS file is unnecessary. Rename /home/travis/build/projecthydra/sufia/vendor/bundle/ruby/2.1.0/gems/blacklight-gallery-0.1.1/app/assets/stylesheets/blacklight_gallery/_gallery.css.scss to /home/travis/build/projecthydra/sufia/vendor/bundle/ruby/2.1.0/gems/blacklight-gallery-0.1.1/app/assets/stylesheets/blacklight_gallery/_gallery.scss. 

Browse detail page: gallery view needs thumbnail and title font styling

It looks like we're not restricting the dimensions of the thumbnail images, so end up putting ~400px wide image into a .col-md-3 column, which is only ~250px wide:

Also, the item titles have no font styling assigned so they are displaying as 28px (default H3 size), which is much too big for this context.

There should be a method to use a large image for the slideshow

Currently I'm overriding the whole partial. Ideally I could just use a config variable.
curationexperts/alexandria-legacy@d5e1ce7

Gallery results with massively uneven heights look bad

I'm not sure what can be done about this, other than controlling the data displayed in the gallery view a little more closely (e.g. truncating titles). Maybe we should add a gallery-view-specific option for truncation, unless there are other suggestions for making it look reasonable.

Styles are too broad:

https://github.com/projectblacklight/blacklight-gallery/blob/master/app/assets/stylesheets/blacklight_gallery/_slideshow.scss#L105

This line is causing this style:

In Blacklight 6

support Rails 6

Gemfile currently has:

spec.add_dependency "rails", '~> 5.1'

Could update this to match blacklight:

s.add_dependency "rails", '>= 5.1', '< 7'

Bookmark checkbox looks bad in gallery view

It looks like we need to do some (more) custom styling of the document header to wrap the bookmark checkbox appropriately.

Accessibility: Multiple controls on a single page creates issue

Description
Any element on a page must have a unique ID. This issue appears when items on a page both have the same ID, typically from embeds or other generated templates that can be repeated.

This particular issue is present on the Item Embed on the controls for an item: zoom in, zoom out, home, and fullscreen.

Solution
Remove IDs for zoom controls and replace with classes. Adjust any relevant code that referred to these IDs to refer to the classes instead. This will fix the accessibility issue when multiple Item Embeds are on the same page.

Related Issue
exhibits-library-cornell-edu#428

min-width of 250px is too wide. Can't get 4 on a row.

blacklight-gallery/app/assets/stylesheets/blacklight_gallery/default.css.scss

Line 22 in 2f9f342

min-width: 250px;

Pagination controls are confusing on slideshow

@cbeer said:

The interaction between the pagination controls and the slideshow prev/next controls is puzzling me. If I'm in slideshow mode, I think I want to be able to scroll through all the results, not just the ones of that page

For a first pass, do we just need a way to ensure all the results are available here, or should we do some kind of dynamic paging? Or is the bootstrap carousel not flexible enough for that?

Prev/next target areas in slideshow view seem off

This is from DLME -dev, but I see the same issue with Stanford Exhibits, so I assume the problem lies in blacklight-gallery:

It seems like the prev/next target areas are offset from the top of the slideshow container. When I move my mouse just above the arrow (and the highlighted select area), that area is not an active target area.

Improve masonry icon

Depends on #20

The icons below are a bit too large to fit w/ the other glyphicons. Also, the way to style a .png similarly to a glyphicon in a cross browser compatible way wasn't immediately clear. In order to not hold-up #20 let's improve this icon as an iterative task.

Upgrade to imagesLoaded 5

https://github.com/desandro/imagesloaded

Fix pending slideshow spec

Slideshow spec was made pending in 2134dd9. I tried a few things to get this working including:

• turning jquery.fx.off
• upgrading to chrome headless

Nothing worked. Marking pending until we can get more time to get a fix in.

Improve thumbnail images for start page of slideshow

The current approach used for the index page of the slideshow view seems less than ideal in that the thumbnail image for each item is a fairly zoomed-in portion of the larger image. This often results in an thumbnail image that is pretty useless for understanding what the image is really about. A couple of examples:

---

---

I wonder if we can consider using object-fit: cover; for these thumbnail images? We use that approach in a couple of places in Spotlight, such as the Administration > Curation > Items table that shows a thumbnail of each item. As an example, using object-fit: cover; the first example above would look like this:

And the second example would like this:

These are more visually appealing and provide more info about the item to the user than the current approach.

I think at least some versions of IE don't support object-fit so that is one thing to consider, but all other browsers do and I think there are polyfills or other fallback approaches we could use for IE.

Styling for slideshow

@cbeer said:

I have this CSS in spotlight that makes the carousel look a little better (centers the image, adds a dark background..):

.item-carousel {
  .carousel {
    background-color: #111;
    text-align: center;
  }
  img {
    margin-left: auto;
    margin-right: auto;
  }
}

I think we need to do something like that here, because as-is it doesn't look at great.

Q: Why openseadragon dependency?

Why is Openseadragon a dependency of blacklight-gallery?

The README doesn't mention OSD, and the gem doesn't seem to do too too much with it, I don't really understand what it's doing or why it's something for blacklight-gallery to do.

This comes up, because my sufia app ends up with an openseadragon gem dependency. Because the gem is called just openseadragon, this prevents me from trying to load the actual openseadragon via bower and rails-assets. I was going to try it to see if it worked to get the latest version of OSD, which the gem version of openseadragon doesn't have yet. And I don't actually want anything but the OSD js, I don't want the extra helpers in the gem, some of which seem to actually be riiif-specific, but you can use OSD without riiif of course, it's unclear if the gem is really generic openseadragon for any rails app, or something specifically for samvera or riiif using apps.

Release 0.0.2

Update to work with Blacklight 7 && Bootstrap 4

We are using Blacklight 7.0.1 && Bootstrap 4 and would like to use the blacklight-gallery

but there are dependency issues

Add this line to your Blacklight application's Gemfile:

`gem 'blacklight-gallery'

And then execute:

$ bundle

Resolving dependencies...
Bundler could not find compatible versions for gem "blacklight":
  In snapshot (Gemfile.lock):
    blacklight (= 7.0.1)

  In Gemfile:
    blacklight (~> 7.0.1)

    blacklight-gallery was resolved to 0.0.1, which depends on
      blacklight (>= 5.0.0.pre4, < 6.0)

    blacklight_range_limit (~> 7.0.0) was resolved to 7.0.0, which depends on
      blacklight

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

Slideshow + large number of documents

@cbeer said:

I'm not sure what should be done about this, but for large numbers of documents (if we decide to show all the results, or the user selects 50 items per page), these indicators are pretty useless and mess up the layout of the document titles.