Adding an image with Insert/Edit Image – Soapbox Support Center

Non-Profit Soapbox makes it very easy to add images to your content items and custom modules. Whether the image has already been uploaded to the server, or you are inserting a new image that hasn't been linked to before, you can use the 'Insert/Edit Image' button in the administrator to easily add imagery to your pages.

To begin, you'll need to start with the content item (or custom module) that you would like to add your images to. It helps if you've already got the majority of the page text already in the content item before you begin adding images.

Once you're in the editor, and your text is ready to go, place your cursor where you'd like the image to go and click the 'Insert/Edit Image' button, shown here:
image_button
This will bring up a pop-up window that looks a little something like this:
image_window

You can think of this popup as two distinct halves. The top half (properties section) includes parameters for how you can change how your image appears in the content item. The bottom half (browse section) is where you would select your files/add new files/edit/move existing files on the server. To put this another way, the top half is for image settings as they relate to the content item itself (the individual instance of the image), and the bottom half is related to the actual files on the server.

From this one window, we can add an existing image from the server to your content item, OR, you can upload a new image to the server, then insert that image into your content item. For this article, we'll first walk through adding new images to the server, then how to insert them. If your image is already on the server, please skip to the next section.

ADDING NEW IMAGES TO THE SERVER

To upload a new file to your images folder, you'll want to begin by opening the 'Insert/Edit Image' window, as described above.
Next, navigate in the folder structure on the bottom left to the folder that you would like to store your images in. For my image, I'll choose the images folder, shown here:
Now click the upload button shown here:
This will pull up the image uploader popup. From here, there are a number of options for different ways to make changes to the files before upload, including the ability to resize your image file to a smaller version for optimized display. You can resize your image after you have selected it through the uploader tool.

To select your image for upload, click 'Add', shown here:
Next, you can add files using the 'browse' tool, just like attaching a file to your email. You'll notice that once you select a file from your computer, it will be added to your 'Queue'. This allows you to go back to select multiple files to add all at one time.
[Note:] We recommend you use all lowercase letters and underscores instead of spaces in your image filenames, it can be helpful for browsers to render the links properly. You can rename files once you've added them to your queue by selecting them and clicking the rename button in the queue, shown here:
Once you've selected your file(s) to upload, click upload:
When your images are done uploading, they will all appear with green check marks next to them, you can now click the X in the top right of the uploader window to close this window.
Now that you're back to the main 'Insert/Edit image' pop up screen, you should see your new images in the folder that you placed them in. Confirm that they are there, then move on to the next step.

INSERTING YOUR IMAGE INTO YOUR CONTENT

Once you've uploaded your image(s), or if you skipped the previous step because your image was already uploaded, now you can insert your image into the page.

First, you'll want use the file browser in the bottom half of the screen to locate your image. Once you've found it, click it's file name to select it. You'll know you've selected your image when the URL field in the top half of the window fills itself in with the file path of the image, shown here:
Now, you can change some of the fields here to tweak how your image appears:
1. Fill in the Alternate Text to provide a description of your image for your visually impaired website users. This will automatically be filled in with the filename of the image, but some more descriptive text can go a long way to help the visually impaired enjoy your site.
2. Tweak the dimensions if you'd like your image to be a different size. Some tips for changing image size:
  1. We recommend you do not use these dimension fields to make the image any larger, as it will distort the image and become pixelated.
  2. Additionally, we don't recommend you use these fields to make significant reductions in image size. This can also distort the image for your users, as their browser doesn't always know how to compress all of the pixels appropriately.
  3. Lastly, it's generally a good idea to keep your images size proportional, otherwise you may stretch the image and distort it's appearance
3. Change the alignment:
  1. Left, Right, and Top are the most useful image alignments.
  2. Note that this alignment is relative, so a top alignment will align the image with the top of the text surrounding it, instead of at the top of the page.
  3. You can see how the alignment will change if you look at the preview area on the right.
4. Add a some margin to the image (spacing):
  1. This is especially useful for giving space beside the image and it's surrounding text
  2. Note that by leaving the box 'Equal Values' checked, it will apply the margin evenly around all sides. Un-check this to put different margins around the different sides.
5. Add a border to your image
  1. Check the box to add a border to your image.
  2. Be sure to give it a non-zero width if you'd like it to be visible.
  3. Make sure you give it a style
  4. Try to pick a color that will compliment your site's color scheme
Once you've successfully edited your images settings, you can click 'Insert' to drop it into your article
If you need to modify the image that you've inserted, you can select the image from the editor, and click the same 'Insert/Edit Image' button.