Image Guide & Assets

This is a guide for our authors on best image sizing practices when constructing your posts on TOHK.

Featured Image

This is your “cover image”, this will appear as the link image on TOHK, as well as the featured image when you share your posts.

Your featured image should be 1280 x 712px (or a similar ratio).
This ratio fits best with most of the display on TOHK. However when sharing on various social media such as Facebook and Twitter, portion of the image will be cropped off, please be wary of that.

Below is a visual aid of where within the image will be safe area.


Original Assets

Sometimes you may want to have some visual aids to go with your article, such as self created graphs and tables. We encourage you to brand your original works with TOHK branding to protect your hard work.

To keep our works consistent, we would like you to use our TOHK bottom bar to brand your assets. You may right click and save as the follow bars.

TOHK bottom bar
TOHK bottom bar (reverse white)
logo no background png
logo no background png (reverse white)

Use example:

Place it at the bottom of your asset and extend the bar to the edge. You may also like to use a big TOHK logo to place a watermark on whole background (example 2).

Example 1
Example 2

Using Images

When you use an image that you do not own, make sure you have been granted permission from the artist/photographer for the image to be used on TOHK, and credit them if possible. For images on social media such as Instagram, you may also choose to embed the post to achieve using the image and crediting the author at the same time.

*Edited on 2021-05-31 due to changes by Facebook/Instagram. Please note that the “Embed” block in the WP editor will no longer work for embeding Facebook/Instagram posts. You must use the following HTML method.

Step 1: Go to the Instagram post you would like to embed, click on the 3 dots on the top right corner.
Step 2: Select “Embed”, and then copy the code given.
Step 3: Go back to the WordPress post editor, click the + sign on your editor, find “Custom HTML”, and paste the copied code in there.

Below is an example of how it would look in the case of an Instagram embed.

If you are looking for some generic images to use, such as view of the Victoria Harbour, there are various websites online that provides free royalty free images. The following are a few of these websites:
https://pixabay.com/
https://unsplash.com/
https://www.pexels.com/royalty-free-images/


Finally……
If you need any help with creating an image, graphs or tables, feel free to drop me a message through TG @emetselch