If you are not investing in your business how do you expect it to grow?

Image Manager

 Monday, October 8, 2018 |  Views: 52

Summary


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

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.


  • Image Editor - The image editor is something that we’ll talk about later. For now just  know that this button is how you access it.
  • Best Fit - Best fit readjusts it to fit in whatever container present while preserving the height to length ratio present.
  • Actual Size -  This makes the image its original size. Sometimes this can cause problems. If the image is wider than the window width it won’t  go over outside of the container but will take on the width of the container. At that point width is not preserved. The height of the original image will always be conserved.

 

New Term? What is a container? An example of a container is the location in which the content goes from the Page Content field.

  • Zoom in/out - This allows you to zoom closer farther on any particular part of the image selected. 

 

  • Properties Tab

 

 

  • 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.

  • Border Width

  • 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.

 

  • Image Editor

 

  • 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.

 

 

  • Zoom

  • 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



  • 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.


  • Add Text

  • 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.

Latest JM2 CMS KB Articles