Introducing....Srcerer - A brand new stack from Shaking the Habitual


(Stuart Marshall) #1

Hi All,

Srcerer

I have just released a brand new image stack…Srcerer!

Yes - I know we all have countless image stacks in our RW toolkits but I can assure you that there are no others quite like this.

Srcerer’s key function is for responsive image delivery. Srcerer allows you to link up to 8 different-width versions of each image and produces code that lets the browser select the most appropriate size for whatever device / screen the image is being viewed on (you can even tell Srcerer stack how an image is used on the page for even better results). This is huge for speed and SEO!

But that’s not all. Srcerer also allows you to make your images look amazing too! You can:

  • Create Banner / Hero images using ‘Cover’ mode
  • Add content on top of your image (in one of 6 preset positions)
  • Add content beneath the image (i.e. a caption)
  • Use any stack(s) as content
  • Make the image a link
  • Create beautiful looking ‘cards’
  • Add hover effects
  • Add a parallax effect
  • Use blending modes

Please check it out. And if you like it then until 9th November you can get 25% off with the code sth-srcerer-launch

Any questions / feedback / queries welcome :slight_smile:

Thanks,
Stuart


Picture size compress for RW8
(MRO) #2

Very cool! This is a really good one :+1:


#3

This looks really powerful. I’ll be checking this one out.

Congratulations on the project.


(Stuart Marshall) #4

Thanks a lot @Basswow and @Bioguy. Much appreciated.

It is a powerful stack but hopefully one that is easy enough to use/understand. To help with that I’ve now added a couple of videos to the web page. The first demonstrates Srcerer in action and the other looks at creating the required image ‘set’ and linking these to Srcerer stack using a magical Warehouse ‘formula’ approach!!


(Ken) #5

A very clever idea and great, obviously, for a few images prepared manually. However, I would certainly recommend Retro Batch for bulk images together with your automated process (presumably) an algorithm that can be imported into Retro.


(Stuart Marshall) #6

Yes - would 100% agree with the RetroBatch recommendation. It’s a great little tool and in fact I demo it in one of the videos. I have a workflow set up that reads a folder of images, resizes them to all of the required widths, renames them to include the width value and then writes them all to another folder. It takes a few seconds for a whole batch of different images. Happy to share this workflow with any one that uses RetroBatch.


(David Freels) #7

So Stuart, if I had to pronounce the name of this stack out loud, what would it sound like. I’m just curious.


(Stuart Marshall) #8

Ha! Sorcerer.

I just sneakily removed the ‘o’ to tie it in with the underlying src and srcset code that it uses for the images. Though thinking about it now I should maybe have gone with ‘Sourcerer’!


(Marten Claridge ) #9

Nice work, Stuart, this is a really handy stack that addresses a very popular need.

Keep up the good work!


(Stuart Marshall) #11

Hi All,

I’ve just pushed out a HUGE update for Srcerer stack. Or should I say Srcerer Bundle?!

Yes - Srcerer now ships with 3 distinct image stacks. Each developed to meet particular needs / challenges that designing for the modern web brings.

Srcerer now contains the following stacks:

  1. Srcerer (Sizes) - This is the original stack and allows you to add up to 8 different sizes of the same image. For example you could include a 320px wide version right through to a 3200px version! The appropriate image is then shown for whatever device the image is being viewed on. You can even tell Srcerer stack how you use your images at the different breakpoints to give an even more efficient approach to image delivery.
  2. Srcerer (Art Direction) - This stack allows you to add up to 4 different versions of an image and have these appear at different (fully configurable) breakpoints. What this means is that you can have different sizes, different crops, different compositions, different aspect ratios (etc) appear on different devices which therefore allows you (the designer) to fully control how your images appear across all screen sizes.
  3. Srcerer (Single) - This stack operates just as a regular image stack and is therefore perfect for images that are perhaps fixed width across all devices.

And if that wasn’t enough, all 3 of the stacks let you add any / all of the following ‘extras’:

  • Add content on top of your image (in one of 6 preset positions)
  • Add content beneath the image (i.e. a caption)
  • Use any stack(s) as content
  • Make the image a link
  • Create beautiful looking ‘cards’
  • Add hover effects
  • Add a parallax effect
  • Use blending modes

Hope you like it :smile: