Image Editor [ video demo ] [ Code Link Until One Click Merge ] Tired of boring handouts with boring image placement? Giant images that span the width of the handout? Ever wish you could do a little word wrap, add some hover text? Round corners? That's what Image Editor does. The Control Handout lets you load all of the images from a referenced handout like you were looking at them in an image management app. From here you can set width, height, centering, title, float and margin. You can even swap one image for another by assigning it a new URL. Image Editor Guide The Image Editor allows you to select any handout that contains images and modify the style, layout, and properties of those images without manually editing HTML. Changes are written directly back to the handout's notes. Getting Started Type !imageeditor in chat to open the Image Editor interface. The editor opens as a handout called Image Editor in your journal. Choosing a Handout Click the Choose Handout button in the top right of the editor. A dropdown will appear listing all handouts that contain images, in alphabetical order. Selecting one will load its images into the editor. Only handouts that contain at least one image will appear in the chooser. The name of the currently selected handout appears as a link in the header. Below it, if the currently selected image is preceded by a header in the handout, that header will appear as a secondary link which jumps directly to that section of the handout. In this way you can jump to the place in the handout that holds the actual image to see live updates. Thumbnails Panel The left panel shows thumbnails of every image found in the selected handout. Click any thumbnail to load that image into the preview panel and populate the properties panel with its current values. The title of the image, if set, appears below each thumbnail. Preview Panel The center panel shows a large preview of the currently selected image. At the top of the preview panel is a navigation bar with left and right arrow buttons for moving to the previous or next image without scrolling the thumbnail list. The small thumbnails beside the arrows show the adjacent images and are also clickable. Properties Panel The right panel shows the editable properties of the currently selected image. Click any value to open a prompt where you can enter a new value. Leaving the prompt blank will remove that property from the image entirely. title - Sets the title attribute of the image tag. This text appears as a tooltip when the user hovers over the image. url - Sets the src attribute, replacing the image with a different one at the given URL. layout -Applies a float-based layout preset to the image. Options are: left — floats the image to the left, text wraps around the right. right — floats the image to the right, text wraps around the left. center — displays the image as a centered block. none — removes float and display properties. width / height - Sets the width or height of the image. Values must be in pixels (e.g. 200px) or percent (e.g. 50%). margin - Sets the margin around the image. Accepts 1 to 4 values in pixels or percent, space-separated, following standard CSS margin shorthand (e.g. 8px 16px). border-radius - Rounds the corners of the image. Value must be in pixels or percent (e.g. 8px). Presets Below the properties are quick-apply preset buttons. Clicking a preset merges a predefined set of style values into the image's existing styles, preserving properties like border-radius that are not part of the preset. Left 30% / 50% / 60% — floats the image left at the given width with a small right margin. Right 30% / 50% / 60% — floats the image right at the given width with a small left margin. Center — displays the image as a full-width centered block. Clear — removes all inline style information from the image tag, returning it to its unstyled default. Commands Most of the interface was graphic, but here are the two most useful commands: !imageeditor — Opens or refreshes the Image Editor interface. !imageeditor --help — Creates or updates this help handout and whispers you a link to it. Notes The Image Editor cannot be used to edit its own handout. Only images in the notes field of a handout are visible to the editor. Images in gmnotes are not shown. Style changes are written directly to the handout HTML. Always keep a backup of important handout content.