Images: Difference between revisions

Jump to navigation Jump to search
699 bytes removed ,  2 July 2020
Line 52: Line 52:
=== Bulk changes ===
=== Bulk changes ===


Bulk import is done by importing a specifically named zip file that contains the images in a specific folder structure – the best way to explore the folder structure is to download the icon package from our [https://www.resco.net/downloads/icons.zip website]. Once you have the file, you need to remove the directories and files that you don’t want to change. This way you won’t need to worry about getting the names of the folders or the structure of the folders wrong.
Bulk import is done by importing a specifically named zip file that contains the images in a specific folder structure – the best way to explore the folder structure is to export all images (icons) from a project: Edit an app project, select '''Design > Images''' from the '''Project''' menu and click '''Export'''.


Please note, that different devices have different screen capabilities, and therefore there are different directories for them (like the Platform option in Images section in Woodford, when adding a new image).
Once you have the file, extract it and remove the directories and files that you don’t want to change. This way you won’t need to worry about getting the names of the folders or the structure of the folders wrong.
 
Different devices have different screen capabilities, and therefore there are different directories for them.
* MonoDroid – Android devices
* MonoDroid – Android devices
* MonoTouch – iOS (iPhone, iPad)
* MonoTouch – iOS (iPhone, iPad)
* Windows – Windows tablets
* Windows – Windows tablets


Example: We want to place the image into the home section of the app – first, we need to place the image file into the subdirectory Home of the zip file. The names and sizes of the actual pictures have to follow existing ones as they differ per platform. In this example case, we will add a picture for the iOS.
You can also use images in different resolutions. The standard resolution (used mostly in older devices) is 72 pixels per inch (PPI). These days, our projects use double of the standard resolution; this is indicated by the suffix @2x in the file name. It is generally sufficient to add only one image resolution when importing new icons, Woodford will generate all the necessary sizes automatically.
 
If users use newer and older iPad/iPhone devices, they need two sizes of the image – this is because the older apple devices have screens with a smaller resolution. Android devices are also divided by LDPI, MDPI, HDPI, XHDPI according to the resolution of the app (you can regulate this in the Android app’s setup).


That’s why we will need a small and a large image version that has a suffix @2x (e.g. account@2x.png). Please check the dimensions of existing images for the reference. Also, the Tabs directory can be interesting for us, if we want to change the images of the associated views. The name prefix of the image for the entity (on Home screen) should be the logic name of the entity. It can be checked in Woodford.
==== Adding a new icon ====


For example, if we want to add only one image to the home screen for our custom entity with name cust1 and overwrite the default image for invoices, we have to create a zip file with the following structure:
For example, if we want to add only one image to the home screen for our custom entity with name cust1 and overwrite the default image for invoices, we have to create a zip file with the following structure:


<pre>
<pre>
MobileCrm\Images.MonoTouch\Home\cust1.png
MobileCrm\Images.MonoTouch\Home\cust1@2x.png
MobileCrm\Images.MonoTouch\Home\cust1@2x.png
MobileCrm\Images.MonoTouch\Home\invoice.png
MobileCrm\Images.MonoTouch\Home\invoice@2x.png
MobileCrm\Images.MonoTouch\Home\invoice@2x.png
</pre>
</pre>


To import the file, go to your [[app projects|app project]], select '''Images''' from the '''Project''' menu, click '''Import''' and upload the zip file.
To import the file, go to your [[app projects|app project]], select '''Design > Images''' from the '''Project''' menu, click '''Import''' and upload the zip file. Don't forget to '''Save''' all changes.


After the import is done, we can verify the added images by searching for them in the list (use the filters Directory and Folder to get a quicker access to the images) or it can be verified by exporting the Images.zip, or by exporting the Mobile Project, adding an extension .zip to it and inspecting it. Images.zip file should be in the root.
After the import is done, we can verify the added images by searching for them in the list (use the filters Directory and Folder to get a quicker access to the images) or it can be verified by exporting the Images.zip, or by exporting the app project, adding an extension .zip to it and inspecting it. Images.zip file should be in the root.


{{Note|The zip should only contain images you want to replace or add, so if you use the sample zip, you need to remove all the default images, otherwise, they will be used twice in the project, and the project will increase in the size, resulting to possible problems in synchronization, and increasing the time of synchronization.}}
{{Note|The zip should only contain images you want to replace or add, so if you use the sample zip, you need to remove all the default images, otherwise, they will be used twice in the project, and the project will increase in the size, resulting to possible problems in synchronization, and increasing the time of synchronization.}}

Navigation menu