IMAGE WAREHOUSING for RapidWeaver Projects
In this tutorial we are going to look at using a 'warehouse' folder to:-
- Store images on your server and
- Use those stored images in individual pages in your RapidWeaver project.
By keeping your images warehoused on your server in a sort of library and "referencing" them on your pages, as opposed to directly embedding those same images into your project using drag and drop, you can reduce the size of a RapidWeaver project and make any site more efficient. Further, there is a known problem when using embedded Images in Extra Content areas in blog pages, wherein the images don't display properly on blog posts: this issue can be overcome by using warehoused images in lieu of images embedded directly into the project.
RapidWeaver makes our life easy by allowing us in Styled Text areas to use HTML tags and still apply the built in formatting tools on those image tags just as though they were images dropped into the page. Great! This holds true for Text Stacks, Text Blocks, Styled Text Sidebars and Headers and Footers in many plugins, as well as the content areas of TabLoom and Accordion amongst others. We are going to take advantage of this functionality by adding HTML coding into some of these pages which points to our warehoused images and displays them in the page in the correct position, just as if they were dragged and dropped.
Workflow
- Use an FTP client to upload some images to our server.
- Write some image tags that reference those images in our RapidWeaver page.
- Apply formatting in RapidWeaver to wrap text and more.
Image Uploading
We start by making a folder on our server. We usually use a donationware app called Cyberduck for this. Some hosting options have a file browser in the control panel you can use too. Why don't we keep things simple, and make a folder called images and place in that 2 pictures in jpg format called picture1.jpg and picture2.jpg. With Cyberduck, that simply means dragging the files onto the Cyberduck browser window and dropping them on the images folder. Simple.
Image Tags
Here we write some simple HTML to add to our page that brings in one of the image files we placed in the folder on the server. So if you are working on a Styled Text page, you simply type the following ( with your customisations ) where you want to put the image on the Styled Text Page.
<img src="http://www.yourdomain.com/images/picture1.jpg" alt="First Image" title="Title1" />
Replace www.yourdomain.com with your own website's details, and this should all be good to go. In RapidWeaver if you are using this in a styled text area, make sure you highlight this code (leaving an empty single space either side for ease later), go to the Format menu and choose 'Ignore Formatting'. It should turn pink in the edit window. Check the tag is working by going to the Preview and see if the image is present. If not, check the url to the image you have in the tag and make sure it is correct.
We can add more attributes to the tag, including height and width to display the image at slightly different sizes on different pages if required.
<img src="http://www.yourdomain.com/images/picture1.jpg" alt="First Image" title="Title1" height="400px" width="640px" />
Please ensure you have a space before the forward slash to make sure the tag 'self closes' properly. This is to avoid the unnecessary separate closing tag.
Applying Formatting.
Now we have the image in the page, how about getting some text to wrap around it? No problem! We make sure we still have the code highlighted, and now we go to the HTML part of the Format menu (or you can use the < > bit at the bottom of the edit page in many parts of RapidWeaver 4) and apply 'Align Image Right' or 'Align Image Left' and add some text after it. Any formatting you can apply to an image from the menu can be applied to the tag.
Linking The Images.
Maybe you want the image to link to another page? We'll let you into a little secret... you can add a link using the RapidWeaver add link dialogue too! Highlight the code and click the Add Link button. RapidWeaver makes it that nice and simple.
Benefits
We did cover these earlier in brief, but they are worth repeating.
1) Reducing the size of RapidWeaver projects. This crops up more and more as people up the amount of media included in their websites. Keeping the images out of the projects by putting them directly on the server will be of more and more benefit as your site grows. A 200 page site will not have a very big project file if all the media is warehoused like this. A 20 page site with many images dropped into RapidWeaver (especially if they are big) can get unwieldy.
2) Efficiency. If an image is used in many page but referenced like this, then the browser will not keep re-loading it but use the copy in it's cache it downloaded before. This makes the pages load faster and uses less of your monthly bandwidth allocation o your hosting too!
3) Updating. You want to update the image for something used on many pages? Well, if it's being used in the way we talk about here, you can simply replace the image on your server with one with an identical name and it's been updated all over the site.
Well, we hope this helps. Please get in touch or use the forum if you need more details.