Skip to main content

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.

Table of Contents


Upload files

You can add files directly to the Files tab. 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 the Content tab and click on the Insert/edit image insert_img.png button on the toolbar. (This is under Volunteer settings > Basics on a Volunteer page or Donation settings > Intro on a Donation page.) 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 insert_img.pngbutton in the toolbar, you can also change the dimensions. 

Using the Advanced tab, you can float the image so text can wrap around it. 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. Hint: Copy and paste this: float: left; margin: 0px 10px 0px 10px; into the Style box under Advanced for a quick and easy image float, as you can see here:

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.

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_selectfiles.png 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 link.png icon within the toolbar. You can also link to another page or an external website using this method.

toolbar.png

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.

insert_link.png

Click the Save Content save_content.png button at the bottom of the content screen.

You can then preview your page to confirm that the link is working properly.

 

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.