Introduction
Adding images to your news or forum posts can add a lot of personality to your site. There are several ways of doing this at this time, and this is one of the better ways as it creates a thumbnail (smaller version of the image) that can then be clicked to display the larger image without leaving the page (lightbox).
Uploading Images
This guide is going to assume you have already uploaded the image(s) from your desktop to either your Folders & Media or to a third party image hosting site like Photobucket.
Did you know?
That you cannot link images directly from your desktop to be displayed on a site. You must first upload them to the Internet.
Placing Images
This step is if you have uploaded the image to your Folders & Media section of the Control Panel. Find the thumbnail of your image you want to post into your news or forum post. Right Click on it. This will bring up a menu. You will want to select Copy Link Location. You do not want Copy Image Location. You have now added the URL (or link) of the image to your computer's clipboard.
You may want to open Notepad and paste the URL of the image into a blank document while you work.
We are now going to add the image to the news or your forum post. So if you have started the post of news yet this will be the time to. When creating a forum post or news post you have the WYSIWYG Toolbar options when using the TinyMCE Editor. This is what we are going to use.
You will want to click on the Insert / Edit Image icon in the toolbar. This will open up a popup box for you. You are going to want to now copy (ctrl + V) the images link you had added to your computer's clip
board into the Image URL field.
Next you will want to set the width and height of the image. This will allow for faster load time and decrease the amount of scroll members would have to do with reading your posts.
Also it keeps you from breaking the columns or forcing scroll bars. So only set the width (first box on the Dimensions). Make sure the second box remains empty. This will have it set 100% height to match your width.
You can add the border, spacing, alignment, and description if you want at this time.
Click Insert and you should now see your image in the WYSIWYG editor box.
Image is now a Link
The next step is to turn the image into a link. This will allow the reader to click on the thumbnail we just created and see the larger image.
Click on the image you just put in. You should now have eight (8) little white boxes around the image (1 on each corner and 1 on each side). This means you have the image selected. This will also turn the Insert / Edit Link icon in the WYSIWYG Toolbar click-able.
You will need to click on it to open the Insert / Edit Link window. Once the window pops up copy (ctrl + V) the images link you had added to your computer's clipboard into the Link URL field. Leave the Target as -- Not Set --, and you may add a title if you wish to.
Click Insert and now the image is now a link.
Lightboxing
The image is a thumbnail and it links to the larger image now, but some people hate being redirected to a new page then having to go back to the original page to continue with their reading or searching. To fix this we are going to use what is call LightBox. What this does is displays the larger image in a popup when the image (or link) is clicked.
We are going to need to add in the lightbox class to the link manually at this time. To do this we're going to need to click on the Edit HTML Source button in the WYSIWYG Toolbar.
This will popup a new editor box full of the HTML source for your current posting. You want to look for your image. If you have more than one adding descriptions when placing the image will make it easier to find which image is which.
We are looking for the code that looks something like:
We are now going to add in the class lightbox to it. So it should end up looking like this:
Using Lightboxs makes viewing your guild site easier to navigate, which could increase your members' traffic.
Once you have added the class in click on Update and that will take you back to the WYSIWYG Editor.
Adding Images in Posts
If you are adding images to a post you can use the "Add a file from a Folder" feature instead.
Only way?
At this time this is the best way to add images with the lightbox feature to your guild's site. You do not have to use the lightbox and you don't even have to link it or create the thumbnail for it. Thumbnails and lightboxes just make it easier to navigate your site for anyone looking at it.
Did you know?
When making Pages or Posts you can use the Insert a file from a Folder Option to add your images with the lightbox link.