blog-tutorial-post-template

Tutorials

Setup & Customization

To get started, add the Enhanced Image stack to the editor and open the settings panel. In the Image Settings section select or drag and drop an image into the image field.

By default, the image will fill the width of its container. Use the Image Size setting to define an optional Max-Width for the image. If the max-width is smaller than the width of the container, the image will align horizontally according to the selected Align option.

Image Crop

You can optionally adjust the Aspect Ratio of the image by selecting from a list of provided options.

The image will crop to fit the selected aspect ratio. Use the Crop Position setting to change what part of the image is visible.

You can optionally change the Shape of the image by selecting from the list of provided options.

Each shape has specific settings for adjusting the Shape Inset. The inset is the distance from the image’s edge to the shape. The image will be cropped as the inset is increased.

Note: Some shapes also include Point Position settings to adjust the appearance of the shape.

The position off the shape over the image can be adjusted using the Shape X & Y Position settings. The image will not move with the shape. Instead, the Image X & Y Position settings can be used to reposition the image inside of the shape.

Use Image Rotate to rotate the image inside off the shape and Image Zoom to scale the image.

Mirror Image buttons are provided to allow you to mirror the image horizontally or vertically.

Frames can be created from a shape by enabling the Outline Shape option. The Outline settings adjust the thickness of the frame and only apply if the Outline Shape option is enabled.

Note: Some shapes instead have an Invert Shape option. This will create a transparent cutout instead of a frame.

Image Adjustments

You can optionally create custom filters for the image by selecting custom Base Colors. The “Black” color setting will apply to darker parts of the image while the “White” color setting applies to the lighter parts of the image. You can invert the dark and light colors by enabling the Invert Colors option.

Slider controls are provided to adjust the Brightness, Contrast, and Saturation of the image. You can also optionally enable the Adjust saturation by color option to saturate by any of the 6 provided colors.

The dark and light parts of the image can be further tuned using the provided Shadows and Highlights sliders.

The Tint slider lets you adjust the warmth, coolness, or color of an image. Change the Tint Color to change the effect of the applied tint.

Note: Red, orange, and yellow colors can be used to “warm” an image, while green, blue, and violet colors can be used to “cool” an image. Brown colors can be used to apply a sepia effect.

A Hide Changes button is provided to show or hide the applied image adjustments. This allows you to quickly compare the appearance of the original image to your changes.

Image Effects

Use the image effect sliders to apply optional effects to and around your image.

Image Extras

The Image URL field can be used to define a “warehoused” image URL.

The alt tag for the image can be defined using the Image Alt field.

Content can be added over the image by clicking the Enable Content option.

You can optionally nest Enhanced Image stacks inside of the content to create unique image layers. There is not a limit to how many layers you can add and each image can be styled separately.

Saving/Downloading Images

Customized designs made with the Enhanced Image stack can be saved/downloaded to your desktop as a single png image while previewing the Stacks page. To download an image, switch the Stacks page to preview mode. Then click on the image and hold the CMD key to reveal the download options. The first button will download the image at the exact displayed resolution. The second “2x” button will download the image at twice that resolution (for high pixel density/retina screens). When the image finishes generating it will display above the Enhanced Image stack. Click and drag the image into a folder or your desktop to save and rename the image.

Alternatively, you can download an image by pressing CMD +”p” keys (while the RapidWeaver app is active). In the browser, hover the image with your mouse and hold the CMD key to reveal the download options. Clicking either option will automatically download the image to your browser downloads location.

Note: Blur, feather, and grain effects are not supported in the downloaded/saved images.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Live Search 2

Live Search 2 has been updated with new features, improvements, and important bug fixes – all designed to make your site’s search experience even faster and more precise.

This update is free and automatic for all existing customers.

Don’t own it yet? Now’s the perfect time to jump in — Live Search 2 is 30% off for a limited time! No code needed — your discount is automatically applied at checkout.

New Features:

  • Added support for exact match searches using quotation marks around parts of a search phrase.
  • New option to show a “Clear Input” button.
  • Added Replace Character feature.
  • Now supports two separately defined search bars on the same page.
  • New option to adjust z-index.

Improvements:

  • Index file generation now detects and ignores duplicate content, such as text found in every page header and footer.
  • If any pages are missing from the index file, they will now still be searched dynamically.
  • Index file data is now compressed to reduce file size.
  • Pages at https://website/folder/index.(php|html) and https://website/folder/ are now treated as duplicates and will not be indexed separately.
  • Search results container height now only stays fixed during pagination — it will shrink dynamically for new searches.
  • When searching custom sitemaps, the default sitemap will now be ignored.
  • The popout search results container will now automatically hide when the search input is empty.

Bug Fixes:

  • Fixed an issue that prevented custom text/language settings from applying correctly.
  • Fixed a bug where result descriptions could fail to display a local section title.
  • Fixed a bug that could trigger an error if suggestions were enabled but the stack was not published to the page.
  • Prevents form submission before the page is fully loaded, avoiding unwanted page refreshes on slow-loading pages. A loading indicator is shown until the page is ready.

Check it out in action!

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software