How to Add Images

Uploading a new image directly into your content

Click on the image icon in the editing toolbar.

In the pop-up box, go to the Upload tab.

.

Upload your image. The box will then take you to the General tab. Include a visual description in the Image Description box and a title in the Title box for your image. If you are using a photo, include a photo credit in the Title field. The title will show on a mouse rollover (desktop) or long hold (mobile).

Click Ok.

Uploading a previously uploaded image into your content

Go to the image on your own site that you wish to include. If your image is uploaded to the same page, make a note of the filename of the image as listed in the "Files" tab for that page. If the image is elsewhere on the site, copy the link address of that image. If you are not sure how to find it, you can right click on the browser and select "Open image in new tab" and copy the link in the address bar.

CAUTION: Do NOT copy links to images on other sites. Doing so could put your site in violation of copyright laws. Also, you would have no control over the image. If the original site changes it, or removes it, the image showing on your site will also change, or be removed.

Click on the image icon in the editing toolbar.

In the pop-up box, be sure you are on the General tab.

For images you have already uploaded to the page's "File" area, find and select the image name in the Image list dropdown. Otherwise, paste the link to the image into the Source field. Include a visual description in the Image Description box and a title in the Title box for your image. If you are using a photo, include a photo credit in the Title field. The title will show on a mouse rollover (desktop) or long hold (mobile).

Click Ok.

Images, Copyright, and Permissions

See also Why copyrights matter 

Assume images online are protected by copyright

Never assume that an image is not under copyright without checking. You should not use photographs or images taken from the internet without explicit written permission or a license from the copyright owner. This applies to news photographs and stock images as well. Usually news and stock images must be licensed for use by paying a fee. Be sure to follow any terms laid out in the licensing agreement, including credit attribution. 

Where to get images

You can of course take your own photographs, and use them freely. You can also freely use the photographs from the LWVUS Flickr site, as those images are licensed for use by local Leagues. If you wish to use images that are out of copyright, make sure you do your due diligence and confirm they are actually out of copyright.

Image credits

Images should be credited. NationBuilder doesn't have an easy way to caption images, so one simple way to add an image credit is in the Title box of the image pop up, under the General tab (see above). The title text will pop up when an image is hovered over, or long pressed on a mobile device. After the title of the image, add "Credit: Photographer Name" or "Credit: Organization Name" as appropriate. You can use the word "Source" instead of "Credit." You can also link to a separate page listing the image credits if you prefer, or put the image in a 1x2 table with the image in the top space and the caption and credit below it.

Pictures of people

When photographing members of the public, request written permission to post the picture on your site and in other media (see sample below). 

If your League is hosting a large public event, inform the audience that the LWV reserves rights to all photographs and recordings.

LWV has a section about photographs that includes permissions and visual standards for photography in the LWV Brand Standards document.

Image Placement, Spacing, Borders, and more

The NationBuilder Image box has advanced options to help you style your image, change the spacing between the image and text, add borders, and more. To pull up the box once you have placed an image, select the image you want to work with, then click on the image icon in the menu bar. Select the Advanced tab to access the formatting options.

Vertical & Horizontal Space

Entering a number in the Vertical Space box will put vertical space at the top and bottom of your images. Similarly, entering a number into the Horizontal Space box will put horizontal space at the sides of your image. If your text is wrapping around your image, you will want to use these boxes to prevent the text from sitting right next to the edge of the image.

You just enter a number in the boxes. The values are in pixels. Usually a value between 10 to 20 will be sufficient, but if you want more space, you can increase the number.

Border Width & Style

Use these boxes to create a border around your image.  Pick the style you want for your border. It can be solid, dotted, or more. Then select a width for the border. This width is also in pixels. A width of 1 would make a thin line around the image. You can try different widths and styles to decide what you like.

Note: You need to pick a style as well as a width for the border to be visible.

Border Colors

The border will default to the theme color for borders in content. If you want a specific color for the border, you can adjust it using the Style box. Read the Style Box section for instructions, then add border-color: #colorcode; to the box, where #colorcode is the hex value of the color you want. LWV color codes are listed here, and standard web color codes can be found here. You can also use a color picker in image software to get the code if you are trying to match a color in the image.

If the color has an official web name, you can often use that instead of the color code. For example, you could also put border-color: green; if you want the border to be the standard web color green.

Note: The Style box will update to put your color in with the other border information once all three pieces are there. So if you picked a solid border with a width of 3, then added border-color: #005596; to the Style box, it will show up in the box as border: 3px solid green; 

Using the Style Box

The Style Box is a way to individually style the image beyond the default styling of your theme. The Style Box uses CSS (Cascading Style Sheet) commands. If you are familiar with CSS, you can use it to achieve more advanced styling and placement of the image. 

To learn more about CSS, you can explore the resources or try some tutorials here.

One of the more common things you may want to do with the Style Box is float the images so the text properly wraps around it. Detailed instructions on how to do that are available in our Accessibility FAQ.