Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Image Page
Darknraged (Guild Admin) 6/2/2008 12:35 PM EST : Image Page
Darknraged
Posts: 93
Posts With Wolves

i seen a guild page with a image age that i have been looking for. i am unsure how to do this though

http://www.guildportal.com/Guild.aspx?GuildID=51602&TabID=527084

is the page i seen it on. if someone could direct me as to how this is done it would be appreciated

TopBottom

Mottie (MVP) 6/2/2008 5:01 PM EST : RE: Image Page
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

That's basically a table with the image resized to fit into the window. They should have displayed thumbnail images and linked to the full sized image. But the basic setup is below. It will resize your thumbnail image to 200 pixels by 140 pixels, so try to get that optimal size or it will look distorted.

Custom StyleSheet
h2 { color: #008000; text-align:center;}
table.imageBox { color: #dddddd; width:100%; text-align:center; padding: 4px; }
table.imageBox tr td { vertical-align: top;  width: 25%; border: 0px; }
table.imageBox tr td img { width:200px; height: 140px; border:0px; }

Content Box (free form)
<h2>Title</h2>
<table class="imageBox"><tbody>
<tr>
 <td>
  <a href="http://fullsize1.jpg"><img src="http://thumbsize1.jpg"></a><br>Description 1
 </td>
 <td>
  <a href="http://fullsize2.jpg"><img src="http://thumbsize2.jpg"></a><br>Description 2
 </td>
 <td>
  <a href="http://fullsize3.jpg"><img src="http://thumbsize3.jpg"></a><br>Description 3
 </td>
 <td>
  <a href="http://fullsize4.jpg"><img src="http://thumbsize4.jpg"></a><br>Description 4
 </td>
</tr>
<tr colspan=4><td><br></td></tr>
<tr>
 <td>
  <a href="http://fullsize5.jpg"><img src="http://thumbsize5.jpg"></a><br>Description 5
 </td>
 <td>
  <a href="http://fullsize6.jpg"><img src="http://thumbsize6.jpg"></a><br>Description 6
 </td>
 <td>
  <a href="http://fullsize7.jpg"><img src="http://thumbsize7.jpg"></a><br>Description 7
 </td>
 <td>
  <a href="http://fullsize8.jpg"><img src="http://thumbsize8.jpg"></a><br>Description 8
 </td>
</tr>
</tbody>
</table>
But this method doesn't make it very easy to add additional images (in my opinion). So look at the method below


How to add a Flickr Slideshow

This is a method of displaying images on your site using a Flickr slideshow...
  1. Set up an account at Flickr.com
  2. Add your images
  3. Go to the front page and click on "Your Photostream"


  4. Then Click on "Slideshow" in the top right


  5. It'll take you to an image viewer. Start the viewer, then click on the "Share" link in the upper right corner.
  6. In the window that pops up, you will see a link and an Embed HTML code. Copy the Embed HTML and paste it into your Free Form Text/HTML type content box while in <> HTML mode.

    <object width="800" height="450"><param name="wmode" value="transparent"></param> <param name="flashvars" value="offsite=true&lang=en-us&page_show_url=%2Fphotos%2F24548802%40N06%2Fsets%2F72157604083181764%2Fshow%2F&page_show_back_url=%2Fphotos%2F24548802%40N06%2Fsets%2F72157604083181764%2F&set_id=72157604083181764&jump_to="></param> <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=en-us&page_show_url=%2Fphotos%2F24548802%40N06%2Fsets%2F72157604083181764%2Fshow%2F&page_show_back_url=%2Fphotos%2F24548802%40N06%2Fsets%2F72157604083181764%2F&set_id=72157604083181764&jump_to=" width="800" height="450" wmode="transparent"></embed></object>

  7. You can adjust the height and width of the frame by changing the red numbers above, but making the width smaller than 800px may cover up some elements in the flash viewer.
  8. Then you need to add the text in green (that sets wmode to "transparent") into two places as above. Doing this prevents the embeded window from being above your facebox window or any other popup windows.
  9. Save  and you should get a window like this 


What's nice about using Flickr, it allows you to e-mail images to the site and it will automatically update on your site!

Edit (10/5/2009): Updated to embed the slideshow (the iframe would overlap the facebox popup).
TopBottom

Mottie (MVP) 8/8/2008 4:01 AM EST : RE: Image Page
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Here is a mini Flickr slide show you can use



Instructions on how to install it are on this website

Use idGettr to get your Flickr user ID, and at the bottom, there are other Flickr Slide show options you can check out.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%