brushstroke the art of design header logo

BRUSHSTROKE ART & DESIGN
9079 Saint Andrews Way
Mount Dora, Florida, 32757
betsy@brushstroke.com
407.761.7007

Managing Your Images

The images in your site reside in the images folder. To manage your images, open the Joomla Media Manager. This is located under the Content Drop Down Menu.

J3-Joomla-Main-Nav-content

This will take you to the Media Manager Window.

J3-image-manager-landing

Here you can create new folders, upload new images, or delete existing images.

To create a new image folder click on the field on the right directly under the folders window, type in the name of the folder (lower case and no spaces. You may use hyphens or underscores for separations names).

To upload a new image, click on the folder you want the image to reside in, click the browse button to look for the image in your computer, click upload. Now your image is ready to work with. 

BACK TO TOP

The JCE Editor Media

The JCE editor has it's own built in media manager. You can access it on the right side of the image manager window that pops up when you click on the media icon. Below is a close up of the window icons and what they do. Some recent clients also have an extra image manager icon with a star. This is a built-in image editor. I will be adding a page with instructions for this app soon.

J3-image-editor-highlighted

To place an image in your article or custom html module:

1. Click on the page in the spot where you want the image to go to insert the cursor, click on the image editor button to open the editor popup window.

2. In the image editor window, navigate to the folder that contains your image. The user images are all in the media/sitegraphics folder.  If your site contains photo galleries, they are all inside their own folders inside the folders with the names of the galleries: ie: if your gallery is for a flowers gallery, the name of the gallery folder is most likely named flowers.

Once you have selected the image you want to insert, you can give it an attributes, such as: size, border, margins, and alignments. When you are done, click the Update button.

To resize the image, hold down shift and pull the bottom right corner of the image to the size you want. Or, you can select the image and click on the Image Editor Button once more to edit.

BACK TO TOP

Image Editor Shortcuts

If you need to upload an image from within the image editor, choose the media folder that the image is going to reside in, click on it, then click on the image upload icon on the right side of the image window to upload. You can also create a new folder, delete an image, rename, copy, cut, view, or insert an image. It comes in very useful.

image-editor-shortcuts

Drop files here window allows you to find an image in your computer and upload it to a folder in the images folder. 

1. Click on the browse button.
2. Find the image in your computer.
3. Then click upload.

Dropimages-browse-window

BACK TO TOP

Popup Media Box

The JCE editor has a built in popup gallery. that allows you to insert a video or image and display it in a popup window.

Before you begin, calculate your photo or graphic's size for the popup. In your formatting software, open the file, change the size to 800pixels (if this is the size you are using) keeping the restrain proportions button selected, then look to see what the height is. Now you have the correct size of your file.

  1. To create, place the graphic or photo you want to use on the page.
  2. Then select it again and click on the link icon, this will give you the link popup window.
  3. Click on the Browse button and find the image that you want to display in the popup (the image you placed and linked, or another image). For example... You want to display a poster, so you place the image at a thumbnail size, then link it to the same image but display it larger in a popup box.

Please, read below  to find out more about Web images. Please be kind, don't place huge images in your site. Format them for the Web.

links-window

4. Choose the popup tab and enter the information required depending on your intended use.

image-popup-window

5. Choose JCE MediaBox Popup for the popup type.
6. You may want a title and caption within the popup. enter them here.
7. Groups let you browse through several images in the same popup window. If you have several images in this page and they are all linked to display in a popup, you might consider grouping them so that once you click on one of the images you can see all of them within the same popup window. To group the images, type in the name of the group. Then apply this group name to each of the images that you want included in this popup.
8. Select if you want to have a Popup Icon display to let users know that this is a popup link.
9. Change the dimensions to the dimensions you want to display your image. You can always go down in size from your original image, but you can't go larger since it will display the image pixelated.  Your image is now linked to a popup window with a larger version of your image. Note: Your popup should never be larger than 800 pixels wide or 700 pixels high. Anything larger is too large for smaller laptops and mobile devices.
10. Select if you want this popup to pop up automatically when you open this page.
11. Hide the Popup Link... useful when creating image galleries launched from a single link.
12. Choose the Media Type: image, video, etc. If you leave this blank, the popup window will not work.
13. Click Update and test.

BACK TO TOP

About Web Images

DO NOT USE VERY LARGE IMAGES IN YOUR SITE!!! I can't stress this enough! This doesn't apply to the physical size 4x5", 6x8", etc. It applies to the file resolution. 

Images for use in the Web need to be formatted for Web. This means they have to have a 72dpi (dots per inch) or ppi (pixels per inch) resolution and should not be larger than 800 to 1000 pixels wide. You will need to have an image formatting software. Macs come equipped Preview and iPhoto which do a very good job. This will resize the photo to the physical size you want, crop it, or change the resolution (dpi). Preview is easier to use, unless you are already keeping and managing your files in iPhoto. There are many freeware available online for PCs.

Graphics and Photos need to be RGB not CMYK.

The color in your monitors, televisions, and Video uses RGB (Red, Green Blue). The photos from your mobile phone and digital cameras are RGB also.

Printing color is broken into 4 colors CMYK (Cyan, Magenta, Yellow, Black), CMYK will not work on the Web. Make sure that your files are RGB. If they were used for printing before, most likely, they are CMYK.

Files used for print usually have a resolution of 300 dpi and are huge. They are not for Web. They will take a long time to load and your clients won’t wait. Plus, it adds unnecessary bandwidth to your site. Your host provider allots you a certain amount of space and bandwidth. Bandwidth is the amount of data that is transferred from the server to your visitor's computer to display your site's content. The larger the images and videos, the more bandwidth. If you have a graphics intensive site, make sure your images are formatted correctly. It will really make a difference int he performance of your site and save you moniey on hosting fees.

Web Images

There are three types of images that are usually used on web pages: GIF, JPG, and PNG. There is an SVG format that has become somewhat popular because it is lines and not pixels so it can be enlarged and reduced in the pages without loosing much information. But, there are still browsers that don't support it.

GIF (Graphic Interchange Format) Images

Use GIF files for images that have a small, fixed number of colors. GIF files are always reduced to no more than 256 unique colors. The compression algorithm for GIF files is less complex than for JPG files, but when used on flat color images and text it produces very small file sizes. If you don't need all the colors because you have a very simple. two color graphic, you can use an adaptive palette. This will format the image into a very small gif.

The GIF format does not work well with photographic images or images with gradient colors. Because the GIF format has a limited number of colors, gradients and photographs will end up with banding and pixelation when saved as a GIF file.

GIFs can be saved as transparent files when you need to have an image floating in front of a background and don't want a background box around your image. Choose for the transparent color the same color that you are going to place the image in front of.

JPG (Joint Photographic Experts Group) Images

Use JPG images for photographs and other images that have millions of colors. It uses a complex compression algorithm that allows you to create smaller graphics by losing some of the quality of the image. This is called a "lossy" compression because some of the image information is lost when the image is compressed.

The JPG format is not suited to images with text, large blocks of solid color, and simple shapes with crisp edges, unless you format it in a high compression level. This is because when the image is compressed the text, color, or lines may blur resulting in an image that is not as sharp as it would be saved in another format.

PNG (Portable Network Graphics) Images

The PNG format was developed as a replacement for the GIF format when it appeared that GIF images would be subject to a royalty fee. PNG graphics have a better compression rate than GIF images which result in smaller images than the same file saved as a GIF. PNG files offer alpha transparency as well as animation.

PNG images, like GIFs, are not well suited to photographs. It is possible to get around the banding issue that affects photographs saved as GIF files using true colors, but this can result in very large images. PNG images are also not well supported on older cell phones and feature phones.

 

backtotop