Inserting an Image into Drupal CMS

Inserting an image with your content management system is easy and can add professionalism and variety to your site.

Here are a few tips to follow:

  • Resize images to fit your page. If you upload an image that is too large, your page layout can be disrupted. A good size for web images on most sites is approximately 400 pixels across. You can resize your images with a free photo editing program which will also allow you to add effects and crop, or you can use the simple resize tool that is built in to your content management system toolbar. (instructions follow in this tutorial)
  • Use the same width for images on the same page. It gives a clean look to your layout. 
  • Give images a bit of margin to keep them from abutting  the text. 5 px will be enough to keep your image from crowding the text.

Inserting your image:

When you are editing a page you can click anywhere in the text that you are adding to insert an image. A good rule of thumb is to put it before a paragraph that you want it to appear aside of. In this example, we will insert an image with the first paragraph and align it to the right of the paragraph.

Place the cursor just to the left of the paragraph and click once with the right mouse button.

Next, click on the insert image button. It looks like a small tree:

This will open a new window:

To browse for your image you will need to click on the link just to the right of the image url field.

This opens a new window where you will ACTUALLY browse for your image. Click the "Upload" button to begin.

This opens yet another window - this window allows you to perform the search.

Locate the folder where you have saved your image by using the folder drop down. Select your image by clicking once on it and then click "open".

 

 

This brings the image to the editor where we can resize it to fit into your site. Click "Upload" to complete the upload process.

Now your image is permanently stored in the editor "library".

To resize your image, click once on the name of your image. (its already selected if you haven't clicked anywhere else since the upload button).

Now click the "resize" button at the top of the editor page and type in the width that you would like the image to be.

Click the resize button. You will notice that a file with the same name and _0 has been created. This is the new resized photo.

You can click on the name of the file, or the image itself to select the image for insertion.

The large editor library window will close once you "insert" the image and you will be left with the smaller window with three tabs for "general", "appearance" and "advanced" image placement settings.

On the "general" tab, there are settings for Title and Image description. It's a good idea to fill these out so that your site is ADA compliant and to help with search engine optimization. Use good description and key words in these fields to achieve best results.

 

Next we'll use the "appearance" tab to set the parameters for our image.

On this tab, we will set the alignment to right and then give the image a bit of margin to keep it from hugging the text. This is a custom setting that you will need to type in. It is margin:5px;

Finally, you can click the insert button.

For additional questions or assistance in this area, please feel free to contact us.