There are 2 types of images that can be inserted into a TikiWiki page: The Uploaded image and the Hotlinked image. The uploaded image is an image you add to the server and insert into your page. These images are stored on your server where your TikiWiki is located.
The “Hotlinked image” or “Linked” is an image that you link to from an external site. For example, there are free images you can use on your site that are available online. linking to these images requires using the url of the image. This will load the image from the images source server instead of images on your server. The following sections will explain how to insert an uploaded image and a linked image in TikiWiki.
Uploading an image to a TikiWiki page
This section will explain how to insert an image to your TikiWiki from an image file on your server.
- Log into TikiWiki.
- Navigate to the page where you want to insert the image and click Edit section
Place your cursor where you want to insert the image. Click the “Choose or Upload images“ icon in the WYSIWYG editor.
In the Upload File page, click the browse button. Navigate to the image you want to upload and select it.
Click the upload File(s) button.
You should see the image show in the image list on the server.
Click the image and click “Click here to insert in Wiki Syntax“.
The code should look like the snapshot to the right.
Save the changes and preview the page. You should see the image inserted similar to the image to the right..
Linking an image from an external site
Here we will insert an image that is hotlinked to another site. The image url we are going to use is the following:
https://www.mozealous.com/uploaded_images/856268_71035967-759101.jpg
The following steps will explain how to use this url to insert the image to your site.
- Log into TikiWiki.
- Navigate to the page you want to insert the hotlinked image on and click Edit section
- Place your cursor where you want to place the image and click the image icon from the WYSIWYG editor.
On the image properties page, fill in the following.
– Image Source: This is the url to the image you want to display on the site. In this example we will use the following url:
https://www.mozealous.com/uploaded_images/856268_71035967-759101.jpg
– Thumbnail: This will make the image a thumbnail to save image loadtime.
– Image width: Sets the image width to a standard size.
– Align Image: Aligns the image left or right making the text wrap around the image.
– Align Image Block: Aligns the box that contains the image.Additional settings can be found in the Advanced options. In this tutorial, we are not going to discuss any of the advanced options.
Click Replace.
Now you will see the code in the wiki text.
Save the changes. Now the image will show on your wiki page and load from an external site.
