Skip To Main Content

Website Instructions: Images


Images are an important asset to the site, setting the tone, visual interest and context of website content. Great care should be taken when considering and creating images to be used throughout the website.

Images with text

Text on images should not be embedded in images but instead contained in the HTML code. This improves search engine optimization and prevents text from being altered when images are resized. Text should exist within it's own container with a solid background to improve readability. 

Image upload INformation

There are two fields available for uploading images into the body of the page content type. The primary field is named "Upload Images” and the second one is named “Badge or Logo.” 

The “Upload Images” field should be used for uploading photographs or illustrations that do not contain text. The images in this field are automatically resized for mobile, tablet and desktop display and at small sizes most text placed inside the image will become unreadable. 

The “Badge or Logo” field is to be used for images that have text inside the image or logos. The images in this field are not resized for different displays and will be rendered at a fixed size of 150x150 pixels. This field also has a “Open File Browser” link that will allow you to view and insert other logos and badges that you have uploaded or that other users have uploaded. Jump below to the "Badge or Logo" instructions.


Uploading and placing an image

  1. Scroll below the "Body" field and click the "Choose File" button in the "Upload Images" section of the form
  2. Click the "Upload" button
  3. Select the style of image that you would like to insert into your "Body" field
    1. extra_large (Scaled to a maximum of 916x916 pixels)
    2. large (Scaled to a maximum of 550x550 pixels)
    3. medium (Scaled to a maximum of 366x366 pixels)
    4. small (Scaled to a maximum of 200x200 pixels)
  4. Place your cursor in the area of the "Body" field where you would like your image to appear
  5. Click the "Insert" button

Image Alignment

  1. If you already have an image inside the "Body" field, you can simply click the image and select "Float Left" from the "Styles" menu and the image will move to the left and the text will float around the right side of the image.

  2.  Selecting "Float Right" will place the image on the right and the text on the left

Example "Image Flow Left":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus risus ipsum. Ut sit amet consectetur justo. Quisque ac varius tellus. Nullam placerat vulputate arcu. Quisque at sodales risus. Nunc pulvinar vestibulum eros. Maecenas congue pharetra tempor.

Aliquam sit amet justo ante. Phasellus id scelerisque neque. Nulla auctor eros lectus, eu rutrum mauris varius nec. Vivamus elementum ultrices ipsum et auctor. Sed in arcu tempus mauris blandit sagittis vitae quis ipsum. Ut eu bibendum urna. Nam nunc nunc, maximus nec interdum at, posuere non leo. Integer diam odio, rhoncus id ultricies feugiat, vehicula sed urna. Mauris ac diam in nulla interdum vehicula eget quis turpis. Donec blandit odio nec turpis blandit, in tincidunt justo mattis. Nam elementum odio ac dignissim luctus. Praesent non facilisis massa. Aenean scelerisque tincidunt ex, id ullamcorper eros. Cras turpis nibh, fringilla in aliquam ac, scelerisque vel dui.

Etiam pharetra nisl non ligula condimentum feugiat. Aliquam eleifend vitae ipsum vitae interdum. Pellentesque vehicula tortor mauris. Etiam fringilla tellus vel metus varius tempus. Sed quis pulvinar erat, in accumsan quam. Praesent lacinia, diam a molestie lacinia, neque odio sollicitudin ligula, in egestas nunc eros ac libero. Suspendisse quis nisl in justo pretium sollicitudin et a turpis. Praesent eget mauris sed urna rhoncus ultrices et vitae metus. Nulla cursus tortor sed posuere iaculis. Sed ut dapibus turpis. Nulla ex libero, sollicitudin at mattis quis, facilisis ac eros. Fusce vestibulum varius lorem nec euismod. Nullam leo nunc, ultricies a laoreet vitae, dictum sit amet ligula.

Example "Image Flow Right":

Pellentesque rutrum scelerisque risus, a pretium nisi sollicitudin vitae. Phasellus vitae velit nec metus aliquam suscipit at ut felis. Sed imperdiet dapibus tortor ac egestas. Maecenas non nibh hendrerit nunc pretium egestas vel congue turpis. Quisque aliquam vestibulum pellentesque. Quisque quis est aliquet, porta nulla eget, ullamcorper leo. Cras odio neque, pulvinar vitae fringilla id, ultricies fermentum arcu. Nam vitae congue quam, quis iaculis lectus. Integer fermentum ultrices convallis. Morbi sed mollis tellus, ut pulvinar velit. Vestibulum sed libero eget risus ullamcorper tincidunt et sit amet tellus. Mauris non justo lacinia, accumsan nibh ac, condimentum ipsum. Maecenas enim magna, finibus ut venenatis nec, pulvinar id est. Maecenas ut felis scelerisque, feugiat sem sit amet, gravida enim.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam nec pretium augue. Vestibulum nec tortor faucibus, tincidunt sem in, maximus tellus. Vivamus eleifend nunc lorem, id rhoncus massa fermentum quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean dictum quis lectus vitae viverra. Aenean luctus condimentum sem, a porta nunc feugiat in. Aliquam lobortis euismod pretium.

Image Sizes

Extra Large:




Badge or Logo

  1. The first step to placing a badge or logo is to click the link named “Open File Browser” and search through the list to see if the logo or badge that you want to use has already been uploaded. You can click on the names in the list to view a thumbnail of each image. If the logo that you want to use is already in the list just double click the title and the photo will be selected.

  2. If the logo or badge that you want to use is not available then click the “Choose File” button select the image on your hard drive and then click the “Upload” button.

  3. Now that you image has been selected place your cursor in the area of the "Body" field where you would like your image to appear.

  4. Click the "Insert" button and your image will appear in the body of your document. 

  5. You can click on the image one time and then select "Float Left" from the "Styles" menu and the image will move to the left and the text will float around the right side of the image.

  6.  Selecting "Float Right" will place the image on the right and the text on the left.

  7. Here is a page showing some of the example web badges.

Communications and Marketing

Amy Prigge

Lehr Memorial: 304
525 South Main Street
Ada, Ohio 45810
Monday: 8 a.m.-5 p.m.
Tuesday: 8 a.m.-5 p.m.
Wednesday: 8 a.m.-5 p.m.
Thursday: 8 a.m.-5 p.m.
Friday: 8 a.m.-5 p.m.
Saturday: Closed
Sunday: Closed