| View previous topic :: View next topic |
| Author |
Message |
Misty Glen
Joined: 01 Nov 2007
Posts: 1393
|
 Posted: Sat Dec 12, 2009 8:29 am Post subject: Using images to their full potential |
 |
|
On an animal's page you have a box labelled "Image Link:" which you can use to add an image to your animal, however this is not the limit of its use. As well as giving your animal a picture, you can also use this to resize this image, add text, links, html or multiple images to your animal's page.
Resizing an image
If you have a really large image, eg: wallpaper size, you may want to shrink it down to make it better fit on an animal's page.
To resize an image, simple type in the link, then follow it with either:
or:
where "xxx" represents the dimensions in pixels. Make sure you have a space between the link and the above code.
If you want you can define both the width and height, but this is unnecessary, and if you get the proportions wrong you will end up stretching the image.
The text you put in the "Image Link:" box may end up looking something like this:
| Code: | | http://www.examplesite.com/image.jpg width=600 |
Adding text
Example - text only
Example - image + text
Example - image + text + wrapping
If you want to put notes on an animal you can use the "Personal Notes" box, but only you can see these notes. If you want to display text that everyone can see, you can use the "Image Link:" box.
If you wish to display both an image and text, type in the link to the image, then follow it with something like this:
| Code: | | ></p>Type your text here.</p |
If you don't have an image for the animal you could just use the above code on its own, in which case a broken image icon will appear on the page. However since the "Image Link:" box is expecting a certain format you must make sure you include at least two full stops (.) in your text.
Alternatively, you could just use any old image, such as  . In this case the code could look something like this:
| Code: | | http://bit.ly/7VW4xT></p>Type your text here.</p |
If you want to be a little fancy, you could wrap the text around the image like you see in newspaper or magazine articles. To do this leave a space after the image link, then type:
Your code should now look something like this:
| Code: | | http://www.examplesite.com/image.jpg align=left>Type your text here.</p |
Make sure the very last thing you type in is </p otherwise you will get some weird wrapping effects happening over the rest of the page. In this specific case using <br or anything else won't resolve this issue.
Note: when you first submit the code it will display in an odd manner. Simply refresh the page by clicking on the animal's name at the top of the page and it will display properly.
Adding extra images
Example - two images
To give your animal two pictures, enter the code in the "Image Link:" box in the following format:
| Code: | | http://www.examplesite.com/image.jpg></p><img src=http://www.examplesite.com/image2.jpg |
To have the image appear on the same line, remove the </p> code. To add another image, add the following code on to the end of the above code:
| Code: | | ></p><img src=http://www.examplesite.com/image3.jpg |
Note: when you first submit the code it will display in an odd manner. Simply refresh the page by clicking on the animal's name at the top of the page and it will display properly.
Adding extensive html code to your animal's page (experienced coders only)
Example - extensive html
In theory there is no limit to the sort of html code you could add to your animal's page using the "Image Link:" box.
To add in your own code you must first understand what is happening when you type text in the "Image Link:" box. The code on an animal's page is displayed like this:
...<img src=whatever you typed in>...
If you typed in a picture link, it would appear like this:
...<img src=http://www.examplesite.com/image.jpg>...
while if you typed in code, it would appear like this:
...<img src=http://www.examplesite.com/image.jpg><Your coding goes here></p>...
So essentially to add your own code to an animal's page, you need to close the image tag early, and leave the last tag open so that it will be closed by the end of the original image tag.
A rough but effective way is to start with > and end with <br or </p
A cleaner, more elegant way would be to start your code with something like:
| Code: | | http://www.examplesite.com/image.jpg> |
Then just leave off the last > from your last bit of code. If the last thing you type in is text to display on the page, then just follow it with <br or </p
Note: the "Image Link:" box can only hold a maximum of 255 characters. If you are having trouble with character limits you could try replacing your links with ones generated by sites like http://bit.ly, which can create much shorter urls. Alternatively you could use frames, which would display another webpage within your animal's page, but this is something only recommended for people extremely experienced with coding in html.
Last edited by Misty Glen on Sun Dec 27, 2009 7:12 am; edited 5 times in total |
|
| Back to top |
|
 |
Cosmosxx
Joined: 28 Apr 2009
Posts: 1228
|
| Posted: Sat Dec 12, 2009 3:16 pm Post subject: |
|
|
Awesome Misty....
Very helpful.
 |
|
| Back to top |
|
|
Chloe Taylor
Joined: 08 Apr 2009
Posts: 6693
|
| Posted: Sat Dec 12, 2009 7:25 pm Post subject: |
|
|
| wow! thanx! |
|
| Back to top |
|
|
Misty Glen
Joined: 01 Nov 2007
Posts: 1393
|
| Posted: Sun Dec 13, 2009 12:43 am Post subject: |
|
|
You're welcome.  |
|
| Back to top |
|
|
Misty Glen
Joined: 01 Nov 2007
Posts: 1393
|
| Posted: Sun Dec 27, 2009 7:09 am Post subject: |
|
|
| Edited to add in stuff about wrapping effects and also include examples of everything. |
|
| Back to top |
|
|
Kholran
Site Admin
Joined: 28 Nov 2006
Posts: 784
|
| Posted: Mon Dec 28, 2009 12:16 am Post subject: |
|
|
Please also remember that any and all images used on this site MUST be copyright free (ie NO Google images without being 100% certain they are stock).  |
|
| Back to top |
|
|
SomebodyDude
Joined: 15 Aug 2009
Posts: 4997
|
| Posted: Fri Jun 04, 2010 12:10 pm Post subject: |
|
|
| Thought I'd bump this back up... |
|
| Back to top |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
Search Forum & Players
Memberlist
My Farm
Log in to check PM
