I have two websites online that display a full page mobile optimised image on desktop devices for a couple of seconds until the browser recognises the fact that I'm on a desktop computer and replaces the image with the higher resolution version. Not really optimal.
I previously had a stack that produced two versions of an image and loaded the low-res image on mobile devices, but, more often than not, the low-res would display on a tablet in portrait mode. Not really optimal.
What if there were a solution to load and display an image that has been optimised for each breakpoint? Well, actually there is now a stack that can do that – Srcerer from Shaking The Habitual!
Srcerer queries the browser width when a page is loaded and can deliver up to eight different images at various sizes with each image optimised for each screen width it is being viewed on. Srcerer even takes Retina displays into consideration and will deliver an optimised 2x image.
Using Srcerer means that your site's visitor only downloads (and pays for) the image that has been optimised for her/his device.
This does, of course mean that you are saddled with extra work for your site. You will need to produce, optimise and link the eight separate images manually, but there's workarounds for that too. Srcerer will automatically generate the code for linking to a folder of optimised images and an app called Retrobatch (a super efficient node-based batch image processor from Flying Meat Software) will allow you to program a workflow to automate the process (Stuart will even supply a pre defined workflow), However a Photoshop Droplet can do the same and it's even possible to resize the images via Preview.
Now personally, I'd be happy if this were the limit of Srcerer's abilities. But Stuart wasn't ready to stop programming there and has added properties to the stack that other image stacks simply don't have; Srcerer can produce cards with seven different shadow effects, Srcerer can add image captions, hover effects and blends and it can even add parallax effects. What more would you want from an image stack?
Stuart has given detailed descriptions of each of Srcerer's settings on the homepage, so I'm not going to reinvent the wheel, but instead would recommend that you take a look at the Srcerer product page.
Srcerer is not only the most advanced stack to date for delivering optimised images for each viewport, but it is also an otherwise extremely versatile image stack that I can highly recommend!
Until 9th November 2018 you can get a 25% discount with the code: sth-ninja-srcerer
Serious panorama photographers make 360º panoramas, or even 360x360º shots. A single panorama with medium resolution can consist of 64 or more single images that require specialised equipment to shoot and are stitched together with professional software.
However, an iPhone is all you really need to take panorama shots of your client's offices or studio.
Last week, Yuzool released Panorama 360, a stack that can display 360x360º shots. Michael is obviously a fan of panorama photography too and Panorama 360 answers my requirements fully. Not only that, but the original stack has been updated too and can now display a complete 360x180º images. Perfect.
Both stacks are very simple to use; just drop your image into RW's resources, link it to the stack and publish. That's just about all there is to it.
Panorama2 is now a free addition when you purchase Panorama 360 and all three of the stacks that were published last week are available at a 30% discount with the code HOTSUMMER. The offer expires on 31st July!
Here are two examples that I've put together. The 360x360 view has not yet been retouched: I quickly spliced the images today, as all of my other '3d' images were prepared for QTVR.
Only one thing troubles me with this scenario – I'm in a hurry and now I have to waste time swapping out stacks instead of simply adding the text and copy that was just supplied?
The copy is the simplest problem to solve – instead of using placeholder stacks that generate dummy text, use the original Header and Paragraph stacks that you intend to use and paste in your own dummy text. But what about the images? We want to show the client a layout, but cropping dummy images to fit??
Wait!! Marathia just released UltimateImage – a stack that will allow you to generate dummy images of any size and then – when the client finally condescends to supply the content – replace the dummies with the original images.
The dummy images are loaded via one of five servers – the first two place a coloured background with a text displaying the pixel size of the image, the remaining three load random images from their servers.
When the final content is ready for publishing, you set UltimateImage to Local Image, or Warehoused Image and add in your images saving yourself a couple of minutes with each image when compared to other placeholder stacks!
Image Source – Default: Local Image. Options: Warehoused Image, *Ipsum Image, Placeholder.com, **LoremPicsum, LoremFlickr, PlaceIMG
Force Fluid Image
Depending on the chosen placeholder server…
*Image Size – Width, Height
*Colours – Background, Text
**Specific Image – number – "-1"=Random
11 further settings to Flip, Rotate and add filter effects to the images.
I've used dummy content stacks to knock up a quick layout before, or to build a style template for suggested fonts and colours etc. UltimateImage helps save production time by reducing unnecessary actions.
The name SVG stack is slightly misleading. The stack will also load warehoused jpg, png and gif files and can display an alternate image on hover. The latter function is interesting especially as it allows you to mix formats.
SVG Image – Set Link
Alternate Text – Default 'Missing Image'
On Click – Do Nothing, Link To URL
On Hover – Do nothing, Show Alternate Image
Max Width – Desk, Tablet, Mobile
Position – Left, Centre, Right – Desk, Tablet, Mobile
Breakpoints – Standard, Custom
The fact that SVG has an option to display an alternate image on hover is a neat trick, which many will find useful.
CutOut is a stack that allows your text to gracefully flow around your image instead of the standard rectangular float that we have become used to. Check out the screenshot below:
The left half of the image displays a regular floating image. The right half of the image displays a floating image when using CutOut. Notice a difference?
CutOut makes use of the new 'shape-outside' CSS definition which is supported by all newer browsers (If you wish to know exactly which browsers take a look here). Shape Outside allows a text to flow around a pre-defined form. The form can be circular or polygonal. Polygonal shapes are highly experimental, but 0% 0%, 100% 0%, 50% 100% for instance, will create a triangular shape. CutOut degrades to a regular floating image on older browsers.
You can drop any Square (i.e. with equal length sides) image into CutOut and your image will automatically be displayed as a circular image which your text will flow around. If you require a more complicated shape, you'll need to search the web for shapes, or experiment.
How it works. Drag Cutout into a stacks page and you'll be presented with a dummy text. Replace the text with your text and drag your image into the image well in the stack settings panel. It's that simple. Of course, CutOut wouldn't be an S4S stack, if it didn't support warehoused images, but you'll also notice that it also has a setting for WebYep CMS images [Teaser]. WebYep2 is nearing release and CutOut already supports the new CMS system (as will a number of other S4S stacks).
Image Source – Drag & Drop, Warehoused, WebYep CMS
CutOut Shape – Circle (default), Elipse, Inset, Polygon
Image Float – Left, Right
Apply Border Radius – Default 50%
Spacing – Space between image and content below breakpoint
Image Width – px
Image Margin – Top, Bottom, Left, Right
Image Width – Below breakpoint
Content Type – HTML, Markdown, Text (default), WebYep Short and Long
Content Padding – Top, Right, Bottom, Left
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16