Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Panoramas with RapidWeaver

In May 2014, I reviewed YuzoolThemes' 40th stack. It was a panorama stack. As a panorama photographer, I was excited about the stack, because it allowed me to display 180º panorama photographs – the type that most mobile phones will take today. However, as a panorama photographer, I was also a little disappointed. Panorama was limited to 'just' 180º.

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.

Sankt Gallen Grüningerpaltz 180º panorama

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.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Ultimate Images in RapidWeaver

The client said that the website must be finished by evening – yesterday evening.
But guess who didn't yet supply the copy or the images.
Somehow, we need to get a layout design up and ready for the content – when it finally arrives. Not a problem – we have placeholder stacks that will automatically generate dummy text and load dummy images and if the final content ever arrives, we can just swap out the stacks and fill them with the client's content.

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!

UltimateImage – Marathia
Stack settings
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
*Custom Text
*Font Size
*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.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

SVG Stack For RapidWeaver

I recently read a plaidoyer on one of the forums that argued that warehoused images are unnecessary – most RapidWeavers don't take advantage of the function. Well here's proof that the statement just can't be true. The new SVG stack from Doobox is targeted specifically at warehoused SVGs, now giving us a choice of three stacks that can display an SVG.

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 – Doobox


Stack settings
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.

Comments

CutOut – Floating Images in RapidWeaver

Floating images. There's a stack for that – right? Right the tenth, or eleventh stack from the top of the library! Float an image to the right, or left of your text content. I never used it because I come from the world of DTP and found that floating images could look quite terrible compared to a professional layout app. However CSS is slowly catching up and Will Woodgate has released a new stack that takes advantage of the latest CSS additions: CutOut – a free stack from Stacks4Stacks.

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:

CutOut – Stacks4Stacks
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 – S4SCutOut 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).

Stack settings
Image Source – Drag & Drop, Warehoused, WebYep CMS
Standard Image
Retina Image
CutOut Shape – Circle (default), Elipse, Inset, Polygon
Image Float – Left, Right
Apply Border Radius – Default 50%
Breakpoint
Spacing – Space between image and content below breakpoint
Image Width – px
Image Margin – Top, Bottom, Left, Right
Image Width – Below breakpoint
Image Link
Content Type – HTML, Markdown, Text (default), WebYep Short and Long
Content Padding – Top, Right, Bottom, Left

With some experimenting, CutOut will allow you to create some very interesting text flows around your images. Oh, and did I mention that CutOut is a free stack?

Comments

Zoom, Zoom – Magnify images in RapidWeaver

Many online stores have a useful feature – if you hover over an image of the article you're viewing, the image will enlarge underneath your mouse so that you can view details.
Image Zoom from RWextras used to do exactly that, however, it disappeared for a while. Now it's back – freshly updated and free of charge!
RWextras Zoomy

Zoomy is the new name for a simple stack that enables an attractive magnification effect for RapidWeaver images. Magnification can take place on mouseover, grab, or click. There are also a couple of other settings built in to change aspects such as the zoom amount, animation speed and mouse cursor.

Zoomy will work either with images you drag and drop into RapidWeaver or images stored in a warehouse location. Compatibility is offered with all major web browsers. And Zoomy is responsive.


Stack settings.
Image source allows you to add either Dragged and Dropped Images, or Warehoused Images.
Mouse Cursor gives you the option of seven different cursor styles.
Zoom Trigger has the options Click, Grab, Mousover, or Toggle – Grab is my favourite.
Duration sets the fadeout time once the cursor leaves the image.
Magnification is a percentage of the original size for the enlargement.

Looking for further settings? You'll be hard pressed to find any, the above are all that's needed.

Zoomy is a neat little stack that does exactly as it says on the tin and has the advantage of being both responsive and free.

Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.