Image manager allows you to perform a myriad of actions on your images. In this KB article we’ll be covering all of them:
View image changes in real time
Manage the properties of the image
Alter the image
Image Manager - If you’ve come here from the Page Content KB article you’ll know that this tool has a great deal over crossover from the file manager module so I’ll link to information again about how to use that here. The rest of this tool is focused on the image editing aspect. Once you have found the picture that you’d like to use you have the option to edit it in several ways. There are several windows and options within those windows that must be covered: Toolbar above the image selected, Preview Tab, Properties Tab, and the Image Editor. Let’s begin with the Toolbar I mentioned. It looks like this.
Preview Tab - This allows you to see the effects of the changes that you’re making to the image.
New Term? What is a container? An example of a container is the location in which the content goes from the Page Content field.
Width/Height - This allows you to customize the width and height the image you selected. What if you type in a width that is over the size of the screen? Just like before when we talked about uploading and image that had a width that was too much the same is true here. This system will not allow you to create an image wider than the window width. That’s a good thing!
Image Alignment - Image alignment allows you to align the image to one of five places: Top, Bottom, Left, Right, Center.
Border Color - Make a border around your image.
Top/Bottom/Left/Right Margin - What is Margin? Margin is the space between the edge of your image(or the edge of the border if you have a one) and the next piece of content on your page. This could be text, another image, or just about anything.
Text Title - When your mouse hovers over this image for a second or so this text will show. It serves as added clarification as to what the image is about.
Alt Text / Long Description - Both of these field are used to describe an image to those who are otherwise unable to identify the image visually. Alt Text is used for the title and long description is used for further detail about the image if any clarification is necessary.
CSS Class - This gives you some options for how you want the image to be formatted. To really understand what’s going on in these CSS Classes though we’ll have to delve into some code. Which I’ll be covering in a separate article.
Print Image - When clicked this will allow you to print the image being edited.
Undo/ Redo - We’ve come across undo and redo in this module before but in the Image Editor there’s some added functionality. When you have performed some editing in the Image Editor and click on the down arrow to the right of the undo Icon you’ll see a history of the edits you’ve made. This makes it easier to go back to the exact state that you want to go back to. It looks something like this.
The undo is very similar. It allows you to see a similar list except that the bottom of the list represents the most recent action whereas on the undo list the bottom represents the first action.
Restore Image - This tool reverts the edits back to before you make any changes to the selected image.
Crop - This allows you to select a particular section of the image. There are a few options that must be gone over in detail.
Aspect Ratio - The aspect ratio converts the current selection into a size that will fit in the aforementioned ratio. For example if the aspect ratio you select is 800x600px the selection of the crop will automatically calculate the maximum amount of pixels it can use while preserving that ratio. In my case my image is 400 pixels in height and 2000px in width. The height contrains the width to be 533 pixels in order to preserve the 800x600px ratio.
Constrain Proportions - If you want a custom height and width you need to know how to activate and deactivate this feature. Ratios are preserved when the icon looks like this. Ratios are not preserved when the icon looks like this. To switch between these modes simply click on either of the icons.
Swap Width and Height - Make sure to turn off ratio preservation before using this if you want to only select the image. Otherwise you may end up selecting things that aren’t your image in your crop.
Width/Height - If you want to make the selection of the crop smaller than the maximum amount of pixels while preserving the ratio you can change the Width and Height manually.
Position X/Y - On the coordinate plane of your image (0,0) starts on its top left corner. This just so happens to also be the starting position of your crop. You can change the start position by typing the position in pixels where you want the crop to start. The crop outline will move as you change the numbers. You can’t have the crop selection be outside of the selected image. This system will make sure that your crop selection is always selecting your image. In other words if your image is only 400 pixels height it won’t allow you start or end your crop selection at or after 400 pixels.
Resize - Resize is similar to Crop in some of the tools and interface. What sets it apart is that it’s not selecting a specific part of the image. It’s selecting all of it. When a Preset Size is selected(Pretty much the same as aspect ratio) it morphs the entire image to be constrained to that ratio. Another difference is the Percentage field. This allows you to simply scale up or down the current image bay a particular percent. This multiplies both the width and height by the percent to maintain whatever ratio of width to height is presently used.
Left/ Right Arrow - The left arrow, when clicked, decreases the percentage of zoom by 1 while the right arrow increases the percentage of zoom by one.
Actual Size and Best Fit - We covered these in the Preview Tab of the Image Manager earlier.
Zoom in/out - Zoom in and out were also covered in the Preview tab of the Image Manager.
Opacity - Opacity is another word for transparency. If you want to see a the background behind the image then this is something that you should modify.
Here you have a slider that is currently at 100%. In terms of Opacity this means it’s completely not see-through. Therefore logically 0% represents a completely transparent image.
Rotate right/left 90 degrees - This is exactly as it sounds. However, in order to avoid confusion allow me to exemplify with images what it means.
Original Image rotated Right
Original Image rotated Left
Flip Vertically - The names here are a bit counter intuitive. When it says flip Vertically the image is really flipping over the horizon. The way they were thinking when they named it was that it was flipping over the x-axis. Meaning that it’s inverting all x positions top to bottom.
Flip Horizontally - The same can be said about Flip Horizontally except we are flipping over the y-axis.
Textbox (“Your text here...”) - One important thing to keep in mind is that this text does not wrap when it hits the end of the image nor to any specified width. You must make the appearance of text wrap. You do this by pressing enter after you are satisfied with the width of the text. If you repeat this it will look pretty nice. If the text does go outside of the image the text outside the image won’t be shown. Also you only have the option to left align.
Text Decoration (Font Family/Font Size/Color) - This is covered in the Page Content section written earlier in this article.
Position X/Y - Usage of this property is covered in the section about cropping.