What is the Image component?

The Image component places an image on your page. The image can be acquired from the filer folder or can be added by copying and pasting a full URL from another website. Images can also be added within the Text component. This section demonstrates how to add a filer folder image to your Bento page using the Image component.

The image component imports all image metadata from the filer folder. If you have not yet added metadata to your image, click here to learn how.

Presentation

How to implement the Image component 

  • From the main Bento Administration dashboard, click Pages (Figure 1).

Figure 1

  • Click the page to which you want to add an image (Figure 2.1).

Be sure the page is published so you can preview it in a browser (Figure 2.2).

Figure 2

  • In the section you want to add the image, click the Available Components dropdown menu and click Image (Figure 3.1).
  • Click Add Component (Figure 3.2).

Figure 3

  • Click the magnifying glass icon to search your filer folders for the image you want to use (Figure 4).

If you have not added metadata to the image in the filer folder, you can add all fields manually from the component.

Figure 4

  • Click the name of the folder that holds the image you want to use (Figure 5).

Figure 5

  • Click the left downward-facing arrow to select and add the image (Figure 6).

Figure 6

  • The image has been added and a thumbnail appears on the page (Figure 7.1).
  • In the Alt text box, type a descriptive phrase about your image (Figure 7.2). This text shows up if a user's connection is slow and the image does not display.
  • Type caption text in the Caption text box (Figure 7.3). If you want this text to display, click the OFF button so it displays ON.
  • In the Credit text box, type the attribution for the image (Figure 7.4). If you want this text to display, click the OFF button so it displays ON. We recommend you include this if the image is licensed.
  • Use the options in the Image options section to choose an image size, align your image on the page and link your image (Figure 7.5).
  • Click the Advanced Options section for more image options (Figure 7.6).
  • When finished, click Save (Figure 7.7).

If you added metadata to the image, these fields will auto-populate when you add the image to your page.

Click the Wait, how are these fields displayed? link to view how captions and credits appear on your image (Figure 7.3).

Figure 7

  • Click Preview site in the top right side of the page to view the image in a browser (Figure 8).

Figure 8

  • Your image displays on the page with the caption and credit text (Figure 9).

If your image is smaller than 200 pixels in width, only the credits will appear on the image. The caption only appears when the user rolls over the image with their mouse.

Figure 9

How to add an animated GIF

You can add animated GIFs in Bento in much the same way you add regular static images. The only caveat is that when adding the animated GIF to your Bento page, you must select the original image size or leave the size unselected (indicated in the dropdown menu by a series of dashes) in the Image options section. Choosing any other image size options will result in lost animation and your image will appear statically. Figure 1 is an example demonstrating the two options that can be chosen and all other options that should be avoided.

Keep in mind that image size options are based upon your image's original size. The example below reflects the unique image size options for a particular image. Your image size options may be different.

Figure 1

Additional image properties

Linking your image

You have added your image to the page but what if you want to alter the size of the image or align it on the page? The Image options and Advanced sections of the Image component tool offer additional functionality. This section shows what you can do in these sections.

  • In the Image options section, click the Image size dropdown menu to choose a preset size for your image (Figure 1.1). The image sizes are generated automatically and are relative to the original size of your image. (warning) If you choose a size smaller than 200 pixels your caption text will only appear when the user rolls over the image with their mouse.
  • Click the Image alignment dropdown menu to align your image with any other elements on the page (Figure 1.2).
  • Click the Link image options dropdown menu to link your image in one of several ways (Figure 1.3):
    • No link - leaves your image as a standalone, unlinked element.
    • Add link - link to an external webpage or website. Example: http://www.pbslearningmedia.org/help/
    • Link to page - link to another page on your Bento site.  To link to a page on another Bento site, use Add link.
    • Link to document/media - link to an attachment from your filer folder such as a pdf file or video file.
    • Open original image in overlay - opens the image in its original state.

View short tutorials for each link option: 

 

Figure 1

 

Resize and crop your image

  • In the Advanced section, click Show (Figure 1).

Figure 1

  • Type a numerical value in the width and height textboxes (Figure 2.1). These dimensions overwrite any dimensions assigned to the image metadata. 
  • Click the Crop checkbox to crop the image upon resize or click the Maintain aspect ratio checkbox to keep the correct image ratio (Figure 2.2).
  • Type a numerical value in the Vertical space textbox to add padding between the top and bottom of the image and any content around it and in the Horizontal space textbox to add padding between the sides of the image and any content around it (Figure 2.3).  (warning) By default, the image component has zero padding. If your image requires padding, you must add it here.
  • Type a numerical value in the Border textbox to add a border around the image (Figure 2.4). The higher the number, the thicker the border.
  • Click Save (Figure 2.5).

Figure 2

 

How to add image metadata

  • From the filer folder, click the image thumbnail, image title, or Change to open the image and enter metadata (Figure 1).

Figure 1

 

  • Fill out all of the available fields (Figure 2.1).
  • If you want to select a different image, click Show next to Advanced (Figure 2.2).

Maximum character limit for caption text is 140 characters including spaces. Maximum character limit for credit text is 30 including spaces.

Figure 2

 

  •  Click Browse to search your computer for another image (Figure 3).

Figure 3

 

  •  Click Save and continue editing to save the changes and remain on the page or Save to save the changes and go back to the image component screen (Figure 4).

Figure 4

 

How to track image events

Use the event tracking feature to track how many times images on your Bento site have been clicked. Learn more about image tracking in Bento

All images you want to track must be linked.  Learn more about this

  • When adding an image, click Show next to Advanced (Figure 1).

Figure 1

 

  • Click OFF to turn on the functionality (Figure 2).

Figure 2

 

  • In the Event category textbox, add the type of object that is being tracked. In this case, it will always be image. This is a required field.
  • In the Event action textbox, add the type of event that users perform. In this case, it will always be click.  This is a required field.
  • Use the Event label textbox to add additional reporting dimensions so you can tell which image you are looking at in the results. This field is optional.
  • When finished, click Save (Figure 3.4).

Figure 3

 

How to view tracking results

  • Open the Google Analytics account associated with your Bento site.
  • In the left hand navigation menu, click Behavior (Figure 1).

Figure 1

 

  • Click Overview (Figure 2.1) >> Events (Figure 2.2) >> Overview (Figure 2.3) to view all click events on your site.
  • Click Event Category to view events by category name (Figure 2.4).
  • Click Event Action to view events by action name (Figure 2.5).
  • Click Event Label to view events by label name (Figure 2.6).

Figure 2