Page 1 of 1

Cross referencing images in the gallery

Posted: Wed Oct 17, 2007 4:09 pm
by bloodjelly
Showing multiple views in your gallery listings

I've been asked a number of times how to add different views to pieces in the gallery. For sculptures this is often a necessity, and sometimes 2D artworks need a separate image for a closeup, or showing a frame that's included in a piece for sale.

You might have noticed that on the forum and in the gallery you can use something called "BBCode." All those nifty text decorations that you get at the top of the forum when posting are BBCode. It allows you to add colors, links, sizing, images and more to your posts here. You can also add it to your image descriptions, album descriptions and comments in the gallery. Whodathunkit?

Read more about BBCode here if you like. We'll be looking at this section in particular: linking an image.

Enough of the code for a bit. (If you caught the nerdy computer pun you're a nerd's nerd.) The basic idea is outlined below.

How to do it - Method 1
In this method, we're taking a pair of images and linking one to the other using thumbnails.

Step 1: Upload all the images you want linked
Step 2: Open one or two browser windows so that you can see each thumbnail that you want to associate. In the example below, I've chosen two photos of my completely normal dog Dandy. :roll:


Step 3: Now open one of the images in a new window. We'll do the one on top. If you're logged in (and you'll need to be), you'll see special links directly underneath your image. Click the one that reads "Edit file information."

Step 4: Leaving this browser open, go back to the other browser that was showing the thumbnails of your images. Find the thumbnail of the image that's not open (in our case the bottom image of Dandy) and right-click it. Depending on your browser, you will have different options for copying the link and image location. First let's copy the link.

You should have right-clicked already, and you'll be presented with a menu. In Firefox you'll want to choose "Copy link location." In Internet Explorer you'll choose "Copy shortcut." Other browsers will have a similar feature with different wording. Worse comes to worse, simply click the thumbnail image and then copy the link directly from the URL display bar at the top of your browser.

Step 5: Now that you've copied the link location of the other thumbnail, go back to the "Edit file information" browser window that shows the original image we opened up (the top one in our case).

We're going to now add a thumbnail image linking directly to the other photo. In your description, type the following:

Code: Select all

[url= LINK][img][/img][/url]

That tells the gallery we're going to be turning whatever's in between the URL tags into a link to the address we've given it. The IMG tag is going to sandwich a link to the thumbnail image, which we'll get in the next step.

Step 6: Go back to the thumbnail page again like you did in Step 4, only this time when right-clicking the thumbnail, look for an option that reads "Copy image location" or similar. In Internet Explorer, select "Properties" after right-clicking the image, then copy the URL under "Address."

Switch browsers again to the window where we're editing the top image and paste that URL in between the IMG tags. Your code should now look something like this:

Code: Select all

[url= LINK][img]LINK TO IMAGE[/img][/url]

Click "Apply modifications" in the edit window, wait for it to refresh, then click the image to see that your link worked.

Here's an example of how it will look in my gallery. Click the new links in your gallery to make sure they work correctly.

The above process can be repeated for any number of images/views. You can also simply have a text link if you wish, by using this code:

Code: Select all

[url= LINK] Link text here [/url]

It's a complex process on paper but it's really simple in practice, once you get the hang of it. Good luck :)

Method 2
This method is better for linking a large group of images (say 5-10 or more). Instead of linking each image individually, we'll link a common banner graphic to an album.

Step 1: Create a banner that will let viewers know what types of images they will see, such as the one below. Upload the banner to your gallery here (preferred), or put it on a free image hosting site.

An example banner

Step 2: Upload all images you want to link to a single album.
Step 3: After they're uploaded, go to the main page of your gallery (Control panel > View my gallery) and right-click the album you just put all your images in to copy the link (see step 4 of Method 1).
Step 4: Click "Edit files" to edit every image in that album. For each image, copy and paste the following code with your specific links:

Code: Select all

[url= TO ALBUM][img]LINK TO BANNER IMAGE[/img][/url]

That way all people who click the banner will be taken to your album, whether it's paintings, photographs, things colored purple, etc.


Re: Cross referencing images in the gallery

Posted: Sun Sep 20, 2009 10:20 am
by sorinapostolescu

Data are extraordinary.Do not know how to upload details of the piece "New Testament".
After processing the information I will try.I'm looking for and how can I put in a picture frame ...

Thank you!

Re: Cross referencing images in the gallery

Posted: Fri Feb 25, 2011 8:08 am
by alanminshull
Excellent this Trevor, I am right clicking and saving all these coded to Microsoft word, and thanks a bunch :)

Re: Cross referencing images in the gallery

Posted: Tue Feb 23, 2016 7:35 am
by Hirood1045
I tried as you said but I did not get what I want like the man says he just right click and file automatically saved.But here it is failed i do as well as you-you say what could be the problem ??? :?:

Re: Cross referencing images in the gallery

Posted: Tue Jun 14, 2016 12:46 am
by crossbordersart
Last time, I tried to do this for my Art gallery in Dubai but not successful but now, I will try to do it again by applying your method.

Re: Cross referencing images in the gallery

Posted: Thu Oct 27, 2016 3:05 pm
by SugarLand
Thanks bunches