art-institute-of-chicago/browser-extension

Browser extension to view a random artwork from our collection in a new browser tab

.

Art Institute of Chicago Browser Extension

A browser extension that presents a random work of art from the Art Institute of Chicago's collection with each new tab.

In September 2019, the Art Institute of Chicago (AIC) launched its data API for public use. The API provides information and access to over 100,000 artworks.

Using the data API and IIIF's image API, AIC's browser extension presents an artwork from the museum's collection in your browser every time a new tab is opened. The extension focuses on selecting from over 50,000 works marked for public domain use.

For public use, this extension is available in the Chrome Web Store. If you'd like to install the plugin for local development, follow the instructions below.

This repo serves as an example of using the Art Institute of Chicago's data API.

Features

• Presents artwork from the Art Institute's collection in new browser tab
• Demonstrates use of the Art Institute's data API

Requirements

Chrome browser in Developer Mode

Installing

Clone or download the project:

git clone https://github.com/art-institute-of-chicago/browser-extension.git
cd browser-extension

• If you downloaded a zip file from GitHub, unzip the package
• From Chrome menu choose Window - Extensions
• Toggle on "Developer Mode"
• Click "Load Unpacked"
• Select the browser-extension folder you cloned
• Optionally toggle "Developer Mode" off

Configuration

In script.js, you'll find the query that fetches a random artwork:

let timeStamp = Math.floor(Date.now() / 1000);
    let artworkRequest = {
        "resources": "artworks",
        "fields": [
            "id",
            "title",
            "artist_title",
            "image_id",
            "date_display",
	    "thumbnail"
        ],
        "boost": false,
        "limit": 1,
        "query": {
            "function_score": {
                "query": {
                    "bool": {
                            "must": [
                                {
                                    "term": {
                                        "is_public_domain": true
                                    },
                                },
                                {
                                    "exists": {
                                        "field": "image_id",
                                    },
                                },
                            ],
                        },
                    }
                },
                "boost_mode": "replace",
                "random_score": {
                    "field": "id",
                    "seed": timeStamp
                }
            }
        }
    };

Contributing

We encourage your contributions. Please fork this repository and make your changes in a separate branch. To better understand how we organize our code, please review our version control guidelines.

# Clone the repo to your computer
git clone [email protected]:your-github-account/browser-extension.git

# Enter the folder that was created by the clone
cd browser-extension

# Install dependencies (we use Yarn)
yarn install --frozen-lockfile

# Start a feature branch
git checkout -b feature/good-short-description

# ... make some changes, commit your code

# Push your branch to GitHub
git push origin feature/good-short-description

On github.com, create a Pull Request to merge your changes into our develop branch.

This project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

We welcome bug reports and questions under GitHub's Issues. For other concerns, you can reach our engineering team at [email protected]

Code Formatting

We use Prettier to perform standard formatting across all the JS, CSS, HTML, and Markdown files in the project. If you've installed the project dependencies correctly with Yarn, a pre-commit hook that formats all your staged files should automatically execute when you run git commit.

Alternatively, you could manually run Prettier like so:

yarn prettier --write "$(pwd)/**/*.(js|css|html|md)

Acknowledgements

AIC's browser extension was conceived in the Experience Design department during the 2018 internship program, Diversifying Art Museum Leadership Initiative (DAMLI). Thanks to our intern, Abdur Khan, for helping make this project possible.

Additional thanks to Mark Dascoli, Illya Moskvin, Tina Shah, Kirsten Southwell, and nikhil trivedi, for helping complete version 1 of the browser extension.

Inspiration for this project came from the following browser extension projects:

• David Rumsey Map Collection - MapTab
• ueno.design
• Muzli 2 - Stay Inspired

The following tutorial helped us get started: How to Create and Publish a Chrome Extension in 20 minutes from freeCodeCamp.org

Licensing

This project is licensed under the GNU Affero General Public License Version 3.

browser-extension's Issues

Add condition to show artworks that haven't been viewed in a while

We added a field to the artworks endpoint has_not_been_viewed_in_a_while. Add a condition to the search query to only pull works that are "true" for this value.

Clean up git history

Add link to AIC artwork detail page

Where should this link go?

Clear legal agreements with our legal team

Add alt tag

Add alt tag to images/canvas in openseadragon

Fix 'O' in 'CCO'

Consider call out if image happens to be currently on view

Lint all code

Add search box to search our collection

Add time intervals for more seed collision

From prior conversation:

We could make sure that there's more overlap between the results provided to different users. For example, right now, we are using the current timestamp in seconds for the seed. Anyone who launches or refreshes new tab at the same second should see the same image. Something we could consider doing is to sort of... create a scale of time intervals, and choose the biggest one based on when the user last accessed the new tab. (Assuming we can store that in local storage.) For example, let's say that the biggest entry on our scale is a half-hour. If it's been more than 30 min since the last time the user launched new tab, we will take the current timestamp and floor it to the nearest half-hour, and use that as the seed. So if the three of us launched new tab at 10:10, 10:15, and 10:20 AM respectively, and if it's been more than a half-hour since the last time each of us launched new tab, we should all see the same image. Then, let's say that the next entry on our scale is 15 min. If it's been less than a half-hour since you launched new tab, we check if it's also been less than 15 min. If not, we floor the timestamp to the nearest 15 min, and use that as the seed. If yes, we go down to our next smallest interval, say, 10 min. Same deal. Then, down to 5 min, to 1 min, to 30 sec, and etc., until we arrive at our current setting of one second.

This should account for normal usage, as well as cases where users are rapidly refreshing the page to see new images.

Make page responsive

Page elements should adjust as you resize screen as well as for mobile.

Replace font with open source font used in mobile app

Implement Departments filter

As discussed in #19, and related to #48 and #51

Perform query and load images for future new tabs

Currently, we query our API and download images when a new tab is opened. Instead, what we can do is to save our query results for next time in LocalStorage. If a saved query result already exists, we show that data, and query a result for next time. This way, we don't necessarily need to query the API whenever a new tab is opened before displaying stuff.

Likewise, after OpenSeadragon renders all tiles on initial load, we can create a new OSD instance, one that might be hidden using opacity or other tricks. By doing this, we can download some or all of the necessary images into the browser cache. Even if not all of the images are downloaded, we've made progress towards future downloads. Some tiles might have made it into the browser cache, while others might have made it into the IIIF cache, or the CDN cache, if not necessarily into the user's browser.

If we'd like, we can do this preload trick for not just the next new tab, but for some predefined number of them at a time. The longer a new tab is opened, the further ahead we can preload.

Create an option for "dark mode"

Use the dark grey treatment on the website's gallery modules for colors

Remove CC0 button

Everything displayed by default is CC0, but the CC0 logo takes too much visual focus away from the content.

Chrome Web Store requirements

here’s what we need to publish to the store:

1. favicon/icon - 128x128
2. Summary sentence (we’ll grab from our github)
3. Screenshots (sizes mentioned below)
4. Tiles (sizes mentioned below)

Tile sizes:
Small tile - 440x280:
Large tile - 920x680: (optional)
Marquee - 1400x560: (optional)

Screenshot:
1280x800 or 640x400

Implement design feedback

See comment on #24. Additionally:

• Reduce font size in tombstone
• Give tombstone more breathing room from edges
• Use outline version of logo
• Move logo to top-left
• Don't use artist_display, use artist_titles with creation date(s)

Accommodate images for different sizes

Allow for portrait and landscape images

Clean up console log output

Filter what we display by time of year

Use a librarian programming calendar to preset filters of what the extension displays, e.g., only display works by Black artists during Black History Month, or only women during Women's History Month.

We should show a link to the filter we're using so they can learn more.

Hitting back button after new tab should show same artwork

Replace download button with SVG version

Use icon font? How are the download icons done on the website?

Implement date filter

Allow users to filter by a range of dates (i.e. 1850 to 2000).

@IllyaMoskvin I'm going to create separate tickets to help scope out the work better.

Publish extension on Chrome Web Store

Requirements for publishing to Chrome Web Store:

• Icon - 128x128 - https://developer.chrome.com/apps/manifest/icons
  SVGs not supported: https://bugs.chromium.org/p/chromium/issues/detail?id=29683
• Summary sentence (adapt from GitHub)
• Screenshots - 1280x800 or 640x400 (16/10 aspect ratio)
• Tiles:
  • Small - 440x280
  • Large - 920x680 (optional)
  • Marquee - 1400x560 (optional)

Hide the Download icon if the artwork is not CC0

Add settings to Chrome extension

Implement GA tracking

Show current filters on frontend

Blocked by #19. Related to #45 and #27. Proposed by @dylanirlbeck in #45:

It'd be nice to also have a banner of some sort that indicates if the extension is applying the filter, and if so what the filter is for (e.g. Black History Month).

We chatted about this internally, and we think that a good way to go would be to have some sort of hamburger icon in the top-right corner. When activated, it should open a drop-down menu with a list of filters. This menu is informational: these filters do not need to be editable from within the menu directly. At the bottom of the menu, there should be a link to the plugin's settings, where the user can edit the filters.

We might work with our designers on a mockup for this functionality, but it's not a blocker. For anyone interested in this, once initial work on #19 is complete, this ticket is up for grabs. As long as the code is clean and works well, we can do a design pass after the functionality has been implemented.

Write a README file

Add setting to filter by specific color

Generally, filters in settings would be good. Blocked by #19.

Update query for random artwork

We recently sent this same query with some minor tweaks to another developer. Make the same changes to the query in this app:

    let timeStamp = Math.floor(Date.now() / 1000);
    let artworkRequest = {
        "resources": "artworks",
        "fields": [
            "id",
            "title",
            "artist_display",
            "image_id",
            "date_display"
        ],
        "boost": false,
        "limit": 1,
        "query": {
            "function_score": {
                "query": {
                    "constant_score" : {
                        "filter": {
                            "exists": {
                                "field": "image_id"
                            }
                        }
                    }
                },
                "boost_mode": "replace",
                "random_score": {
                    "field": "id",
                    "seed": timeStamp
                }
            }
        }
    };

Replace logo with SVG version

Look at possible color replacement as well as size.

Port extension for support in other browsers

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension

Design layout for mobile screens

Possibility of making this a firefox extension?

Are there any plans to make this a Firefox extension in the near future? I'd be happy to help!! Thanks so much for this awesome extension.

EDIT: I now see #30 so I'll move the discussion there!

Handle long titles

Long titles do not look good, overlaps image, needs to perhaps wrap...

Implement responsive images for performance

This should allow us to balance load on IIIF server vs. delivering images close to the user's window size. See Responsive images on MDN for more info.

Recommended sizes to maximize likelihood of hitting an existing cache: 200, 400, 843.

Less likely, but also possible: 600, 1280, 1686.

Implement Styles filter

As discussed in #19, and related to #48

Experiment with setting to include shop products as well as artworks

Enforcing new code to be formatted with Prettier

As I was working though #49, it quickly became clear there is no standard formatting for the project (or at least a formatter that ships with the repo). I think it'd be nice to enforce Prettier for any new code that comes in to the repo, since that seems to be a fairly standard formatter for JS, CSS, HTML, and JSON -- all the tech this extension currently uses!

Foruntately for us, there is a GitHub action that will do exactly this, with minimal effort required on our part: https://github.com/creyD/prettier_action. There may be other GitHub actions, but this issue is more to start a discussion.

cc @IllyaMoskvin

Remove PNGs from history

Prototype. The file size is too big to justify keeping them in the history.

Download button doesn't work

Link download button to image link.