background image

PopIT Images

There are times when you need to display a photo or map or other large graphic, but you don't want it to fill your page. This is when you need a way of adding a link, either as text, or a button, or a small thumbnail which will open the large image when clicked. Using the PopIT Image code you can insert image links anywhere on any page.

The PopIT Image code always starts with...

[[#0:

... then you add the appropriate parameters shown below, and end with the usual closing double square brackets ]]

 

Using a Text Link to open a Photo or Graphic

Step 1: Upload your photo or graphic into a Media folder

Step 2: Insert the PopIT Image code in your page like this...

[[#0:img=mybigphoto.jpg:txt=Click here to view the photo]]

Your text link will then appear like this...
Click here to view the photo

The first parameter in this example is img ...

img=mybigphoto.jpg

... this is the filename of the photo that you want to be displayed, so you enter the path to the image in your Media folder.

If you saved your photo in a sub-folder called mypics then you would include that folder in the path...
img=mypics/mybigphoto.jpg

The second parameter is txt which is the link text (the text you want to use as the link)...

txt=Click here to view the photo

... you can use whatever text you like as your link text.

The default mouseover text is View / mybigphoto.jpg
You can overide this and use your own mouseover text by adding the title parameter...

[[#0:img=mybigphoto.jpg:txt=Click here to view the photo:title=Click to view my gears photo]]

... this would then make your mouseover text change like this...
Click here to view the photo

 

Using a Text Button as the link

Step 1: Upload your photo or graphic into a Media folder

Step 2: Insert the PopIT Image code in your page and include the link=button parameter like this...

[[#0:img=mybigphoto.jpg:txt=Click here to view the photo:link=button]]

Your text link will then appear like this...
Click here to view the photo

 

Using a Graphic Button as the link

Step 1: Upload your photo AND your button graphic into a Media folder

Step 2: Insert the PopIT Image code in your page and include the thumb=mybutton.png parameter like this...

[[#0:img=mybigphoto.jpg:thumb=mybutton.png:txt=Click here to view the photo]]

Your button graphic link will then appear like this...

You add the path to your button graphic in the same way as your img path.
In this example our button is a png graphic instead of a jpeg.

 

Using a Thumbnail Photo as a link

Step 1: Upload your large photo into a Media folder (you don't need to create a thumbnail version)

Step 2: Insert the PopIT Image code in your page and include the thumb & width parameters...

[[#0:img=mybigphoto.jpg:thumb=mybigphoto.jpg:width=150:txt=Click here to view the photo]]

Your thumbnail link will then appear like this...

You make the thumb path the same as the img path, but you set the thumbnail size using the width parameter.
The width can be any size in pixels, and the height will be adjusted in proportion.

If you want to align the thumbnail to the right then add the align parameter...

[[#0:img=mybigphoto.jpg:thumb=mybigphoto.jpg:width=150:txt=Click here to view the photo:align=right]]

... your thumbnail will then be aligned to the right.
Alternatively, for more precise positioning, insert a table and add the thumbnails and text into table cells.

You could also use a different thumbnail than the original large version, just like the button graphic above.

 

Using a Gallery Photo

Photo from a Gallery

This photo has an ID of 548 which you can find from your Gallery Manager in the Photos in this gallery section.

You can display any individual photos like this from your galleries anywhere on any page, and they will enlarge when clicked, displaying the image title and description, just as they do in the Pro-Gallery thumbnail display. This is ideal when you want to present a few sample photos on a page as a preview. You could then add a link to the full gallery pages.

To insert a photo from your galleries you just need the ID of the photo which you can find in the Photos in this gallery section of the Gallery Manager. click to see the Photo ID

When you have the Photo ID, insert the following PopIT code into your page...

[[G548]]

... the PopIT code to insert a gallery photo always starts with [[G and then the Photo ID followed by the closing brackets ]]

You don't need to add any other parameters, you only need the photo ID.