Managing Images Assets

A centralised location to easily manage the image assets in your mobile solution

Introduction

The image asset manager summarises all image assets across your solution from your iOS and Android projects.

As a developer, you gain a birds-eye view of all image assets in your solution and that then allows you to delete, import, search and optimise all images from a centralised location.

Opening The Image Manager

The image manager is presented as a pad on the IDE by default on the right side of the Window, below the Toolbox, Properties and Document Outline pads. You can access it from several places if hidden:

Top Menu

By acessing the top menu selecting the Manage Image Assets options.

Opening the Image Asset Manager from the top menu

Solution Pad

You can right click on a Xamarin.Android and Xamarin.iOS project file and you'll find Manage Image Assets under the Tools menu.

Alternatively, double click on and Android or iOS image asset. This will open the image manager, selecting that image in the list.

Overview

What is an image asset?

MFractor works with the concept of Image Assets, where a single asset is composed by a set of files that represent a single image at each possible density supported by Android or iOS devices. This concept is implemented to facilitate managing those assets, because a single item may be represented by a large number of individual files, that can also be shared among projects.

For this documentation, every time we use the term Image Asset, we are refering the set of images that form a single element as consumed by the user interface engines of the platforms, and we will use the term Asset File to refer to a specific item of this set.

The Image Manager Pad is composed of the following parts:

  1. The Assets List: the main listing on the left side of the pane contains all the image assets identified by MFractor in the current solution. The list consider an asset a set of images that compose a single image as recognized by an Android or iOS project.
  2. The List of Assets File: when you select an asset from the previous list, MFractor will list the files that compose this asset in this section. Further grouping is provided by project on the Combo Box on the top of this list, where you can select the project of which you want list the files of the asset. The list provides the image size aside with it's path in the solution.
  3. The Preview Area: just above the listing of asset files on the Asset, you'll find the preview of the currently selected file along with some metadata of the image: it's current file size and dimensions.
  4. The Commands Area: you'll find buttons for the commands available to the image assets on the bottom area of the assets listing.

Filtering Image assets

You can filter image assets using the search bar on the top of the listing. Start typing and MFractor will filter the items that contains the text you've typed.

Note

The filtering tool is case-sensitive.

Importing Image Assets

Click on the Import New Image Asset on the bottom part of the pad to open the Import Image Asset tool. See the section docs for instructions on how to import images.

Deleting Image Assets

You can delete an Image Asset by selecting the image on the assets list and clicking on the Delete image name on the bottom of the listing. This will present the Delete Image Asset tool dialog, that previews the delete operations that will be run for that asset.

You can also right click on a asset of the list and select Delete from the context menu.

Click Delete Images button to confirm the operation.

Tip

For further information about the MFractor Delete Image Asset tool see the docs of the feature.

Optimising Image Assets

Through the Image Asset Manager you can optimise the all images of your solution, a single Image Asset or a specific Asset File. Please check the Optimising Image Assets docs for details on how to setup image optimization and launch it for the desired items of your solution.

Searching For Image Asset Usages

The Image Asset Manager allows you to search for places where an Image Asset is referenced in your solutions code.

Warning

This feature is currently in preview and will search for the exact name of the asset. This may not detect all usages of this image resource and may detect false positives.

To Invoke the Search Usage feature you should use the context menu over the Image Asset you want to do the search and select the Find Usages option. MFractor will present the results on the Search Results Pane on the bottom area of the IDE.

Drag And Drop

The image manager supports drag and drop from the image asset list onto a code file.

When you drag and drop an image onto a code file, the image manager will generate code to access that image.

For example, given the image logo.png, MFractor will insert the following code:

  • Android AXML: @drawable/logo.
  • Android C#: Resource.Drawable.logo.
  • XAML: logo.
  • C# (Xamarin.Forms): "logo.png";

Context Actions

In both the Image Assets list and the Asset Files list, you may right click on any item to launch a context menu that may provide the following options:

Delete

Please see Deleting Image Assets

Reveal In Finder/Explorer

The Reveal In Finder action will open Finder (Mac) or Explorer (Windows) and select that image.

Reveal In Project Pad

The Reveal Project Pad action will locate the image file in the solution pad.

Copy Name To Clipboard

The Copy NameTo Clipboard action copies the full file path of that image file to the clipboard.

Copy File Path To Clipboard

The Copy File Path To Clipboard action copies the file path of that image file to the clipboard.

Optimise

Please see Optimising Image Assets

Open Image

The Open action opens the selected image file in the operating systems default image viewer.

Search For Usages

Please see Searching For Image Asset Usages

Comments