Image Editing
With the Image editing feature, you can crop, rotate and flip images.
To edit images:
- Click on either the 'Image Icon' or the 'Add Media' button. This will open up the 'Ark Media Manager'.
- Upload an image by clicking on the 'Upload' button > click on the 'Add Files' button and select a file.
- Click on the 'Start Upload' button, to complete the upload.
- Click on your image in the image folder list view, then click on the 'Insert' button.
If you wish to edit an image that you have previously uploaded, simply click on the image, then click on the 'Insert' button. This will take you to the image editing screen.
Resizing
- To resize an image, click on the 'Resize' button > drag the resize handles, to get your image to the desired size.
- Click on 'Apply', to apply the resize.
- Click on the 'Insert Into Content' button, to insert the image into your content.
- You can create custom resize presets for users to select when resizing an image. To do this: Navigate to 'System' > click on 'Global Configuration' > click on 'Ark Media' and select the 'Plugins' tab.
- Select the 'Ark Media Feature - Image Editing' plugin.
- Navigate to 'Custom Resize Presets' and click on the 'Select' button. You will now see the pop up window below.
- Enter a width and height, to set a preset in pixels. Alternatively, to set a preset in percentage, set 'Unit' to '%' and enter a percentage.
- To add further presets, click on the 'Add' button. Important: To enable your chosen preset, select 'Yes' in the 'Default' column.
- Click on the 'Save' button.
- Finally click on the 'Save' button in the 'Ark Media Feature - Image Editing' page to save your changes.
You will now have the option to select your custom resize preset when resizing an image, by clicking on the 'Resize' button, in the image editing area and clicking on the 'Presets' button.
Cropping
- To crop an image, click on the 'Crop' button > drag the cropping handles, to get your image to the desired size. Click on the image and drag it, to position the crop.
- Click on 'Apply', to apply the crop.
- Click on the 'Insert Into Content' button, to insert the image into your content.
- You can create custom crop presets for users to select when cropping an image. To do this: Navigate to 'System' > click on 'Global Configuration' > click on 'Ark Media' and select the 'Plugins' tab.
- Select the 'Ark Media Feature - Image Editing' plugin.
- Navigate to 'Custom Crop Presets' and click on the 'Select' button. You will now see the pop window below.
- Enter a width and height - to add further presets, click on the add button.
- Important: To enable your chosen preset, select 'Yes' in the 'Default' column. You can also prevent a crop preset from being resized by selecting 'No' in the Resizing column.
- Click on the 'Save' button.
- Finally, click on the 'Save' button in the 'Ark Media Feature - Image Editing' page to save your changes.
You will now have the option to select your custom crop preset when cropping an image, by clicking on the 'Crop' button, in the image editing area and clicking on the 'Presets' button.
Rotating
To rotate an image, click on the 'Rotate' button > select either 90 degrees left, 90 degrees right or 180 degrees > click on the tick and click on the 'Insert Into Content' button.
Flipping
To flip an image, click on the 'Flip' button > select 'Flip Horizontal' or 'Flip Vertical' > click on the tick and click on the 'Insert Into Content' button.
Troubleshooting
If your edited images aren't changing when you insert them into your content then most likely your browser has cached the original image. Try clearing your browser's cache and seeing if the image has now updated.
There is a parameter in Ark Media's image plugin which can prevent this occuring in the future. This setting is disabled by default because not all 3rd party extensions support this feature. So if your images no longer load in the front-end of your site, please disable this option.
In Ark Media's configuration click the Plugins tab. Then select the image plugin: Ark Media - Images
.
When the plugin loads, change the Add Path Suffix
parameter to Random ID.
This parameter adds suffix data to the end of the image path in order to automatically clear the browser's cache & reflect image changes. This will make your image path's look something like:
images/picture.png?i=123
Note - Although This is a Valid Image Path, Some Extensions Are Not Configured to Handle the Suffix, So if Front-End Images Do Not Display, Try Disabling This Option.
Note - This should only be necessary in IE/Edge.