Inserting an Image

Content Management
Insert an Image: 
To insert an Image, have the image uploaded to your Resource Library.
CLICK HERE to learn how!
Once uploaded: Click on the  icon

Then Click on Browser Server, Or if you know the Path to your image, type or paste it in the URL field: (something like "/_upload/images/...")
      (Once selected a Preview will display)

Change the sizeof the image with "Width" and "Height",  will lock the ratios, so you're image doesn't skew or stretch, click it to toggle and unlock the ratio  will reset the image to its original size. 
Create a Border around your image by typing in the size of your border, like 1 or 5 pixels. (The color and style of this border is within the CSS) 

Link your Image - Create your own graphic buttons easily! Link to any web address! 
Just type in, or copy/paste, the URL under the LINK tab in your Image Properties. 
For Best Practice, if the link is leaving your website, you'll want to change the target to open a new window: 


You may have to play around with the size of your image to have it fit well in your content. Here is a 200w x 100h image to our Mini Golf Scorecard App site: For the rounded corners, or transparent backgrounds (no white background), you'll have to save it as a PNG (Portable Networks Graphics) or a GIF (Graphics Interchange Format). PNGs and GIFs are the most common for transparent backgrounds. 



Ensure your Image will fit on your Mobile Site: 
If you have a mobile site you'll want to make sure your image will fit nicely on your mobile site and your website. This will require you to do some HTML coding, but here are some simple steps to get through it. This will allow your image to fit in your content pages. You can change the width percentage to fit more images, or make the image smaller. At 100% it will fit the width of the screen being viewed.  
  1. With you image in your WYSIWYG editor, click on the  button. 
  2. Find the text: starting with <img
    3. it will looks something like: <img src="[YOUR IMAGE PATH HERE]" width="[IMAGE WIDTH]" height="[HEIGHT]" alt="" />
  3. After "img" insert the following: width="100%" class="M_INLINE" 
  4. Remove: width="[IMAGE WIDTH]" height="[IMAGE HEIGHT]" 
  5. It should now read something like this: <img width="100%" class="M_INLINE" src="/_upload/images/WinterCheer.png" alt="" />
The "width=100%" will fill the screen's width, if you want this to be smaller, you can change the percentage, or if it's a smaller image (around (200x200) or smaller) you can leave the width/height.

"/_upload/images/WinterCheer.png" is the path URL for your image in your Resource Library, surrounded by the quotation marks. It will end up looking like this:





Article ID: 291, , Modified: May 16, 2013 at 10:20 AM

Add Feedback

Share this article

Print