We’re always looking for ways to show off our members’ incredible work here at PhotoShelter, and what better way to do that than feature gorgeous hero images on our home and marketing pages.
Our goal was to not only utilize beautiful images, but to make it really easy to change images and copy on the fly, while increasing performance and page speed to boot.
We’re really focused on building out new features using custom web components, specifically leveraging and iterating on the tools made available by the Polymer Project. As native browser support has grown we’ve only become more enthusiastic about the composability and reusability of well-built components. Building ourselves a solid foundation with components that have good tests, documentation, and demos is key. More of our process was outlined back in the fall by this post.
tripod-hero-marquee component represents the first element in a new
tripod-* component family, consisting of reusable UX/UI elements used to build the structure and layout of a webpage. By building the
hero-marquee as a web component we add another reusable component to our tool kit for future projects, allowing us to build faster and reliably with components we know the ins and outs of.
tripod-hero-marquee went through a handful of revisions during development — a handful of us around the office still call it by its original name: the
action-hero — but something that remained constant between iterations was the desire to maintain flexibility in all its forms and keep an eye on… the future!
It was important to us that the component was not only reusable for future development, but that each implementation be flexible in multiple ways: what content can be “passed into” the component — including what can be used as a background — how that content is styled, and where that content is positioned on top of the background.
The background of the hero can be anything; a solid color, an SVG, an image, or a video.
The component has two main properties that can be set to control the position of the content. The first,
contentLayout, has a default of
flexbox which in turn allows the second,
contentPosition, to be set to one of nine anchor points, from
bottom-right and so on. The ability to move text around within the frame of the component allows us to use images with focal points anywhere in the frame, opening up the variety of images we can use dramatically compared to our old layout that only centered content.
Additionally, the component can be styled from the outside in — that is to say that the content passed in to the component, be they
a or whatever, initially inherit their styles from the stylesheets defined for the whole page, but they also have the really cool ability to have their styles encapsulated within the component thanks to Shadow DOM.
Through a pair of custom mixins in the component,
--hero-content-grid-columns, which define the layout of the grid. With this option switched on, content can be laid out very discreetly and specifically within the hero, letting the implementer position content side by side, or in opposite corners. The possibilities are vast!
We’re not only using this component throughout our homepage and marketing site, but we kept the potential for open sourcing and implementation by our members in mind during development as well. Our use is right in line with how we envision our members being able to use
tripod-hero-marquee on their sites — leveraging another component (
ps-image-impl ) to fetch an appropriately sized, preprocessed version of the image from our CDN.
We’re looking forward to seeing CSS Grid hit that green line on the horizon to begin to utilize the versatility it offers. In the mean time we’re really loving the new photography-focused look the module brings to our home page, and still working on more ways to celebrate great imagery and make the lives of our amazing members easier.
The PhotoShelter Engineering Team is excited to be part of the growing web component community and the opportunity to #useThePlatform that comes with it. If that sounds like the type of community you’d be excited to be a part of then great news: we’re hiring! We’d love to hear from you about joining our team. Click here to find out more.