As you customize your mobile app with unique content via custom tabs, adding images is a great way enhance the content so that your users have a more visually dynamic experience beyond reading a block of text.
 |
| An example from Silk Road Rising of how adding an image can enhance a custom tab. |
Lets take a look at some best practices for embedding images effectively in custom tabs.
Where to Host Images
First, you need to decide where to host the images. There are a few options available to you.
Your Own Server: If you already have a dedicated server for your main website that you have easy access to, this would be a convenient place to host the images.
Third Party Server: Services like
Photobucket and
ImageShack offer reliable alternatives.
InstantEncore File Storage: However, we highly recommend hosting images directly on InstantEncore. Under the "Extras" menu in the Control Panel you will find a "File Storage" tool that gives you a quick and easy way to upload images you wish to embed.
Just select the desired file from your computer, provide a simple description and click "Upload".
We provide you with a convenient link to your image which you can copy and use to embed that image in your custom tab.
The major advantage of hosting your images directly on InstantEncore is that, if your website or third party server were to ever experience downtime, those image links would be broken in the App until that server came back online. Hosting your images in our File Storage area ensures that the images in your Custom Tabs will be visible whenever someone is using your App.
How to Embed Images
You can embed images in either the Design or HTML modes of the custom content editor.
Design Mode: The "Design" mode is the default mode when editing a custom tab, and a common way to make quick and easy edits to your custom content. Embedding an image is easy! First copy the URL of your image from our File Storage area (or from your own server or a third party service).
In the custom tab editor, click the icon in the toolbar that looks like a small picture.
Then paste the URL where it asks for the "Image Source". Click on "OK" and your Image will show up in the editor.
Some helpful tips for formatting images with this tool:
- Depending on the background of your app, you may wish to set a Border Thickness of 2 to 3 pixels to provide some contrast between it and the embedded image.
- Adding 5 to 10 pixels of Spacing keeps text from pressing right up against the image.
- While you can set a specific width and height for your image here, with a mobile design in mind you may want to consider using HTML mode and CSS to achieve the most power and control over your custom content with percentage based sizing.
HTML Mode: Working in the "HTML" mode gives you much finer control over your custom content. To add an image in this mode, type
<img src="IMAGE URL"> and paste the URL between the quotes.
Our example image is fairly large
to accommodate larger screen sizes. This is important as we want to use large images that we can scale down, instead of small images that would look bad when scaled up. So in the preview it will look like this:
Using CSS to Fit Images
By itself, the image is very wide and goes beyond the viewing area of the app, causing the tab to do what we call "free-scrolling" where the user can scroll up, down, left, and right with their finger in order to see all of the content. You'll notice I've also added some sample text at this point to make this feel like a real custom tab.
For usability, in most cases we want to limit scrolling to just up and down, but as your app will be used on devices with different sized screens, we also want to make sure that this content will scale to those different sizes.
Lets explore what CSS can do for us and also take a look at another feature, the "Custom CSS" tool in the "Styles" area of the Mobile App Control Panel.
This tool lets you set custom styles that will be applied to the app. Because we don't want these styles to be applied to everything in the app, just our images, we first need to use a
class selector when adding images to the custom tabs. This lets us set CSS for several images without having to type out the code over and over, which makes changes and updates effortless. If you want to have some images take on one style and other images take on a different style, just create a different class for each set.
The HTML for the images in the custom tabs will look something like:
<img class="custom_class" src="IMAGE URL">
And the CSS in the Custom CSS tool will look like:
img.custom_class {
CSS CODE;
}
The
.custom_class can be any unique keyword you like and should reflect what the class is being used for. Examples might be
.banner,
.mapImage,
.artist_photos, etc. Specifying
img will make sure that other elements that might be assigned the same class aren't affected as well. This may not be needed in your case, but it is a good practice to observe.
height: In all cases, we want to set the
height property to
height: auto; to make sure that the image will scale with the width and preserve the aspect ratio of the image.
width: Setting the
width property to 100% means that the image will take up 100% of the width of its container (not including other margins or padding that may be set by the app). This is good if you want an image to act as a banner that always stretches across the entire screen.
img.custom_class {
height: auto;
width: 100%;
}
One thing to be mindful of is that this can cause an image to scale beyond its original size and lead to reduced image quality, which is why I prefer to use the next option, max-width.
max-width: The
max-width property will define the maximum width the image can be. When set as a percentage, this will cause it to scale with its container until it reaches the actual size of the image.
img.custom_class {
height: auto;
max-width: 100%;
}
You'll notice that in this example, the first image looks the same as before, however in the wider example, the image does not continue to grow with the app as it has reached its actual size. This makes the property useful for photos or other situations where strict formatting is not important, but you still want it to scale within reason and without sacrificing quality.
min-width: Very rarely will you want to use the
min-width property, but there are occasions. If you find yourself in a position where you need to embed an image with small text or a map with detailed information, you may wish to prevent the image from becoming too small, but still have it scale at larger sizes.
The image will display at normal size unless the container becomes wider than the actual image size, in which case it will start to scale according to what percentage is set.
img.custom_class {
height: auto;
min-width: 100%;
}
Notice that I have included some "fine print" in our example image to help illustrate this point. While we want to avoid "free-scrolling" when possible, ensuring that text content in the image is readable is also a valid concern, and min-width can be used for these instances.
What Else Can We Do?
Play around with the percentages. Set the max-width at 80% instead of 100% to include more white space or a width of 50% to leave room for text next to the image. You might need some other CSS and HTML tools to help get the formatting just right though.
I've linked several times already to
w3schools - an outstanding resource for HTML, CSS, and more. It lets you experiment directly on their website before bringing what you've learned into your mobile app.
If you have any questions or run into challenges, email us at
support@instantencore.com.
