There are usually three ways to add photos to your website.
- You would like to add a photo to the body of an article
- You would like to add a photo to a rotating photo program
- You would like to add a photo to a photo gallery
Photos need to be resized to a smaller file size. They usually come off of cameras around 10MB and over 2000 pixels wide.
Ideally for a pop, you want them around 800 pixels wide and 100kb. You can resize using Photoshop or exporting from your photo management program and saving for email. This usually reduces the file size significantly.
You also want to rename your image instead of the number that comes off of the camer DSCN0001.jpg. Rename to something descriptive using keywords. The search engines read these words. For example, about-irestone-web-design.jpg
It's a good idea to organize and prepare all you photos first so you can upload them all at once.
Body of an article with pop up
Open your article, place your cursor in the left margin where you would like to insert your photo, even if you want it to be on the right.
Click on the Image Manager Icon
Now to keep thing orderly you can create folders and upload images.
When you create folders, remember the internet doesn't like spaces so use dashes. For example about-us or new-website-photos.
You can create folders inside other folders.
To create a folder click on the folder icon...
Before you upload a photo, make sure your uploading into the correct folder...
Click the upload button browse to your desktop and choose the photo or photos, you may choose multiple photos to upload all at once...
Create the proper image size, alignment, and margins
- URL select the photo you wish to use
- Alternate Text - Description of photo, this is what you see when your mouse rolls over the image, usually a descriptive sentence or phrase. For example Uploading a photo into Joomla.
- Change image dimension to 250, this is a good average size. Notice in the lower right, it shows the original image size.
- Alignment - do you want to notice the left or the right?
- Notice the Preview changes in the upper right.
- Put a 10 pixel margin on the left or right so the words don't touch the photo. Note that you have to uncheck Equal Values to do this.
Create the popup
- Choose JCE MediaBox Popups in the dropdown
- Select the correct image to popup
- Insert a title for the image, this is like the Alternative Text, you will see this when the image pops up.
Click on Insert on the lower right