--- title: Collages in the Cloud | BiblioCommons description: Learn how you can emulate the in-person library experience digitally by giving library staff and patrons tools to create, share, and discover book recommendations. image: https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/BiblioCommons_Blog_Collages-Cloud-Feature.jpg --- [Partner Portal](https://partnerportal.bibliocommons.com/hc/en-us) [Support](https://partnerportal.bibliocommons.com/hc/en-us/requests/new) [Careers](https://www.bibliocommons.com/careers) [![BiblioCommons\_logo\_RGB](https://blog.bibliocommons.com/hs-fs/hubfs/Logos/BiblioCommons_logo_RGB.png?width=2000&height=586&name=BiblioCommons_logo_RGB.png)](https://www.bibliocommons.com/) Why BiblioCommons? ## Featured Resources [![64cc72825ae66c58460a5783\_BiblioCommons\_Resource\_Video-Story-Lawrence-Polli\_Thumb](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc72825ae66c58460a5783_BiblioCommons_Resource_Video-Story-Lawrence-Polli_Thumb.jpeg?width=600&height=350&name=64cc72825ae66c58460a5783_BiblioCommons_Resource_Video-Story-Lawrence-Polli_Thumb.jpeg) Lawrence Public Library Creates Personalized Readers Advisory Services to Connect with Patrons](https://resources.bibliocommons.com/access-granted-video-lawrence-public-library-creates-personalized-readers-advisory-services-to-connect-with-patrons) [![Library 2.0: Why Everyone’s Talking About Digital Accessibility-Everyone-Is-Talking-Digital-Accessibility\_Thumb](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc728108678fffccadf55e_BiblioCommons_Resource_Blog_A11y-Everyone-Is-Talking-Digital-Accessibility_Thumb.jpeg?width=600&height=350&name=64cc728108678fffccadf55e_BiblioCommons_Resource_Blog_A11y-Everyone-Is-Talking-Digital-Accessibility_Thumb.jpeg) Library 2.0: Why Everyone’s Talking About Digital Accessibility](https://blog.bibliocommons.com/blog/library-2.0-why-everyones-talking-about-digital-accessibility) [See all resources](https://www.bibliocommons.com/resources) ## Why BiblioCommons? [Success Stories Hear how Library Partners are making an impact in their communities](https://www.bibliocommons.com/success-stories) [Our Story A better online catalog was just the beginning](https://www.bibliocommons.com/our-story) [Libraries We Work With Take a look at all the Partner Libraries that subscribe to BiblioCommons](https://www.bibliocommons.com/libraries-we-work-with) [News Stay up-to-date on the latest company updates with news articles, press releases, and announcements](https://www.bibliocommons.com/news) Solutions ## Featured Resources [![How EPL Makes All Formats Easily Discoverable on Its Online Catalog](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc7283a40d493701247bda_BiblioCommons_Resource_Video-Story-EPL-BiblioCore_Thumb.jpeg?width=600&height=350&name=64cc7283a40d493701247bda_BiblioCommons_Resource_Video-Story-EPL-BiblioCore_Thumb.jpeg) How EPL Makes All Formats Easily Discoverable on Its Online Catalog](https://resources.bibliocommons.com/access-granted-video-how-epl-makes-all-formats-easily-discoverable-on-its-online-catalog) [![Library 2.0: Inclusive Images and Text Take Your Website Beyond Technical Compliance](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc728263171ef951dfe9fe_BiblioCommons_Resource_Blog_A11y-Inclusive-Images-and-Text_Thumb.jpeg?width=600&height=350&name=64cc728263171ef951dfe9fe_BiblioCommons_Resource_Blog_A11y-Inclusive-Images-and-Text_Thumb.jpeg) Library 2.0: Inclusive Images and Text Take Your Website Beyond Technical Compliance](https://blog.bibliocommons.com/blog/library-2.0-inclusive-images-and-text-take-your-website-beyond-technical-compliance) [See all resources](https://www.bibliocommons.com/resources) ## Solutions [![Discovery Layer](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a211ced7fa857343a5cf_biblio-core-round.svg) Discovery Layer Accurate search results, easier borrowing, and endless discovery pathways](https://www.bibliocommons.com/solutions/bibliocore) [![Discovery Layer Add-Ons](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a211ced7fa857343a5cf_biblio-core-round%20(1).svg) Discovery Layer Add-Ons Unlock more ways to engage with patrons](https://www.bibliocommons.com/solutions/bibliocore-add-ons) [![Mobile App](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a2113ed2327dd1a577c3_biblio-apps-round.svg) Mobile App Deliver engaging content and promote discovery wherever your patrons are](https://www.bibliocommons.com/solutions/biblioapps) [![Website Builder](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a2119e3caf2ea2a27417_biblio-web-round.svg) Website Builder Showcase the best your library has to offer with a fully integrated CMS and webpage builder](https://www.bibliocommons.com/solutions/biblioweb) [![Events Calendar](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a211fe53659fbd9b0c10_biblio-events-round.svg) Events Calendar A patron-friendly way to manage and promote your library's programs and events](https://www.bibliocommons.com/solutions/biblioevents) [![Email Marketing](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a2118a7ef86b347b5dae_biblio-email-round.svg) Email Marketing Email Marketing That’s Personalized, Automated, and Integrated](https://www.bibliocommons.com/solutions/biblioemail) Services ## Featured Resources [![Library 2.0: How Accessible Is Your Mobile App? (Tips to Make It Happen!)](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc72835ae66c58460a58ad_BiblioCommons_Resource_Blog_A11y-Mobile-App_Thumb.jpeg?width=600&height=350&name=64cc72835ae66c58460a58ad_BiblioCommons_Resource_Blog_A11y-Mobile-App_Thumb.jpeg) Library 2.0: How Accessible Is Your Mobile App? (Tips to Make It Happen!)](https://blog.bibliocommons.com/blog/library-2.0-how-accessible-is-your-mobile-app) [![Creating Focused Emails That Will Delight Library Patrons](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc7280d4d4629cd9c4467a_BiblioCommons_Resource_Blog_Email-Structure_Thumb.jpeg?width=600&height=350&name=64cc7280d4d4629cd9c4467a_BiblioCommons_Resource_Blog_Email-Structure_Thumb.jpeg) Creating Focused Emails That Will Delight Library Patrons](https://blog.bibliocommons.com/blog/creating-focused-emails-that-will-delight-library-patrons) [See all resources](https://www.bibliocommons.com/resources) ## Services [Professional Services Support your library’s team with professional services](https://www.bibliocommons.com/professional-services) [Training and Support Comfort in knowing you're always supported](https://www.bibliocommons.com/training-and-support) Resources ## Featured Resources [![Email Marketing Planning](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc727f70e1ef2a2b0a928b_BiblioCommons_Resource_Template_Email-Marketing-Planning_Thumb.jpeg?width=600&height=350&name=64cc727f70e1ef2a2b0a928b_BiblioCommons_Resource_Template_Email-Marketing-Planning_Thumb.jpeg) Email Marketing Planning](https://resources.bibliocommons.com/template-email-marketing-planning) [![64cc7284d4d4629cd9c44a5b\_BiblioCommons\_Resource\_Blog\_Mktg-PR-to-Visionary\_Thumb](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc7284d4d4629cd9c44a5b_BiblioCommons_Resource_Blog_Mktg-PR-to-Visionary_Thumb.jpeg?width=600&height=350&name=64cc7284d4d4629cd9c44a5b_BiblioCommons_Resource_Blog_Mktg-PR-to-Visionary_Thumb.jpeg) Library Marketing: From Building Public Relations to Becoming Visionary Storytellers](https://blog.bibliocommons.com/blog/library-marketing-public-relations-to-visionary-storytellers) [See all resources](https://www.bibliocommons.com/resources) ## Resources [All Resources Access all types of resources like guides, templates, videos, and reports to learn best practices and get new ideas](https://www.bibliocommons.com/resources) [Webinars Register to attend upcoming live webinars and get access to on-demand webinar recordings that cover a variety of topics](https://www.bibliocommons.com/webinars) [Blog Dive into our blog to read about library trends, expert opinions, fresh ideas, and practical tips that you can use in your day-to-day](https://www.bibliocommons.com/blog) [Newsletters Sign up to receive the latest in public library topics, new product features, and upcoming events in your inbox](https://www.bibliocommons.com/newsletters) [BiblioCon Learn from public library staff and leaders that are experts in creating unforgettable, fresh, and engaging experiences](https://www.bibliocommons.com/bibliocon) [Contact Us](https://www.bibliocommons.com/contact-us) # Collages in the Cloud [November 16, 2017](https://blog.bibliocommons.com/blog/2017/11/7/collages-in-the-cloud) ### by Francisco Canas An integral part of the public library experience is walking into a branch and being greeted by a bookshelf filled with staff reading recommendations: [Top Ten Genre lists](https://christchurch.bibliocommons.com/list/share/79555600__christchurchlib/93459405_top_ten_british_detectives), [Books You Might Like if You Liked X lists](https://jocolibrary.bibliocommons.com/list/share/86660174_jocolibraryadultpicks/114368701_jocolibrary_-_adult_-_if_you_liked_jo_nesbo), [Cat-Related Historical Fiction Reader’s Choice lists](https://librarypoint.bibliocommons.com/list/share/137972312_crrlkids/227542289_crrl_kids_cats_and_kittens_everywhere), [Topic Guides](https://multcolib.bibliocommons.com/list/share/114928554_schoolcorps/138435283_multcolib_school_corps_picks_the_solar_system_and_space_grades_4-5), etc. Here at BiblioCommons, we try to emulate that same experience digitally by giving library staff and patrons the tools they need to create, share, and discover lists of hand-curated book recommendations. ![A display of books at Santa Monica Public Library.](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/SMPLGratitudeDisplay.jpg) A display of books at Santa Monica Public Library. With that digital experience in mind, the BiblioCommons Core Features team undertook the task of rebuilding our list creation tools from scratch. One particular goal of the project was to improve the visual appeal of our digital lists: to make them as attractive and engaging as the real-life displays that library staff use as the centrepieces of their physical library spaces. In practice, this involved building a feature that produces eye-catching collage images from the covers of the books included in our users’ lists. At the last BiblioCommons hackathon, two of my colleagues demo-ed an intriguing proof-of-concept project that used Amazon’s Lambda compute service to run [ImageMagick](https://www.imagemagick.org/script/index.php) and create collages for a given list of book cover images. We decided to take this initial idea and expand on it by improving the visual appeal of the collages and serving them to our users in near real-time as they added books to their recommendation lists. ## Collages ![A standard grid of album covers.](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/StandardGrid-1.jpg) A standard grid of album covers. Many digital services offer list creation tools for their users, and most of these services employ some form of cover image as part of their visual design. So while the general idea is nothing new, we wanted our list collages to be just a little more compelling than the typical four-image grid you see on many websites. We also wanted collages for different kinds of lists to be visually distinct so that our users could distinguish between various list categories (ranked lists, topic guides, etc.) from the cover image. Our user experience designers came up with a variety of designs and it was my job to build a system that would dynamically generate these collages from the book cover images for a user’s list. ## ImageMagick [ImageMagick](https://www.imagemagick.org/script/index.php) (IM) is a popular command-line application used to manipulate and create images in various formats. IM offers an extensive and flexible API, and can produce some pretty complex and wonderful images once you learn its intricacies. Our first challenge was to deal with the unpredictable nature of our users’ lists: the ImageMagick script needs to produce compelling collages with any number of book cover images of arbitrary dimension. This unpredictability ruled out using a static template or script. We decided to address this challenge by dynamically generating custom IM scripts based on the contents of each list. To do this, we built a NodeJS service that accepts a list collage request, generated the custom script, and ran it on ImageMagick to produce the collage. The list collage request specifies all the necessary parameters and data needed to construct the desired layout for that list: 1. The category of list to generate the collage for. 2. The anchor image (a specific book cover that dominates the layout), if any. 3. A list of URLs to all the remaining book cover images in the list. Upon request, our service downloads the book cover images and performs several tasks: 1. Detects invalid files, blank images, or images that are too low in resolution. 2. Extracts each of the valid images’ dimensions. 3. Computes all of the layout geometries based on the above dimensions, the number of valid images, the desired layout, anchor bib, etc. 4. Produces a unique ImageMagick script that, given the list of images as inputs, will create the desired collage. 5. Runs the custom script in a child process using the [simple-imagemagick](https://www.npmjs.com/package/simple-imagemagick). 6. Compresses the resulting collage image using [pngquant](https://pngquant.org/). 7. Saves the resulting compressed collage to Amazon S3 where it can be consumed by our application. A few samples of the collages produced by our script:   ![Polaroid Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/image2-2.png) Polaroid Collage Style Used for general lists.   ![Fan Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/image5-2.png) Fan Collage Style Used for general lists.   !["If You Liked..." Fan Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/131532275_anchor-2.png) "If You Liked..." Fan Collage Style Used for readalike lists.   ![Lattice Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/131642455.png) Lattice Collage Style Used for general lists.   !["If You Liked..." Lattice Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/131617886-1.png) "If You Liked..." Lattice Collage Style Used for readalike lists.   ![Polaroid Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/image2.png) ![Fan Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/image5-1.png) !["If You Liked..." Fan Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/131532275_anchor-1.png) ![Lattice Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/131642455-2.png) !["If You Liked..." Lattice Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/131617886.png)   ## In the Cloud Bringing the list collage service into production proved a very different kind of challenge. We wanted the images to be generated in near real time, so that a user can see the collage update almost immediately while adding books to their lists. We currently have about a half million user lists in production, and roughly 150 lists are created by public library staff and patrons every day. While the number of lists created daily isn’t unmanageable, we wanted a system that could easily scale to regenerate covers for all of our lists any time our designers made updates to the collage designs. As with our other production-ready features, we wanted monitoring, logging, testing, and instrumentation built into the service. [AWS Lambda](https://aws.amazon.com/lambda/) proved to be a very effective choice given these requirements. Lambda is a managed, [serverless](https://martinfowler.com/articles/serverless.html) computation service: your code executes on demand and scales automatically based on need. Most days, our collage generation function receives a few hundred requests and we pay only for the near-negligible amount of computation time used by this small number of requests. When we need to generate a half million images in bulk, the Lambda service automatically scales to handle the dramatically increased amount of traffic with no reconfiguration or further action required on our part. ## Architecture The new BiblioCommons list editor is built in React and served to the client by a JRuby on Rails application. That Rails application aggregates all the needed data from our backend Java services (bibliographic data, availability data, user data, book cover images, etc.) and serves this to the list editor. Book jacket cover images are fetched from a variety of third party services in real time. We obviously needed a place to run the NodeJS collage server and the (somewhat) computationally-expensive ImageMagick script: This is where AWS Lambda came in. Lambda also provides us with monitoring, dashboards, and logging right out of the box so we can keep an eye on usage and error statistics, error messages, etc. We also needed a place to store the collage images, and a content distribution network to serve them to our users worldwide. For this, we chose AWS’ S3 and Cloudfront, respectively. All in all, the collage system is made up of the following independent components: 1. The React client-side list editor. 2. A JRuby on Rails presentation layer application. 3. Java back-end API services. 4. The AWS Lambda function running the ImageMagick Scripts. 5. S3 for Storing the generated images. 6. Cloudfront for a Content Distribution Network (CDN). ![Our collage system workflow.](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/Collage%20Workflow.png) Our collage system workflow. The general workflow for our collage system is described by the diagram above. It goes something like this: 1. **Create List:** A user saves their list. Our back-end list service bundles together all of the important metadata for that list: the layout type, number of cover images, and a list of URLs to the cover images. 2. **Request Collage Generation:** This metadata bundle is placed into the SNS message payload and sent asynchronously to AWS. 3. **Trigger Script:** The AWS SQS service receives the message and forwards it to the Lambda service. This triggers our image processing script, which performs the task of downloading all of the required book covers, generating the custom IM script, and running that script to produce a collage. 4. **Save Collage:** The collage is saved to S3, which sits behind our Cloudfront cache so that the application can consume the cached collage images. Meanwhile, the client side waits until the new collage image is available on S3 and displays a preview to the user as they work on their book list. To the delight of our patrons and library staff, the entire workflow from message to finished collage completes within roughly 3 seconds 99% of the time. An alpha version of our React list editor was deployed for library staff testers earlier in the year and this early version included the collage generation service. Our participating librarian users were able to create many fine examples using our initial collage designs: [![Collage Example #1](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/image9-2.png)](https://sfpl.bibliocommons.com/list/share/433865467_sfpl_readersadvisory/986535447_black_against_empire) Collage Example #1 San Francisco Public Library readalike list for *Black Against Empire* by Joshua Bloom.   [![Collage Example #2](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/image11.png)](https://jocolibrary.bibliocommons.com/list/share/73805943_jclgreggw/970726737_new_releases_-_june_2017_-_johnson_county_library) Collage Example #2 Johnson County Library list for June 2017 new releases.   [![Collage Example #3](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/Screen%20Shot%202017-11-09%20at%2011_18_30%20AM.png)](https://pima.bibliocommons.com/list/share/328250817_pimalib_jb/991778087) Collage Example #3 Pima County Public Library list about the history of Pride.   ![Collage Example #1](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/image9.png) ![Collage Example #2](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/image11-1.png) ![Collage Example #3](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/Screen%20Shot%202017-11-09%20at%2011_18_30%20AM-1.png) We took the opportunity to gather as much librarian feedback as we could after this alpha release and tasked our designers with updating the collages to be more reusable, attractive, and permanent. The new editor and list collage designs are going public today as part of our latest major release and we will soon be regenerating new collages to bring all of our existing lists to life. We can’t wait to see what our library staff and patrons come up with! In the meantime, a few more interesting lists featuring our newest collage designs: !["If You Liked..." Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/2.png) "If You Liked..." Collage Style If you liked... *The Real Macaw* by Donna Andrews   ![Lattice Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/3-1.png) Lattice Collage Style Recommendations list for books about birds.   !["If You Liked..." Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/1-2.png) "If You Liked..." Collage Style If you liked... *Moby Dick* by Herman Melville   !["If You Liked..." Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/2-1.png) ![Lattice Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/3-2.png) !["If You Liked..." Collage Style](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/1-1.png) --- *Francisco is a Data and Analytics Engineer at BiblioCommons. His time is split between building discovery and content creation features for the BiblioCore product and advancing our analytics infrastructure.* Tagged: [BiblioCore](https://blog.bibliocommons.com/blog/tag/bibliocore), [Recommendation Lists](https://blog.bibliocommons.com/blog/tag/recommendation-lists) Share - [Tweet](https://twitter.com/share) Newer Post [Towards Web Accessibility: 7 Key Lessons](https://blog.bibliocommons.com/blog/01/10/2020/towards-web-accessibility) Older Post [Introducing BiblioCommons Engineering](https://blog.bibliocommons.com/blog/2017/10/12/introducing-bibliocommons-engineering) [![BiblioCommons](https://blog.bibliocommons.com/hubfs/BiblioCon%202023/white-logo.svg)](https://www.bibliocommons.com/) Join the *Love Your Online Library* newsletter to stay up to date on features and releases. Newsletter Sign Up ### Why BiblioCommons? - [Success Stories](https://www.bibliocommons.com/success-stories) - [Libraries We Work With](https://www.bibliocommons.com/libraries-we-work-with) - [Our Story](https://www.bibliocommons.com/our-story) - [News Articles](https://www.bibliocommons.com/news) ### Solutions - [Discovery Layer](https://www.bibliocommons.com/solutions/bibliocore) - [Discovery Layer Add-Ons](https://www.bibliocommons.com/solutions/bibliocore-add-ons) - [Mobile App](https://www.bibliocommons.com/solutions/biblioapps) - [Website Builder](https://www.bibliocommons.com/solutions/biblioweb) - [Events Calendar](https://www.bibliocommons.com/solutions/biblioevents) - [Email Marketing](https://www.bibliocommons.com/solutions/biblioemail) ### Services - [Professional Services](https://www.bibliocommons.com/professional-services) - [Training and Support](https://www.bibliocommons.com/training-and-support) ### Resources - [All Resources](https://www.bibliocommons.com/resources) - [Blog](https://www.bibliocommons.com/blog) - [Webinars](https://www.bibliocommons.com/webinars) - [Newsletters](https://www.bibliocommons.com/newsletters) - [BiblioCon](https://www.bibliocommons.com/bibliocon) [Follow BiblioCommons on Facebook (Opens in a new window)](https://www.facebook.com/BiblioCommons/) [Follow BiblioCommons on X (Opens in a new window)](https://twitter.com/bibliocommons) [Follow BiblioCommons on LinkedIn (Opens in a new window)](https://www.linkedin.com/company/bibliocommons) © 2024 BiblioCommons. All rights reserved. [Privacy and Cookie Policies](https://www.bibliocommons.com/privacy-policy)