All Collections
Website
How pages work
Include files and images on a page
Include files and images on a page

You can add images/videos to your NationBuilder pages in a few different ways, this HOWTO will outline each of your options.

Updated over a week ago

Table of Contents

Where to start

All page types have a Files tab where you can upload files. You can also just use the content area toolbar and click Insert/edit image. 

Upload files

You can add files directly to the Files tab within your page. Go to the page where you want to add the file and click on Files. Any Files tab in NationBuilder allows you to select files to upload or drag and drop files from your computer.

Supported file attachments: .ai, .bmp, .csv, .doc, .docx, .ico, .ics, .json, .pdf, .ppt, .pptx, .txt, .xls, .xlsx, .xml, and .zip

Insert an image 

Go to Content and click on the Insert/edit image button. A pop up will appear on your screen. You can directly upload an image here by clicking Upload and selecting the image from your computer, OR you can upload it from your Image list (this means you uploaded your image(s) to the Files tab already). 

Supported image files: .eps, .gif, .jpeg, .jpg, .png, .svg, .swf

Using the image list:

Ideally, you should have the image in the size you want it, prior to uploading it. But, when you click on the Insert/edit image button in the toolbar, you can also change the dimensions. 

The vertical and horizontal spaces are the amount of space (measured in pixels) you want between the image and anything else on the page. This is usually used to provide space between text in a surrounding article and an image.

You can also click on the image (once its placed in the content box), and drag to resize.

When adding an image to the top of your blog (above all blog posts), click on Files while editing the blog page and upload your image. Next, click on Template, and under <div id=“content”>, add <div class=“padbottommore”><img src=“filename.jpg” /></div>. That will add a little padding underneath the image and your first blog post as well.

Insert a video (or other rich media)

You can easily embed content from sites like YouTube, and flickr just by putting the URL on its own line in the content editor. Make sure it is not bolded, italicized, or hyperlinked. 

Don't put the embed code, just the URL itself, like: http://www.youtube.com/watch?v=meT2eqgDjiM

Over 200 services are supported thanks to embed.ly.

Link to an uploaded file

Store files, including .pdf and .doc, on a page. Go to your page and select Files to upload or drag and drop the file(s) from your computer. The control panel will refresh and show the file's name below the Select files to upload button. Right click on your file and select Copy link address.

Then go back to your page's Content. Introduce your file with a statement (e.g. Click here to download our fundraising report). Highlight the area of text you want to link the file to. Once you highlight the text, you can click on the chain link button within the toolbar. You can also link to another page or an external website using this method.

In the pop-up box, right click in the Link URL field and select Paste. That will paste the full URL where your file is stored in NationBuilder. In this pop-up box, you can also choose whether the link will open in a new window or the same window. Click the Ok button to place the link into your text.

Click the Save Content button at the bottom of the content screen. You can then preview your page to confirm that the link is working properly.

Related HOWTOs

Did this answer your question?