Images

This documentation was modified on 04/10/2019, with the Insert Feature

Using images on your website should be done with careful consideration, just like any other component of your site. The images used should enhance the user’s experience, help with branding, and improve visual appeal. Below, we review the various ways in which images can be uploaded to your website and some tools that can be used with them.

ADDING IMAGES | IMAGE STYLES | IMCE CROP | IMAGEFIELD CROP | IMAGE GALLERY | INSERT FEATURE

ADDING IMAGESADDING 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 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.

ADDING IMAGES TO ITS OWN FIELD  (IndieCommerce members only)

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 drop-down menu for ‘Select an existing field’; if a field had been used for 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.

IMAGE STYLES IMAGE STYLES (IndieCommerce members only)

Image styles are used to create preset displays for images. Using image styles, images can be cropped, desaturated, resized, rotated and scaled. Various effects can also be set before an image is displayed. When an image is displayed with a style, a new image file is created and the original image is left unchanged.

VOCABULARY

• Crop: Cropping will remove portions of an image to make it the specified dimensions.
• Desaturate: Desaturation will convert the image into a grayscale image.
• Resize: Resizing will make images an exact set of dimensions. This may cause images to be distorted.
• Rotate: Rotating an image may cause the dimensions of an image to increase to fit the diagonal.
• Scale: Scaling will maintain the aspect-ratio of the original image. If only a single dimension is specified, the other dimension will be calculated.
• Scale and Crop: Scale and crop will maintain the aspect-ratio of the original image, then crop the larger dimension. This is most useful for creating perfectly square thumbnails without distorting the image.

NOTE: You can add multiple effects on a single image style. Multiple Effects will be applied as per the row weight.

CREATE AN IMAGE STYLE

Navigate to: Configuration > Media > Image Styles > Add Style (if you do not have a menu option for 'Image Styles' please contact us so we can grant you permissions).

1. Fill in the ‘Name’ we recommend including the size in the name for easy reference - Example: Header Region Banner Image 800x300
2. Create New Style
3. Locate the new style created and select ‘Edit’
4. Set your ‘Effect’ - Example: Scale
5. Add
6. Enter the width and  height you want your slideshow to be - Example: 800x300
7. Add Effect
8. Repeat steps 4-7 until all preferred effects are added to the style

ASSIGNING IMAGE STYLES TO FIELDS

Image styles can be assigned through ‘Content Types Display’ or ‘Views Field Display’.

Content Types Display Settings

Navigate to: Structure > Content types > Content Type of Choice > Manage Display

1. Select the settings icon for the image field
2. Set the ‘Image Style’ to the preferred image style
3. Update
4. Save

Views Field Display Setting

Navigate to Structure > Views > View of Choice

1. Click on your image field
2. Set the ‘Image Style’ to the preferred option
3. Apply (this display)
4. Save

IMCE CROP IMCE CROP(IndieCommerce members only)

The IMCE Crop module adds image cropping functionality to the file browser to allow cropping of images after they have been uploaded.

NOTE: The IMCE Crop module will be enabled on IC sites upon request. If you do not see the Crop button, please email us to request the module be enabled.

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’
6. Select ‘Crop’
7. Set the ‘Width’ or ‘Height’ - you should see a red outline appear over the image, the area inside of the outline is what will be kept when the new image is created. Using a mouse, move the outline over the area you want to keep.
8. Confirm ‘Create a new image’ is selected
9. Crop

The cropped area should be turned into a new image file for you and can now be placed on the site.

IMAGEFIELD CROP IMAGEFIELD CROP(IndieCommerce members only)

Imagefield Crop provides a widget for cropping an image after upload. When an image is uploaded, it is displayed inside of a cropping area. A cropping box is shown and can be used to select a portion of the image.

ENABLE IMAGEFIELD CROP

NOTE: The ImageField Crop module will be enabled on IC sites upon request. If you do not see that path, please email us to request the module be enabled.

Navigate to: Structure > Content Types > Content Type of Choice > Manage Fields

1. Locate* the image field and select the current widget
2. Change the ‘Widget Type’ to ‘Image with Cropping’
3. Continue
4. Select ‘Edit’ for the image field
5. Set the ‘The resolution to crop the image onto’ to the preferred size. Example: 300x300
6. Save Settings
7. Save

*If your content type does not have an image field yet, add one by following the instructions on ‘Adding Images’

USING IMAGEFIELD CROP

Navigate to: Content

1. Select ‘edit’ for a node of the content type set to use ImageCrop (or create a new node)
2. Scroll to the image field and select ‘Choose File’
3. Locate and select your file
4. Upload
5. Move the crop box to surround the portion of the image you want to keep
6. Save

You should see your original image and the smaller selected portion as a separate image on the ‘edit’ page. When viewing the content page itself, only the selected portion should appear.

IMAGE GALLERY IMAGE GALLERY(IndieCommerce members only)

The Juicebox module provides an integration between the popular Juicebox HTML5 responsive gallery library and Drupal giving you the option to create image galleries through a field formatter or by using Views.

NOTE: The JuiceBox module will be enabled on IC sites upon request. If you have not done so already, please email us to request the module be enabled.

CREATE A GALLERY USING THE IMAGE FIELD FORMATTER

CREATE YOUR CONTENT TYPE

In this example, we create a gallery for art to be displayed, in order to do so, a new content type needs to be created first. If you’re not familiar with doing so, please following the instructions here: ‘Creating Custom Content Types’.  and will need a new content type. The content type you create should include an image field.

Navigate to: Structure > Content Types > Art Gallery (or the name of the content type you created) > Manage Fields

1. Select the ‘edit’ link for the image field
2. Enable the ‘Title’ and ‘Alt’ field checkboxes
3. Set the ‘Number of values’ to ‘Unlimited’
4. Save
5. Select the ‘Manage Display’ tab
6. Set the ‘Format’ for Image to ‘Juicebox gallery’
7. Save
8. Select the settings icon for the image field
9. Adjust your settings - The default format settings are common. However, you can adjust them to meet your preference, for this example, we’re making the following customizations:
   1. Caption Source -  Alt text
   2. Title Source - Title text
   3. Gallery Width (located within Juicebox Library - Lite Config) - 60%
   4. Update

Now that you have set up your content type, you can create the content itself.

CREATE YOUR CONTENT

Navigate to: Content > Add Content> Art Gallery (or the name of the content type you created)

1. Title: this is the title of your gallery - Example: Art Gallery
2. Use the image field to upload your images
3. Select ‘Browse’
4. Locate your image and select ‘Open’
5. Select ‘Upload’
6. Provide ‘Alternative Text’ - (in this example, we’ve set the Alternative text to be our caption source) Example: Watercolor painting by N. Jones
7. Provide ‘Title Text’ - in this example, we’ve set the Title text to be our title source Example: Blurry Lines
8. Repeat steps a-e until all images have been uploaded
9. Save

Your content is created and can be placed in a menu link on your site.

CREATE A GALLERY USING VIEWS

In this example, we create a gallery of all the images from our previous events  (in order to do so, the images on your event content type, must be uploaded in a field, not the body) using a view block.

Navigate to: Structure >  Views > Add New View

NOTES:

• When making changes make sure the ‘Apply’ buttons say “Apply (this display)” only. If the ‘Apply’ button says “Apply (all displays)” the changes you make will alter every display of the view.
• As you edit the view, we highly recommend you save your 'view' after every step, especially when you see this message come up:  “* All changes are stored temporarily. Click Save to make your changes permanent. Click Cancel to discard the view.”

CREATE THE VIEW

1. Fill in ‘View Name’ - Example: Past Events Gallery
2. Fill in Description - Example: Juicebox gallery of past event images
3. Uncheck ‘Create A Page’
4. Select ‘Create A Block’
5. Confirm your ‘Block Title’ has filled in automatically from the View name
6. Set the ‘Display format’ to ‘Juicebox Gallery’ of ‘fields’
7. Set the ‘Items per page’ to be blank - this will allow all items added to the book list to be pulled in.
8. Select Continue and Edit
9. Click on ‘Block’ next to ‘Display Name’
10. Enter name and description -  Example: (Past Events Gallery, Juicebox gallery block for past event images) - click Apply
11. Under ‘Fields’ select ‘Add’
12. Search for and select the image field associated with your content type - Example: Content: Event Image - Apply (this display)
13. Deselect ‘Create Label’- Apply (this display)
14. Under ‘Filter Criteria’ select ‘Add’
15. Search for and select Content: Type - Apply (this display)
16. Select the content type - Example: Event - Apply (this display)
17. Under ‘Format’ select ‘Settings’ next to ‘Juicebox Gallery’
    1. Set your ‘Image Source’ and ‘Thumbnail Source’ - Example: Content: Event Image
    2. Adjust your settings - The default format settings are common. However, you can adjust them to meet your preference, for this example, we’re making the following customizations:
       1. Gallery Width (located within Juicebox Library - Lite Config) - 70% - Apply (this display)
       2. Gallery Height (located within Juicebox Library - Lite Config) - 25% - Apply (this display)
18. Save

Due to javascript requirements, Juicebox galleries cannot be viewed as a live preview. Please save your view and visit Structure > Blocks to configure the block. Once configured and placed in the region of your choice, you can view the block and return to the view edit screen to make any necessary adjustments.

INSERT MODULEINSERT MODULE

The Insert module makes inserting images into the body field of the WYSIWYG editor much easier by adding a control option to an Image field on the same content type. This is particularly useful when you plan to use the same image in a view to be displayed somewhere other than the page itself, for example, if you’re uploading an event image, and want the image displayed both in the body of the page and in a Event View on the front page.

MODIFY YOUR IMAGE FIELD

NOTE: If your content type does not already have an image field, you will need to add one, instructions can be found here under Add Fields.

Navigate to Structure > Content Types > Content type of choice (page, event, etc.) > Manage Fields

1. Select ‘Edit’ for the image field
2. Expand the ‘Insert’ option and enable the ‘Enable insert button’ checkbox
3. Save

USE THE INSERT FEATURE ON YOUR CONTENT

Navigate to Content and select edit for an existing piece of content
Navigate to Content > AddContent > Content type of choice (page, event, etc.) for a new piece of content

1. Upload your image to the image field
2. Move the cursor to the spot in the body where you want the image to appear
3. Select the ‘Insert’ button - this will place the image into the body area where you moved the cursor
4. You can double click the image to open the Image properties box and make adjustments as you normally would. Remember, we highly recommend removing any set width/height in order to allow the image to display best on smaller devices. Images should be uploaded in the initial size you want to display them.
5. Save
    

CAPTION FILTER MODULE

The Caption Filter module allows you to add a caption inline to any photo in the body area and is meant to be used with the Insert Module.

1. Select ‘Edit’ for the image field
2. Enable the Title field, this will be used to insert the Caption
3. Expand the ‘Insert’ option and enable the ‘Enable insert button’ checkbox
4. Save

1. Upload your image to the image field
2. Enter your caption into the Caption field
3. Move the cursor to the spot in the body where you want the image with caption to appear
4. Select the ‘Insert’ button - this will place the image and caption into the body area where you moved the cursor and around the image will be the following HTML [caption caption="Your Caption Here"] IMAGE [/caption]
5. Add alignment by adjusting the HTML
   • Left align: [caption align=left caption="Your Caption Here"] IMAGE [/caption]
   • Right align: [caption align=right caption="Your Caption Here"] IMAGE [/caption]
6. You can double click the image to open the Image properties box and make adjustments as you normally would. Remember, we highly recommend removing any set width/height in order to allow the image to display best on smaller devices. Images should be uploaded in the initial size you want to display them. 
7. Save