Search
Wednesday
27May2009

Inserting an Image

Squarespace's editor allows you to upload, align, and insert an image within it using the Insert Image button.

Note: When inserting images into a page or entry, it's easier if you add your text to the page first and then insert your images in afterwards.

Step 1 - Select Image Insert Point

Point your cursor where you want to insert the image. Note that this may not always be where the image actually will appear. For example, if you want to insert an image so it is near the top of a paragraph of text and right aligned, then you actually place your cursor at the start of the paragraph just before the first character.

Step 2 - Access Image Area

Click the Insert Image button.

Step 3 - Access 'Upload New Image' Area and Choose a File to Upload

If you're inserting an image from your computer, click the link to Upload an Image, then click the "Choose File" button.

Note: Image files should be all lowercase with no spaces or punctuation within the file name. In addition, you'll want to insure your images are properly rotated the correct way before uploading them, and ensure this is saved as a GIF, JPG, or PNG file.

Step 4 - Select Image On Computer

Select the image on  your computer and click the Open button.

Step 5 - Upload Image

Click the Upload File button to upload the image to your Squarespace site.

Step 6 (Optional) - Select Alignment Type

Once uploaded, you'll see the image previewed in the Image Preview window.  Click the Alignment link to set the alignment options for your image.

Note: To display images on the same line in a row, set the alignment to inline. See this video.

Step 7 (Optional) - Resize Image

Click the Resize link in the image insertion window to resize your image.  Set the desired pixel width in the New Image Width field.  This will resize your image in your content, click Resize Original Image to apply the change.

To create a thumbnail, enter the desired thumbnail width in the New Image Width field, and check the Create a Thumbnail box.  Click to create thumbnail (this will link to your full-sized image).

Need help creating a clickable thumbnail? See this video tutorial.

Step 8 (Optional) - Link Image

In the image insertion window, click the Link/Caption link.  Enter the URL you want to use for your link in the Link Location (URL) field.

Need help creating an image link? See this video tutorial.

Step 9 - Insert Image

Finally, click Save and Close for your image to be inserted.

Don't move your inserted images around by dragging and dropping them with your mouse, otherwise you'll break any alignment settings applied to them.
Are your images taking a long time to load? Check the file size -- images should be under 100k (even as low as 50k, depending upon the dimensions). Refer to your image software documentation for instructions on optimizing your image for the Web.

PrintView Printer Friendly Version

EmailEmail Article to Friend

« Importing Movable Type Entries | Main | Embedding a Video »