The Image Editor is used to add images into a content page, template, or message. You can also use the editor to update image settings.
An image must be uploaded before it can be used.
Jump to a Topic:
Uploading an image
See File Management
Image info
- URL - This will display the location of the image you select from the server
-
Browse Server - click Browse Server to select the desired image from your site. Be sure that you have uploaded the image to File Management first.
- A Pop Over window will appear with a folder list.
- Click through to the file location that you the image to, and then double click the image to select it. Note - the Search option at the top right of the pop over window will search the current folder that you are in.
- Alternative Text - also called 'alt text' this information is used by screen readers, and is essential for proper accessibility for the vision impaired. There are many sites that have good guidelines (check out this one for example to learn more about alt text best practices, and how it can help your SEO), and there are lots of alt text generators available as well.
- Width - Used for Fixed Width Images, see the Image Recommendations below on when to use fixed width in
- Height - Used for Fixed Width Images, see the Image Recommendations below on when to use fixed width.
- Border - if you want a border around your image, enter the number of pixels that you would like your image border to be. The border color will default to what is set up in your CSS (cascading style sheet). To override this, you can add a border color attribute to this image in the page's source code.
- HSpace - to create padding/'white space' on the left and right of your image, enter the number of pixels you would like the padding to be.
- VSpace - to create padding/'white space' on the top and bottom of your image, enter the number of pixels you would like the padding to be.
-
Alignment
- <not set> - this is the default, and will look to your CSS settings for alignment.
-
Left - This will align your image to the left side of the content area, regardless of your CSS settings. If the image is small enough (based on browser size) the paragraph below the image will wrap around it to the right.
-
Right - This will align your image to the right side of the content area, regardless of your CSS settings. If the image is small enough (based on browser size) the paragraph below the image will wrap around it to the left.
Link
For more in depth information regarding hyperlink settings please refer to the Adding Hyperlinks article. 
- URL - Type or paste the URL of the website you want to link to into the text box
-
Browse Server - If you want a PDF, or other file, to load when the hyperlinked text is clicked on AND the file has been uploaded to File Management for this event:
- Click on Browse Sever
- Select the location where the file was uploaded
- Double click on the file
- Click OK to create the hyperlink
-
Target
Note - these options will work for Content Management and Message Management. They will not affect links in Template Management. For more information on targets and hyperlinks work check out the Target section of the Adding Hyperlinks Article- <Not Set> - This will use the users browsers default settings. This will vary by browser, browser version, and the users custom settings. Always use this for Template Management images.
- New Window (_blank) - When the link is clicked a new tab will open in the current browser window, this will become the active window. This is the preferred option, as your end user will see the content, and still have your event site open in their browser.
- Top Most Window (_top) - This option is used when the content is going to be loaded in a frame. The hyperlinked content will open in the top most browser window. If hyperlink is not in a frame, the link will adjust to the current window (see Same Window, below)
- Same Window (_self) - When the link is clicked the link will open in the active window.
- Parent Window (_parent) - This option is used when the content is going to be loaded in a frame. The hyperlinked content will open in the frames parent browser window. If hyperlink is not in a frame, the link will adjust to the current window (see Same Window, above))
Image Recommendations
Content Management and Message Management
Including images in your content pages are as simple as selecting the insert image button in your tool bar, navigating to your uploaded photos and selecting your image, but understanding the value and power of "responsive images" is important and will bring accessibility and legibility to your users. See below the breakdown and recommended specifications for you to consider.
-
Responsive Bootstrap images (Recommended)
- By default, your image's width and height will be included in the "Images Properties" pop-up window. Remove these values before saving.
- Once your image has been inserted, switch over to (Source code) view and include the Bootstrap class of "img-responsive" directly on the image tag <img>.
- Example
- Code
- <img class="img-responsive" src="../custom/images/interface/image.png" alt="Image" />
- This pre-defined Bootstrap class will automatically make your image responsive so it will dynamically scale at different resolutions, based off the size of the container for that particular breakpoint
- Input
- Output
- Desktop
- Tablet
- Mobile
- Desktop
- Code
-
Fixed width images
- By default, your image's width and height will be included in the "Images Properties" pop-up window.
- It's recommended that you not include the width and height, so strip those out as they will only allow your images to be fully accessible for larger, desktop resolutions.
- What to remove
- What to include
- If you prefer you can alternately switch over to (Source Code) view in the WYSIWYG editor and include width="100%" directly on your image. This will allow your image to be responsive for all resolutions and breakpoints.
Note - you can substitute any percent for the 100%.
Examples:- 100% Width
- 50% Width
- 100% Width
- IMPORTANT - If you do want to include a width on your images in the "Images Properties" pop-up window, make sure they are no wider than 1000px. The default content container for the A2Z system is 1170px in width so anything over 1000px could start bleeding off your page in browser.
- By default, your image's width and height will be included in the "Images Properties" pop-up window.
What to remove for Content/Messages:
What to add for Content/Messages (Fixed Width):
Template Management
Templates are intended for emailing and printing, therefore all images used should be 72dpi and uploaded to File Management at the preferred size. Microsoft Word, other word processors, and some email providers (like GMail, Yahoo Mail, Outlook, etc) ignore any inline styling (changes that you make to width and height in the image tools) and display the image at it's true size.
The recommended max width for images used in templates is 800px wide.
What to include for Templates
