Picture
The Picture stack is the most powerful adn flexible image stack out there. This example that supplies an image for every possible type of device. This example is for an image that is to be displayed at full width on the site. It has the following sizes.
- Small - 640px
- Small Retina - 1280px
- Medium - 1024px
- Medium Retina - 2048px
- Large - 1200px
- Large Retina - 2400px
1200px is used for the Large becuase that is the max site width defined inside Site Styles. All Retina images are double the size. While the retina image are optional to add, they really make a difference when viewed on a retina device.
More Features
- Customize images for Dark Mode
- Lazy load images for faster page load speeds
- Warehouse your images and have full control over their paths and names
- Protect your images from being easily copied via right click or drag and drop
- When warehousing, you get full supoport for all of the latest image formats such as svg, webp, gif and mp4 (modern alternative to gif)
SVG
Scalable Vector Graphics (svg) can be easily added to your site with the SVG stack. It has basic controls to help you cusotmize the fill and stroke colors of the contained SVG. It also allows you to easily cusotmize your SVG with swatches.
Audio
The Audio stack allows you to easily add audio to your webpages. You can play all web firiendly audio formats. It even has full support for .vtt caption files for full accessibility.
The stack leverages the native players in each browser for a smaller footprint on your webpage.
Video
The Video stack allows you to easily add videos to your webpages. You can play all web firiendly video formats. It even has full support for .vtt caption files for full accessibility.
The stack leverages the native players in each browser for a smaller footprint on your webpage.
Embed
The embed stack is a generic wrapper stack that should automatically make most embed codes responsive that you get from other websites. The below embed is simply the embed snippet that you get from YouTube. You can paste in the embed code from your service into the stack.
Progress Bar
Show your progress. A simple way to add static progress bars to your layouts.
25%
Almost There (90%)
Share Sheets
The Picture stack has built-in support for share sheets. Simply click on the image below and a share sheet will appear (if you are in a supported browser). You will then be able to share that image through the share actions available on your device.
Video Tutorials
Below are video tutorials that are relevant to the stacks used on this page.