Image manipulation

From Online Business Wiki

Contents 1 Inserting and resizing image 2 Linking Images - Using Hyperlink Manager 3 Automatic thumbnail creation on display 4 Replacing link with an image

Inserting and resizing image

Theses are the steps you need to take in order to insert an image into a web page or a newsletter.

• Click on a spot where you want to insert the image and the cursor should be blinking on that spot
• Click the Image Manager button on the editor toolbar (this button is circled in the screenshot below)

• The image manager will pop up. Then you need to click “Upload Image” as circled below.

• Then it will come up with a window that has choose file. Select this and then browse to the place on your computer where you have your photos stored. You need to upload all of them.

• Then Click the upload Button. You will see that all the photos will appear in the folder lists below as shown.

• To insert the photos all you need to do is click on a photo in the folder lists... and then click the insert button (circled in green in the above screenshot).

• If the photo is too big you will need to resize it to fit in the column. To do this you need to roll your mouse over the bottom corner of the image until a little arrow icon comes up and hold shift and drag the mouse (while holding shift - this constrains the proportions of the image) so the photo becomes smaller. This is shown in the image below. Hold your mouse over the bottom corner and then Shift+Drag

Linking Images - Using Hyperlink Manager

To turn these into links, you need to go to SiteWalk and then go to the item on the page you want to edit and click "Click to edit region".

The Editor will open. You click on the item and it should become selected. Click on Hyperlink Manager.

Now you need to select the page you want to link the item to.

Click the little square next to URL and select the page from the drop down menu.

Now click "Select" and click OK.

Finally, you need to click Save and Publish.

Automatic thumbnail creation on display

You can create an automatic thumbnail using the following example:

<img src="/Utilities/ShowThumbnail.aspx?USM=1&W=100&H=100&R=1&Img="/images/myimage.jpg" />

Please note that there are W=100 and H=100 in that URL. These are the image width and height in pixels.

In that case the image path is /images/myimage.jpg. You can use that thumbnail creation technique in web app and product layouts where you can use tags to render image paths. Here are some examples

Web apps: <img src="/Utilities/ShowThumbnail.aspx?USM=1&W=100&H=100&R=1&Img={tag_myimage_value}" />

Products: <img src="/Utilities/ShowThumbnail.aspx?USM=1&W=100&H=100&R=1&Img={tag_custom1}" />

Replacing link with an image

For this example I have used a Login link rendered by {module_whoisloggedin}, but you can use this same method to replace almost any link with an image.

Firstly, you will note that the {module_whoisloggedin} renders something similar to the following code:

<div id="placeholder-whosloggedin" class="whoslogged">
No one logged in.
<a href="/MembersOnly.htm">Log in</a>
</div>

You have to make sure that the above div has a width and height. You can achieve this with the following code:

.placeholder-whosloggedin div {width:200px;height:200px;}

And here is the code that will replace the link with the image:

.placeholder-whosloggedin a{
display:block;
width:100px;
height:50px;                                 //these will set the height and the width of the image
background-image:url('/images/button.jpg')   //image path
text-indent: -9999px;                        //hides the text
}