HTML adoptables tutorial - Chicken Smoothie

How to make copy/paste html codes for (growable) Adoptables

This is a tutorial about how to make codes for your own growable adoptables.

This is not a guide about the same system that Chicken Smoothie uses, but it explains a much simpler use of HTML or forum copy/paste codes which anyone can learn to use. I think it's important to read these explanations and try to understand the code properly, because then you'll be able to customize your site and adoptables better.

Step One: Filename & Image uploading

You first need an image to use as your adoptable, so go draw some pets :)

For this tutorial, I'm using this pet as an example ->

Save your pet image to a filename that you can remember - this pet is saved as adoptableexample.gif

Upload the image to your website's main directory, or if you don't have a website, then find a good free image hosting service to host it on. http://photobucket.com/ is an example of a site that will host your images for free. It is important that you can edit or replace the image later if you want to make it growable.

You now need to write the codes people can use to display your adoptable on other pages. HTML codes are used on webpages, but a different kind of BB code is used on forums - so it is helpful if you provide both for potential adopters.

Step Two: HTML code (for websites)

To display my pet on a webpage, I need the following html code:

Which produces:

People could use this simple copy/paste code to display my pet on their websites - but there are other features of copy/paste codes you will probably want. For example:

Hyperlinking images - You can make images link back to your website when clicked. This is a really useful thing to have on your adoptables - when people see them, they can easily find their way to your site so they can adopt their own.

So to make my image link back to chickensmoothie here's my new code:

<a href="http://www.chickensmoothie.com"><img src="http://www.chickensmoothie.com/tutorial/htmladopts/adoptableexample.gif" border="0"></a>

This produces:

So now we have a code which displays an image, and the image links back here when clicked. What more can we add?

OPTIONAL EXTRAS:

- Pet's name/Owners name text under image:

To display this, you need to add all of this underneath the adoptable image code we have already generated:

Pet's Name: Adoptable Example 
Owner's Name: Tess

To create the above is actually fairly simple, although it looks like a lot of gibberish.

I've color-coded here so you can see all the different tags:

Pet's Name: Adoptable Example 
Owner's Name: Tess

So how did I make this code? Well...

First we need a line break to bring the Pet's name onto a new line under the image, so we add a tag

Then we add whatever words we want to display underneath the image, and add codes to change the way the words look.

I used  to make the font smaller, then enclosed the words 'Pet's name' in tags to make that section bold. The pets name itself (Adoptable Example) isn't using any special tags - it is already distinguished from the rest.

Then, to put more words underneath that line, I put in another   tag

I enclosed the words 'Owner's Name' in   tags again to make the words bold.

After filling in the actual Owners name (Tess) I had to close the tag by using  This is very important - otherwise you will make every other word on that page appear as size 1!

I hope you are still with me after all of that. You should have developed your own HTML copy/paste adoptable code - now you can continue onto Step Three to make a BB code for forum users, or skip that step and learn how to make your pets 'growable' in Step Four.

Step Three: BB/Forum code

At the end of step two, we had generated a code which displayed a pet like this:

Pet's Name: Adoptable Example
Owner's Name: Tess

To get this to display on a forum, we need to change the way the code looks:

Ok, so here's the rundown of this code.

You don't need line-break tags in BB code - you just need to hit enter to write the next code on a new line, so my code is written in 3 different lines.

The first line is code to display a hyperlink image - you replace the first URL with the page you want to link to, and the second URL with the URL of your image.

The [b] [/b] tags cause the font inside the tags to be bold.

There are other tags you can use, which will look like html tags except instead of <> you will have []

If you want to use color, for example, you would put your color code in a tag like this [color=#FF0000]colored words go here[/color].

You can test your BB codes out on the forum by editing your signature or something - no-one will even notice :)

Step Four: Growable Adoptables

Hopefully you got through all of those messy looking instructions without too much trouble! Now for those of you wanting to know how to make your pets 'growable' I have a very basic solution for you. You will have to make the pets grow manually.

First, make sure you have another picture for your pet to 'grow into'. You can set up as many growing stages as you want, but 2 or 3 stages is usually enough.

For this tutorial, I have selected an adult version of my puppy for it to grow into.

When using html to code growing adoptables, everybody who adopted that pet will have their pet grow up at the same time.

This is because to make the pet grow up - you just replace the baby pet image on your server/image host with an adult version which has an identical file name - this means, I have to overwrite my puppy image "adoptableexample.gif" with the adult version which is also named "adoptableexample.gif"

Everyone who is displaying the pet by using the adoptable code you developed above, will have their pet image automatically updated to turn into the new adult version. For them, it seems like magic.

TIPS & TRICKS

There are a few ways you can get creative with this method to make it seem more unique and fun for the adopters.

Remember to be careful not to erase or change a pet image after it's grown!

When CS was new we used this html system, and I used to release new puppys at the start of every month. I made all the pups grow up at the end of the month just before I replaced the adoptables with completely new puppies.
If you would prefer to offer the same adoptables again and again, then after the originals have grown you will need to put up fresh baby versions using a different file name - otherwise if you overwrite the filename of an image people are already linking to, their pets will either shrink back into babies again or change pet completely! Be very careful with the files once they're uploaded, because you could potentially erase everyones pets if you mess with the images that they're linking to. Only overwrite images if you're planning on aging that pet or doing something similar.

Multiple Outcomes

If you want there to be a chance for the same baby to grow into more than one type of adult, I can think of 2 ways you could set it up using this basic method if you were really keen on it:

1. Constant changing of code

If you were clever, you could alter the adoption code every few days or put up a different code only at certain times of the day - so that people think they are adopting the same pet but in fact it is linking to a baby version which has a slightly different file name. Once you have that sorted out - it's easy to replace this special baby version with a different adult version when you make the pets grow.

2. Multiple identical baby versions for adoption

You can do it really simply by posting multiple versions of the same baby (with different filenames) for adoption - and it's just luck of the draw for which one people choose to adopt. You overwrite the different images with different adult versions when it comes time to make them grow.

- - -

That's it!

You can probably see that this method isn't easy, and it definitely isn't perfect, but even Chicken Smoothie started off using this method and it still gained a lot of popularity. You don't need fancy scripts to run adoptables - you just need to be willing to put in the work and thought into making the adoptables as fun as you can.