Uploading and then managing images in your My Artisan Web site is easy, especially if your images are already properly prepared for display on the web. If you need a quick and easy way to resize, crop, compress, and prepare your images for the web, see our recommended image editing programs. Once you've edited your images and prepared them for display on the web, you're ready to upload them to your My Artisan Web site.

My Artisan Web image size standards

My Artisan Web requires that images you upload comply with these guidelines:

FILE SIZE: No bigger than 100 kb (the smaller they are, the faster they will load for your viewers).

DIMENSIONS: No bigger than 600 pixels wide. There are some exceptions- see our tutorial on using the Image Rotator(coming soon).

TYPE: jpeg, png, or gif

In addition, be sure that your image file names are one word, lower case, and contain no spaces or capital letters, and the shorter the better. For example, if you had a picture of Mom and Dad, do not name the file Mom and Dad.jpg, but rather name it momdad.jpg or mom_dad.jpg.

If you're unfamiliar with digital images and their file size, check out our Image Sizing How To.

If you need help finding out the size or dimensions of an image file, see How to find the size of an image.  

Uploading an image to My Artisan Web

The images you want to upload need to be on your computer's hard drive. Before uploading, they need to be in our recommended format, size, and dimensions (above.)  If the images you want to upload are coming directly from a digital camera, you'll need to resize them and get them ready for the web. Learn more in our How to Understand Image Sizing.

Before you can use an image in an article, you must first upload the image to your My Artisan Web account. Once an image is uploaded, it exists online as its own file and can be embedded in articles.

My Artisan Web has two ways you can upload an image to your website:

  1. Upload an image through the frontend article editor
  2. Upload an image using the Media Manager in the backend

First, let's do it the easier way, from the frontend. 

Uploading an image from the front end article editor

Make sure that you have set your browser to allow the display of pop up windows for your website. All front-end image functions require the use of pop up windows to accomplish these tasks ahead.

Task 1 - Navigate to the Front End Editor (1 minute)

Log into the frontend and open any article. You will see the familiar editing window: 

Article Editor

Take a careful look at all the icons that sit in a row just above the editing window. You'll learn to use several of these icons today.

Task 2 - Get to the 'Stories' Directory (2 minutes)

First, look for this picture icon: Image as shown in the screenshot below.

Article Editor

 

Click on this image icon. You will open a pop up window that takes you straight to a directory inside your account where all your images reside, named "/stories." If you are unfamiliar with the term "directory" please check out our How To on directories and folders

The screenshot below shows the pop up window displaying the /stories directory.

Image Editor popup

Inside the /stories directory there are both images and sub-directories. Inside of these sub-directories can be more sub-directories, into which you can organize your images and other types of documents and files.

As you can see in the screenshot above, there are three directories that My Artisan Web has already created for you. Don't worry about them at the moment – the "imagerotator" and "pdfs" directories serve a different purpose. For the moment, do not upload any images into those existing directories.

Scroll through this open window and you will see the various images that already exist inside /stories. You should see images that you recognize from your "out of the box" website. If you selected the 'Restaurant' option when creating your site, your /stories directory will look like the screenshot above.

You might notice that these images are very small, smaller than when they actually display on your website. That is because what you see here are thumbnails, or smaller versions of photos that are smaller so they can be viewed in a visual list.

At the bottom of each thumbnail you can see the name of the image and then two numbers with a cross mark.

Image thumbnail

These numbers are the dimensions in pixels of the image, and reflect the true height and width as it will display on the website, not the thumbnail dimensions.

All the thumbnails in the /stories directory are presented in this smaller size so that you can scroll through them easily. But don't worry- when you upload a 200 x 300 pixel image, it will display correctly on the website, no matter how small the thumbnail is.

When you upload an image to your account, it will reside either in the /stories directory, or in a subdirectory within the /stories directory. For now, we will just upload an image directly into the /stories directory.

Task 3 - Upload an Image to the /stories Directory (3 minutes)

To upload the image, click once on this Upload icon:Uploadas depicted in the screenshot below.

Image Editor popup

After clicking the upload icon, you should see a second pop up window that opens on top of the first pop up window, and looks like the window framed in red below:

upload

This second pop up does allow you to upload more than one image at a time, but we do not recommend it. Click here for a better way to upload multiple images at once.

The window tells you that the image much be in a certain file type format (jpg, gif, or png) and must be smaller than 500kb.

IMPORTANT: My Artisan Web strongly recommends your images to be no larger than 2000kb. Images larger than 2000kb are liable to "break" your website or cause it to load very slowly for your viewers. Keep the image size below 100kb to ensure that your pages load quickly and the images don't overload your website.

First, click on the "Browse" button as shown below. This will open yet a third pop up window that will seem familiar to you. This third window will be a navigable view of your computer's hard drive. Find the image on your hard drive that you would like to upload.

upload browse

After you've found your image, click on it once to "load" it into the "File Name" field field at the bottom of pop up window. Then click on the "Open" button once.

After you click "Open," the third pop up window will close, and you will return to the second pop up window. However, notice that the field to the left of the "Browse" button now has text in it, which is the "address" of the image on your hard drive.

Now click the "Upload" button. My Artisan Web will quickly load the image into the /stories directory and create a thumbnail of it. Now the image exists as its own file on My Artisan Web, and it can be used in as many places as you like, as many times as you like!

If you want a different size or version of the same image on your website, you will need to edit the image first and then upload it again as a different version. Be sure to give it a second unique name, so that you don't overwrite and replace the first image you uploaded. You can use a simple naming convention like "imagename-large" and "imagename-small" to keep the file names distinct.

NOTE: It's very important to understand that once an image file is uploaded, and thus its URL is assigned, you cannot move the image into and out of directories.

The reason for this is simple: when you place the image inside an article, My Artisan Web refers to this URL to load the image into the article. If you move an image to a different directory, My Artisan Web won't know where to find the image file in the system, and your article will have a broken image link.

This also means that if you change the image, it will change everywhere it is displayed, and not just in one article.

For more information on how to effectively organize your images check out 'How to Organize Images.'

Inserting Images into Articles

Task 4 - Insert an Image in an Article (5 minutes)

Now let's put your image into the article you have open. From the "article edit" screen, place your cursor next to the word where you want to insert your image. Once you have the cursor there, click the image icon and you'll get the same pop up window as before.

Scroll through and find the image you uploaded. In the upper left hand corner of the image thumbnail, you'll see a small box. Click the box once and you'll see a thumbnail of your image load in the space to the right. The two red arrows in the screenshot below point to the check box and the preview box.

Image Preview

Look for the red circle around the word "URL." To the right is the URL of the image you've selected. Again, you can take this URL and put it into another browser window to test what the image will look like on the web.

Click the "Insert" button in the lower right hand corner. The pop up window will immediately close, and you'll be returned to the Article Editor. You will now see your image inside the article.

Formatting text around an image

When images are inserted into an article with lots of text, they must be properly formatted relative to the text. A very common mistake new users make is to not have enough white space around an image. Formatting the text around an image is extremely important in making your website look professional.

Task 5 - Format the Image in the Article (5 minutes)

To format the relationship between text and image in any given article, open the article and then click on the image once. Clicking once will put a black border around the outside edge of the image, showing that you've selected it.

Now click on the image icon in the toolbar and you'll see a new pop up window that looks like this:

manipulate

This is the Image Formatting window. There is a preview of the image on the left side, and several options to change the image's properties to the right.

IMPORTANT: Do not control the size of images using this editor. Always resize the image using your image editing software first, and then upload the adjusted image. Adjusting the size of the image in this editor may distort or degrade the way it looks.

On the right hand side of the pop up window you are given options for positioning the image inside the article, and adding white space around the image, so that the text doesn't overlap or abut your image. See the two red arrows in the screenshot above.

Play around with the "Positioning" options and check the "Positioning Preview" window to see how the image will sit next to the text.

Use the options in the "Distance to surrounding text" boxes to add white space around the image. If your image is positioned in the "float left" position, you'll definitely want to add 10 pixels of white space to the right of the image, and probably 10 pixels around the bottom as well.

When you are done placing the image inside the article, click the "Save" button and you will now see the image embedded into the content article, and controlled by the white space and positioning you've given it.

Be sure to always check the look of an embedded image by viewing the page just as a visitor to your website would see it (i.e. not in the editing window.) Sometimes what looks good inside the article editor doesn't look as good out on web. Text has a funny way of changing its flow around an image depending on how you are viewing the article.


My Artisan Web is a Vermont based company that is committed to lightning fast websites that are securely hosted and completely supported. Although we live in a rural area, we are technologically clever and always up to date with our services, coding, and design recommendations.

ADDRESS: My Artisan Web
White Glove Joomla Hosting as a Service
214 Main Street Brattleboro, VT 05301
CONTACT Tel (802) 579-1340
sales@myartisanweb.com

GET SOCIAL WITH

ARTISAN WEB AND PRINT (our parent company)