DEFLIGRA STACKS

RapidWeaver + Stacks = Powerful Web Design



  • ResourceImg
  • Example (slideshow)
    Slide 1
    alt name
    alt name
    alt name
    alt name
    Slide 2
    alt name
    alt name
    alt name
    alt name
    Info
    Just imagine how much work space this slideshow would take if all images were imported directly into the slideshow stack! See the image below

    And if you feel like changing images… you can do it from the resources area - you don't even have to visit the slideshow page!

    The screen dump shows 3 columns - below I've created only two but with more slides in each… imagine!

    How?
    The slideshow is created with Joe Workman's cool Cycler Stack. Instead of adding images directly to the Cycler stack I have dropped them in a Resource folder and used the Resource Image Styler Stack to link to the images.

    Important!
    Remember: The Cycler stacks is set to auto height by default. So is the Resource Img Stack. To make the Cycler stack show your images - you need to set a px height for the slideshow.

    I've set the width of the ResourceImg width to 280 px and the height to auto. The height is auto calculated to keep proportions. And the height of the Cycler slideshow to 450px.
    alt name
  • Stacks Shop · Buy the ResourceImg Stack
    heart40red
Version
icon-58
Version 2.00

Made for
Stacks 2
Works with
Stacks 1.4.x
How do you do?
ResourceImg

Allows you to add a image from RW5's resources and style it.

Just imagine how much work space a slideshow would take if images were imported directly into the slideshow stack!

The ResourceImg stack is the perfect slideshow helper!

Questions? Shoot me… an e-mail.
About RW5's Resources
Remember - working with RapidWeaver's Resources you'll have to add the resources when a project is moved to another Mac. And it is when you download the RW Example file.

Also remember to name resources correct. No special letters in file names, no space… if you don't - resources won't work.

resourceimg

alt name
Settings
Height and width

Height: The height of the stack.
auto or in pizel

Width: The width of the stack
%, px or auto

Image & Path
paht/imagename if nested in a resource folder
image name if not nested in a resource folder

In this example the images is stored in a resource folder named 'exam'.

Alt name
Give the image an alternative name

Aligne Image:
center, right, left
or ie 50px (or any other value)

Shadows

Outer Shadow:
Add a soft shadow to the image
ie 0px 0px 10px
Choose shadow color.

To make room for the shadow add a margin. If the margin is too little your shadow might get cut off.
Tip
Try this (example left):

-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
Learn more about box shadows by visiting css3.info