Adding Images

    Adding images to your website is a great way to enhance content and keep things interesting. The WYSIWYG editor supports not only formatted text, but also images that you upload to your website or embed from another website. Images have several properties that you can modify to affect their display on your website, including their height, width, alignment, and if they should include a border.

    NOTE: We highly recommend uploading images in the size you wish to display them. Relying on the editor to resize them can cause pages to load slowly and image distortion.

    ADDING IMAGES THROUGH THE WYSIWYG EDITOR

    Navigate to: Content > Add Content > Page (or content type of choice)
    If the page already exists navigate to  ‘Content’ and select ‘edit’ for the page

    1. Select the ‘Image’ icon in the editing toolbar (7th icon in from right - top row)
    2. Select ‘Browse Server’
    3. Select the file
      1. From the image list if it was previously uploaded
      2. Select ‘Upload’ in the ‘File Browser’ window
        • Select ‘Browse’ or ‘Choose File’
        • Locate the file on your local drive, select it, click ‘Open’
        • Select ‘Upload’
    4. Double click the ‘File’
    5. Enter your ‘Image Properties’ as desired:
      1. Alternative Text (it is STRONGLY RECOMMENDED you enable alt tags) - Enter alt tag text for the image to increase website accessibility for screen readers and other similar technologies. Alternative text will also be displayed in place of an image if  for some reason it cannot load. Example: If you have uploaded an image of Dan Brown at your store, the alternative text could be: Dan Brown at Store Signing. That will change empty alt code (alt=" ") to (alt="Dan Brown at Store Signing").  The alternative text should describe the item without using what the item is - if it's an image, don't use the word image in the alt text, if it's a video, don't use the word video, etc.
      2. Width/Height - We highly recommend removing any set width/height from this field for responsive themes. Images should be uploaded in the size you want to display them.
        • Using this control to determine the image size may cause the image to stop acting responsively on smaller devices and can lead to distorted images. We recommend uploading the image in the size you want it displayed and removing the width/height from these fields.
        • If you do, enter a value for the image's width in pixels. By default, your image's aspect ratio is locked, and changing this value will also change the height.Click the lock icon to switch between associating the width and height of the image and allowing you to set their values separately from one another.
          • Click the circular arrow symbol to redisplay the image in the Preview area using the dimensions that you have entered.
      3. Border - Enter the width of the border around your image in pixels. To edit additional border attributes, click the Advanced tab and then directly modify the Style field.
      4. HSpace / VSpace - Enter the inline CSS margin properties of your image in pixels. To edit additional CSS-controlled attributes of your image, click the Advanced tab and then directly modify the Style field.
      5. Alignment - Select the CSS float property of your image (Ex. Selecting ‘left’ will place the image to the left of any other text or images on the page).
    6. Link tab - Should this image link to something?
      1. URL - Enter a URL in this field to send visitors to the location when they click on the image.
      2. Target - Select the link target from the options provided.
    7. Advanced tab - Requires knowledge of HTML and CSS
      1. Id / Language Direction / Language Code / Long Description URL / Advisory Title - Use these fields to set the HTML img tag attributes: id, dir, lang, longdescr, class and title respectively
      2. Stylesheet Classes - Displays the classes, if any,  associated with the image in CSS style sheets.
      3. Style - Directly enter or modify the custom inline CSS assigned to the image.
    8. Select ‘OK’

    Your image should appear in the body of the WYSIWYG editor now. You can continue editing the page or save it.

    ADDING IMAGES TO ITS OWN FIELD

    An ‘Image field’ can also be added to each content type, to allow uploading the image to its own field, this is the recommended method of including images on content if you plan to use the image in a View.

    NOTE: Before adding a new field always check the dropdown menu for ‘Select an existing field’; if a field had been used on another content type, you can re-use it here.

    ADD THE FIELD TO THE CONTENT TYPE

    Navigate to: Structure > Content Types > Content Type of your choice > Manage Fields

    1. Add New Field
      • Label - Example: Event Image
      • Field Type - Image
      • Widget - Image
    2. On the next page, confirm ‘Public files’ is selected and click ‘Save Field Settings’
    3. Configure the field - There are several configurable options which you may review and adjust to your preference. The 4 we recommend you review are:
      • Required Field - if this should always be included on your content make it a required field so that staff members can not create the content without it.
      • Allowed file extensions - confirm png, gif, jpg and jpeg are entered
      • Enable Alt field - The alt attribute is used by search engines and screen readers in the event an image cannot be loaded. It is strongly recommended you enable this field and complete it when adding images.
      • Number of values - set the max number of images that can be uploaded for this content type.
    4. Save settings
    5. Once back on the ‘Manage fields’ page confirm you see the ‘Image’ field just created
    6. Save

    ADD THE IMAGE TO THE FIELD

    Navigate to: Content and select ‘edit’ for the content the images belongs with
    If you haven’t created the content yet, navigate to Content > Add Content > Content type of choice and create the content.

    1. Locate the ‘Image Field’ - Example: Event Image
    2. Select ‘Browse’
    3. Select the file
    4. Upload
    5. Enter the ‘Alternate text’ - Example: If you have uploaded an image of a store mug, the alternative text could be: Blue Store Coffee Mug. That will change empty alt code (alt=" ") to (alt="Blue Store Coffee Mug"). The alternative text should describe the item without using what the item is - if it's an image, don't use the word image in the alt text, if it's a video, don't use the word video, etc.
    6. Save

    This image is now part of your content.

    ADDING IMAGES TO THE FILE BROWSER DIRECTLY

    If you just want to upload images for use later you can add them to the file browser directly.

    Navigate to the my account page by clicking your username in the upper right hand corner.

    1. Select the ‘File Browser’ tab
    2. Select ‘Upload’ in the ‘File Browser’ window
    3. Select ‘Browse’ or ‘Choose File’
    4. Locate the file on your local drive, select it, click ‘Open’
    5. Select ‘Upload’

    The file has been uploaded to your website and will remain there unless manually deleted. You can use the instructions above under ‘Adding Images Through The WYSIWYG Editor’ to place the image on your site at a later time.