Connect, Grow, Thrive

Adding images

Top image credit: courtesy of Ben Hoyt

Header images vs inline images

The image that you see at the top of this page is called a header. It appears over the Title of the page ("ADDING IMAGES" above) and it also appears in the teaser for this page. You probably clicked on the teaser when you came here, the Help page has a bunch of boxes with some text with "Read more" at the bottom, these are teasers. Below is a picture of my cat, this is called an inline image because it is in line with the text.

Image credit: courtesy of Ben Hoyt

Image restrictions

Header images must be large enough to cover the area: they must be at least 1270x300 pixels. Inline images can be any pixel dimensions. But the file size cannot be too big: all images on our site must be under 2MB. Finally, they all have to be jpg files. you can find more information about these requirements and how to meet them on this page.

How to add a header

When you open your page for editing, near the top of the page you will see four tabs with blue text on them: "Content", "Header", "Teasers", and "Layout". Click on "Header".

Click on the blue button that says "+Add files" and then find and select your file in the window that opens.

Now click on the button that says "Upload files". In a second, you will see your image and some fields where you can enter more information.

Where to get images (updated February 2020)

ETAS had a lawsuit filed against us in the past by Getty Images because of alleged unauthorised image use and we paid a substantial amount of money to get the suit dropped. Therefore it is very important to (1) only use images that are licensed for commercial use and (2) attribute the images appropriately to the rights holder so this can be easily verified. In the next section, there is a link that shows you how to find suitable images to use on the website. In the time since this page was first published, more resources have become available. You can find good images to use on the following sites: 

Where and how to enter attribution data

We must attribute our images! We absolutely cannot afford even the costs of simply defending ourselves in court! I've made a short video showing you how to easily find free images you can use along with the attribution information so we don't get sued. We won't be using a tool for image attribution at the moment, we will put the attribution directly in the text. If you're using a header image, please put the attribution on the top line of your content. If you're using an inline image, please put the attribution on the next line.

Your attribution should look like this:

Here's what you do:

  • Copy and paste the attribution in the appropriate place. If you are using your own image and just writing a "courtesy of..." attribution, this is easy. If you are using Foter for your attribution, change the text format to plain text (this is a button or a pull-down menu below the text editor window. Now paste in the computery code that you copied from Foter or wherever. When you switch back to "Filtered HTML", all of the links will be intact and you won't have to make them again. If you are copying links from somewhere else and they aren't written out in HTML already, you can use this online HTML converter to get text that you can paste in to our plain text editor.
  • Highlight the text of the attribution and choose "Caption" from the "Styles" menu in the text editor. The Styles menu is between "Format" (where you choose normal paragraph text or a heading) and the button to make bold text. That's it!

Here's a quick walkthrough of the process:

How to add an inline image

Open your page for editing and put the cursor in the area where you would like to put the image.

Click on the icon for the Image tool, it's at the right end of the text formatting toolbar, above the area where you're putting the text. It looks like the sun and some mountains on a postcard.

Click the button "Browse server" and then navigate to the appropriate folder. Are you an RC? Then you'll want to put your images in the rc-images folder. Are you a SIG Coordinator? You'll want the sig-images folder, etc.

Now click "Upload" and a window will open where you can select your file.

Now you should see your file in the server window (did you give your file a good name that you can find in a list?). Make sure your file is still selected and click "Insert file".

Now you will be back in our image tool. Just click OK and your image should appear in your text. Don't forget to put your attribution in the content!