Blog items tagged with "image-management"
As a general rule of thumb, any images that will be placed into text modules should be resized using an external image editing program such as Microsoft Picture Manager or Picasa before it is uploaded to the Exponent CMS File Manager.
Resizing your images to the exact pixel dimensions that they will appear on the website helps:
- Reduce the amount of time it takes to upload the image to the File Manager
- Optimize loading time for the page the image(s) is on
- Control the amount of disk space and bandwidth that is being used by the website
Example Image that Needs Resized
The image below is a prime example of an image that should have been resized before it was uploaded to the File Manager and inserted into the text module. The image looks slightly distorted and hangs over the side nearly into the next content module beside it.
By right clicking on the image and selecting “View Image” the image will open up in a new tab and show the actual size of the image.
As you can see in the image above, is the actual size of the image is substantially larger (1085px wide by 695 px tall in reality) than how it appears in the text box that is only 273px wide. This image should have been resized to 273px wide by 185px tall.
To properly resize the image you must first open it up in your picture editing software. For the purposes of this Blog Tip, I'm using Microsoft Picture Manager.
Once you've opened the image in Picture Manager, select the “Edit Picture” button at the top of the editor.
After you've selected “Edit Pictures,” on the right side you can select to “Resize” the image.
Once you select "Resize" on the right hand column, you have the option to type in the new pixel dimension size that you want for the image, or you can reduce the image size by percentage until you reach the dimensions that fit the space that your image will be placed in.
Once your image has reached the desired size, you can choose to save over the existing image or save a new smaller version of the image.
Once you've re-saved your image to the size it needs to be on the website, you can then upload it to the Exponent CMS File Manager and place it onto the site. Read more on uploading files to the Exponent CMS File Manager.
As you can see below, the new resized image is crisper and no longer hangs outside of the boundaries of the text module. Read more on Inserting Images into Text Modules.
This is the proper way to manage images on your Exponent CMS website!
To insert an image from the Exponent CMS File Manager into a Text module, you must first click the edit icon on the text module to begin editing the module.
Once you've clicked the edit icon, you will be directed to Exponent's text editor:
To insert an image into a text module, you must first place your cursor before the sentence in which you want the photo to flow.
Once you've selected where in the text you want the image to flow, you can then go and select the image you want by clicking on the Insert/Edit Image button in the text editor tool bar.
Once you've clicked the Insert/Edit Image button, you will be prompted with an Insert/Edit Image dialogue box. To select the image you want to insert into the module, you must then click the “Browse Server” button.
After you click the “Browse Server” Button, the Exponent CMS File Manager will open, allowing you to navigate to the image you want to insert (Read more information on how to upload new files to the Exponent CMS File Manager):
To select the image you wish to insert into the text module, you must find the image in the File Manager and then click on the Green arrow next to the image underneath the “Actions” Column of the File Manager:
After you've selected your image, the Exponent CMS File Manager will automatically close and your image will be inserted into the Insert/Edit Image dialogue box where you can select positioning, linking and padding for your image as well as giving your image an Alternative text title:
The Image properties dialogue box also has two tabs called "Links" and "Advanced" where you have other image configuration options. If you want to embed a link into the image, click on the "Link" tab. Here you can define the URL you'd like to link to and also determine whether that link should open up into a new window.
On the Advanced tab, you have the option to type in a pre-determined CSS style class for your image such as "border" if there has been a CSS style sheet created that puts a border around your images. Here you can also add an Advisory title for the search engines to let them know what the image is that's being displayed.
Once you've finished configuring your image, click the “OK” button. You will now see the image pop into your text editor in the position you've defined:
After you've clicked save, you're all done! Your image has successfully been inserted into the module and will appear on the page: