Craig Shillington

I thought I would do a separate and hopefully less complicated How To in regards to making links and showing Jpg files in RB. There seems to be a lot of confusion as to how these things work. So find the part you are interested in learning, maybe open up and edit an old Journal Entry and practice. VBS

A URL is simply the text that shows up in your Browser Window Address Bar (up the very top), the line that starts with http:// If I refer to the URL, that is what I am talking about.

1. ALL CODE IS WRITTEN WITHOUT SPACES Some wrapping of longer lines of code will occur within this Journal Entry, regardless of what the lines look like, code is always one continuous line WITHOUT spaces

---

• TEXT LINKS

---

Sometimes it’s nice to have a text link when we are conversing to others in Red Bubble to help people share information, or to allow them to see another web page that has something to do with the convo. Maybe you like to include songs from YouTube with your work and want to share those Videos and music with others. Anytime you want someone to be able to link to another webpage somewhere, you can make a line of text (or one word) clickable to that link and it’s really easy to do. :)

All you do is wrap the text you want people to see as a link, in qoutes {“} then add a colon {:} and then the URL. So let’s say you wanted to link to my Porfolio so people can have a look at buying something off me ^HEHEHE ... all you need to do is open up my portfolio page in your browser to get the URL from your browsers address bar and just type the name of the link text wrapped in quotes, followed by a colon, then the url so it would look like this (with no spaces) :

” Craig Shillington’s Portfolio ” : http://www.redbubble.com/people/crackers1967/portfolio

Craig Shillington’s Portfolio is wrapped in quotes, so that is the text people will see.

http://www.redbubble.com/people/crackers1967/portfolio is the link we want the text to click too

When you type that within Red Bubble without the spaces you get this :

Craig Shillington’s Portfolio

---

• So, abbreviated – to make a text link in Red Bubble you would type this in as code:

” text ” : link

Replacing the text and link for yours and no spaces.

---

• DISPLAYING JPG’S GIF’S PNG’S ETC

---

Please try to keep the size of these files small, both in dimensions and in download size, as if you use a lot of bigger files, the pages you put them on will load more slowly and that might piss people off!!

Okay, you look around and you notice somehow people are actually making it so that you can see the thumbnail photos of thier works, or others have cool little animated gifs showing. Well … if you can bring up a photo by itself in your browser, you can show it in Red Bubble!! And again, it’s really really easy.

If you want to know the link to any photo you can see in your browser window, right click on the image itself (PC Users … sorry Mac users, maybe someone can help me here) and go down to properties. In the window that opens up you will see a section that has the image properties and the location (or URL). That is the link we need to show that image.

I use a little rotating Note near all the links to Videos throughout my Portfolio, so I will be using that as an example here. This applies to ANY image you want to display though.

First, right click on this LINK and open in a new Window or Tab. That way you can still read this and flick back to the link to practice. :)

You will notice at the top of my description for the photo, I have used the Text Link method described above to link to the Video of that Song in YouTube. And right next to that link, to draw attention to the link, I have my little rotating Note :)

Right Click on the little rotating Note and go to Properties. In the box that opens you will see the Image Properties and A URL to the Image. It should be this:

http://home.people.net.au/ ~ casphotography/notes-15.gif

That is the link to where I have the Note.gif Stored. And that is all you need to know for any image, the URL that will show just that image in your Browser. If you copy that link to your browser Address Bar (with no spaces) and hit Enter … all you should see is an empty page with the little note rotating in the top left corner. PERFECT!! If you can open any image in this way, you have the URL in the Address Bar. If you copy a link to your Address Bar and it doesn’t just show the image, something is wrong. Most Image URL will end in JPG, GIF or PNG. There are some exceptions, but there should be one of those somewhere in the URL.

Okay, so we have the URL, how do we make the image show in Red Bubble.

Where you want the image to be shown, paste or type the URL. Then at the very start and the very end of the URL (with no spaces) put EXCLAMATION MARKS {!} So my note would then be (without spaces):

! http://home.people.net.au/ ~ casphotography/notes-15.gif !

And in Red Bubble will look like this:

---

• So, abbreviated – to make an image show in Red Bubble you would type this in as code:

! URL !

Replacing the URL with the URL for the image and no spaces.

---

• IMAGE LINKS

---

Okay, so we know and understand now how to make links and also how to display images in Red Bubble. If you don’t, go back and understand it because this next bit could be very confusing if you don’t ;)

We know we can show an image, and we know we can make links to text. So can we make an image work as a link? YES!! VBS And it’s sorta easy if you understand what the code is doing and how it works. I will be using my Message Me button link in my profile for this example. Because that is an Image that links to my message board and so you can leave me a message ;)

Here is the link to my Profile The very first button I have in there is the Message me Button. When you click on it, it takes you to my Journal Entry I set up for people to message me in. So I know the link … all I need to get now is the URL of the button. Easy, again, right click the Message Me Button and goto Properties, look at the Image Properties and the URL there … It should be this:

http://home.people.net.au/ ~ casphotography/m.gif

We know from above, to display an image we wrap it in Exclamation Marks, so to show that in Red Bubble we’d type (no spaces):

! http://home.people.net.au/ ~ casphotography/m.gif !

Which will show as:

Okay, we have the image up and working, how do we link to it? Exactly the same way we link to text from above. Simply follow the code with a colon {:} and the link you want people to goto when they click the image. In this case my Message Board:

http://www.redbubble.com/people/crackers1967/journal/show/30445

So the whole line of code would look like this (no spaces .. and ignore the word wrap, this is all one single line):

! http://home.people.net.au/ ~ casphotography/m.gif ! : http://www.redbubble.com/people/crackers1967/journal/show/30445

When typed with no spaces and on one line it looks like this:

---

• So, abbreviated – to make an image show in Red Bubble that links to a URL you would type this in as code:

! URL ! : link

Replacing the URL with the URL for the image, and link for the URL of the link to click to and no spaces.

---

View all my HOW TO’S