[Creative Beggar Design How To] Create a simple yet effective linked image gallery using BBCode.

Galleries are a great way to showcase your work, but clusters of multiple large images or spoilers can be unorganized. And so, we are going to use image links instead. NOTE: This tutorial works best if your showcased works have already been posted as seperate topics.

Linked galleriees are useful for a variety of purposes, including:
-less clutter, and more organization
-faster page loading
-the ability to create organized "folders"
-show all your works in a small amount of time ("sampling")
-keep viewer's attention
-better looking design

I will give you the below piece of code, and explain it after.

Code:

YOUR FIRST FOLDER NAME HERE
[spoiler][url=YOUR FIRST TOPIC URL HERE][img]YOUR FIRST THUMBNAIL HERE[/img][/url][url=YOUR SECOND TOPIC URL HERE][img]YOUR SECOND THUMBNAIL HERE[/img][/url][/spoiler]

Okay, this is important.

The spoilers should be kept, so that it creates a virtual folder. This folder can be renamed if you wish, by adding your folder name into the "YOUR FIRST FOLDER NAME HERE" section of the code.

That part's easy. The biggest step is the thumbnail. Making a thumbnail image makes certain that everything is the neat and tidy way that it should be.

When creating your gallery topic, upload each image that you want to display. Instead of copying the "Image URL", or even possibly the "Image" (if you're non-tech-savvy enough to not notice that they sneak in an image link to their website), I want you to copy the "Thumbnail".

What is the thumbnail? Well, servimg is such a good hoster that it provides an additional image every time you host. This is a small image that links to, again, the servimg website. But we're not going to let them. When you paste the thumbnail link into the "YOUR FIRST THUMBNAIL HERE" section of the code I gave you, remove the surrounding url links until only the raw image thumbnail link is left.

Now, for the link itself. Copy the url link of the topic on which you've previously posted your first work (the one we upoaded as a thumbnail). Now, paste it into the "YOUR FIRST TOPIC URL HERE" section of the code. Now, if you click "Preview", you'll see that your folder name shows up above a spoiler. Clicking on the spoiler will reveal the contents of said folder.

Now that you have the hang of it, add a second image and link into the second bits of code provided. If you wish, you can add more images to each folder by copying and pasting only the url and img bits of the pre-existing code parts. It will look like this:

Code:

YOUR FIRST FOLDER NAME HERE
[spoiler][url=YOUR FIRST TOPIC URL HERE][img]YOUR FIRST THUMBNAIL HERE[/img][/url][url=YOUR SECOND TOPIC URL HERE][img]YOUR SECOND THUMBNAIL HERE[/img][/url][url=YOUR THIRD TOPIC URL HERE][img]YOUR THIRD THUMBNAIL HERE[/img][/url][/spoiler]

If you wanted to add another folder, you can copy and paste the entire code that you have. It will look like this:

Code:

YOUR SECOND FOLDER NAME HERE
[spoiler][url=YOUR FIRST TOPIC URL HERE][img]YOUR FIRST THUMBNAIL HERE[/img][/url][url=YOUR SECOND TOPIC URL HERE][img]YOUR SECOND THUMBNAIL HERE[/img][/url][url=YOUR THIRD TOPIC URL HERE][img]YOUR THIRD THUMBNAIL HERE[/img][/url][/spoiler]

So far (since I've only uploaded two of my recent works onto here), this is what my gallery looks like:

My Gallery

Spoiler:

If you want to see my full gallery with all changes made since posting this tutorial, it's available for viewing here.

IMPORTANT NOTE:
For those of you who haven't uploaded all your works onto here, your code is slightly altered, like so:

Code:

YOUR FIRST FOLDER NAME HERE
[spoiler][img]YOUR FIRST THUMBNAIL HERE[/img][img]YOUR SECOND THUMBNAIL HERE[/img][/spoiler]

For those of you who are in this situation: When uploading your thumbnail, don't remove the url links, as that will be the only link to your full-size image. This makes the job simpler for you. All you have to do is copy the "Thumbnail" link, and paste it into "YOUR FIRST THUMBNAIL HERE", and you're done (except for possibly removing the extra img tags).

If you are not in this situation, yet still have one or two images that you have not uploaded onto creative node, you can slightly alter your given code, by removing all url links for the specific image that you want to showcase. For this one image only, you would also not get rid of the url tags from copying the "Thumbnail" servimg hosting link. If you were to showcase two uploaded pictures, but also a third that isn't yet uploaded, your code would look like the following:

Code:

YOUR FIRST FOLDER NAME HERE
[spoiler][url=YOUR FIRST TOPIC URL HERE][img]YOUR FIRST THUMBNAIL HERE[/img][/url][url=YOUR SECOND TOPIC URL HERE][img]YOUR SECOND THUMBNAIL HERE[/img][/url][img]YOUR THIRD THUMBNAIL HERE[/img][/spoiler]

Still need help? Beg, plead, or give me an internet cookie, and I might just make it for you. :D


MADE BY CURIOUS BEGGAR DESIGN
Like this tutorial? Wanna grab the code? It's right here, free for use, as long as you give credit.

Code:

[center][img]http://i22.servimg.com/u/f22/16/22/06/33/curiou10.jpg[/img][/center]

Galleries are a great way to showcase your work, but clusters of multiple large images or spoilers can be unorganized. And so, we are going to use image links instead. NOTE: This tutorial works best if your showcased works have already been posted as seperate topics.

Linked galleriees are useful for a variety of purposes, including:
-less clutter, and more organization
-faster page loading
-the ability to create organized "folders"
-show all your works in a small amount of time ("sampling")
-keep viewer's attention
-better looking design

I will give you the below piece of code, and explain it after.
[code]YOUR FIRST FOLDER NAME HERE
[spoiler][url=YOUR FIRST TOPIC URL HERE][img]YOUR FIRST THUMBNAIL HERE[/img][/url][url=YOUR SECOND TOPIC URL HERE][img]YOUR SECOND THUMBNAIL HERE[/img][/url][/spoiler][/code]

[b]Okay, this is important.[/b]

The spoilers should be kept, so that it creates a virtual folder. This folder can be renamed if you wish, by adding your folder name into the "YOUR FIRST FOLDER NAME HERE" section of the code.

That part's easy. The biggest step is the thumbnail. Making a thumbnail image makes certain that everything is the neat and tidy way that it should be.

When creating your gallery topic, upload each image that you want to display. Instead of copying the "Image URL", or even possibly the "Image" (if you're non-tech-savvy enough to not notice that they sneak in an image link to their website), I want you to copy the "Thumbnail".

What is the thumbnail? Well, servimg is such a good hoster that it provides an additional image every time you host. This is a small image that links to, again, the servimg website. But we're not going to let them. When you paste the thumbnail link into the "YOUR FIRST THUMBNAIL HERE" section of the code I gave you, remove the surrounding url links until only the raw image thumbnail link is left.

Now, for the link itself. Copy the url link of the topic on which you've previously posted your first work (the one we upoaded as a thumbnail). Now, paste it into the "YOUR FIRST TOPIC URL HERE" section of the code. Now, if you click "Preview", you'll see that your folder name shows up above a spoiler. Clicking on the spoiler will reveal the contents of said folder.

Now that you have the hang of it, add a second image and link into the second bits of code provided. If you wish, you can add more images to each folder by copying and pasting only the url and img bits of the pre-existing code parts. It will look like this:
[code]YOUR FIRST FOLDER NAME HERE
[spoiler][url=YOUR FIRST TOPIC URL HERE][img]YOUR FIRST THUMBNAIL HERE[/img][/url][url=YOUR SECOND TOPIC URL HERE][img]YOUR SECOND THUMBNAIL HERE[/img][/url][url=YOUR THIRD TOPIC URL HERE][img]YOUR THIRD THUMBNAIL HERE[/img][/url][/spoiler][/code]

If you wanted to add another folder, you can copy and paste the entire code that you have. It will look like this:
[code]YOUR SECOND FOLDER NAME HERE
[spoiler][url=YOUR FIRST TOPIC URL HERE][img]YOUR FIRST THUMBNAIL HERE[/img][/url][url=YOUR SECOND TOPIC URL HERE][img]YOUR SECOND THUMBNAIL HERE[/img][/url][url=YOUR THIRD TOPIC URL HERE][img]YOUR THIRD THUMBNAIL HERE[/img][/url][/spoiler][/code]

So far (since I've only uploaded two of my recent works onto here), this is what my gallery looks like:

My Gallery
[spoiler][url=http://creative-nodegraphic.forumotion.co.uk/t130-curious-beggar-design-one-cat-one-fruit-one-clock][img]http://i22.servimg.com/u/f22/16/22/06/33/th/cat_fr11.jpg[/img][/url][url=http://creative-nodegraphic.forumotion.co.uk/t129-curious-beggar-design-flair-wine-bottle][img]http://i22.servimg.com/u/f22/16/22/06/33/th/champa12.jpg[/img][/url][/spoiler]
If you want to see my full gallery with all changes made since posting this tutorial, it's available for viewing [url=http://creative-nodegraphic.forumotion.co.uk/t133-curious-beggar-design-showcase-gallery]here[/url].

[b]IMPORTANT NOTE:[/b]
For those of you who haven't uploaded all your works onto here, your code is slightly altered, like so:
[code]YOUR FIRST FOLDER NAME HERE
[spoiler][img]YOUR FIRST THUMBNAIL HERE[/img][img]YOUR SECOND THUMBNAIL HERE[/img][/spoiler][/code]
For those of you who are in this situation: When uploading your thumbnail, don't remove the url links, as that will be the only link to your full-size image. This makes the job simpler for you. All you have to do is copy the "Thumbnail" link, and paste it into "YOUR FIRST THUMBNAIL HERE", and you're done (except for possibly removing the extra img tags).

If you are not in this situation, yet still have one or two images that you have not uploaded onto creative node, you can slightly alter your given code, by removing all url links for the specific image that you want to showcase. For this one image only, you would also not get rid of the url tags from copying the "Thumbnail" servimg hosting link. If you were to showcase two uploaded pictures, but also a third that isn't yet uploaded, your code would look like the following:
[code]YOUR FIRST FOLDER NAME HERE
[spoiler][url=YOUR FIRST TOPIC URL HERE][img]YOUR FIRST THUMBNAIL HERE[/img][/url][url=YOUR SECOND TOPIC URL HERE][img]YOUR SECOND THUMBNAIL HERE[/img][/url][img]YOUR THIRD THUMBNAIL HERE[/img][/spoiler][/code]

Still need help? Beg, plead, or give me an internet cookie, and I might just make it for you. :D


[b][color=#de9b26]MADE BY CURIOUS BEGGAR DESIGN[/color][/b]


Show us an example at the end.

Curious Beggar Design wrote:So far (since I've only uploaded two of my recent works onto here), this is what my gallery looks like:

My Gallery

Spoiler:

If you want to see my full gallery with all changes made since posting this tutorial, it's available for viewing here.

It's up there. :D Right at the end, but before the "Important Note". Should I rearrange it?

no it's allgood :)

Woo! This is awesome! I'm going to have to use this design in my threads.

i will eventually

I was looking through the galleries, and they all looked sorta sucky-ish. So I improvised. x) Heh.

that is pretty cool never knew you could do that with BB