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
Mottie (MVP) 5/27/2010 11:15 PM EST : Shout Box Images
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Shout Box Images & Links

This script allows you to add links and image URLs to the shout box and it will detect, insert a thumbnail sized image and make a popup to show you a full sized image.

Add this script to any Free Form Text/HTML widget on the same page as the shout box (you might need to put the editor in RAW/Script mode - link in upper right corner), or less optimally into the Footer HTML.

Shout Box without script

 Shout Box Script ( URL Removed )
 

Usage
  • Images

    • When adding image URLs, separate each url with a space.
    • Only urls ending in .jpg, .png, .gif, .jpeg or .bmp

  • Links

    • Adding URLs to the shout box separated by spaces.
    • A plain url will be converted into a link named "link":

      "http://www.google.com" becomes "<a href='http://www.google.com'>link</a>"

    • To name a link follow this format: "{name}:url"

      "{Google}:http://www.google.com" becomes "<a href='http://www.google.com'>Google</a>"

      * The only problem I have found is if you add curly brackets inside a shout and a url somewhere else inside the URL. The script thinks the word inside the curly brackets is for a link and really messes up the whole shout.
Code
<style>
.shoutBody {
  padding: 0 0 10px 20px; /* top right bottom left padding */
}
.shoutWithImage .shoutBody {
  min-height: 54px;
}
.shoutWithImage .shoutBody img {
  max-width: 50px;
  max-height: 50px;
  float: right;
  padding: 2px;
}
.scrollableShout {
  height: 300px; /* adjust the shout box height here */
  display: block;
  overflow-y: auto;
}
</style>
<script src="/GuildFiles/258012/shout-images.js"></script>
<script>
$(window).load(function(){
  var shoutScrollable = true;
  shoutImages(shoutScrollable);
});
</script>
Customizing
  • Shout Box Image Style
    Set the thumbnail image size using the "shoutBoxImg" CSS definition. In the code above, it is set to resize the image to 50x50 (but will maintain aspect ratio, because it is using max-width and max-height). Adjust the size values in red. By default the image is set to float to the right side of the shout box line ( value in blue ).
    .shoutWithImage img { max-width: 50px; max-height: 50px; float: right; padding: 2px; }
  • Shout Box line that contains an image
    A class is added to each line that contains an image. By default it is set to the image max height plus the padding on either side ( 50 + 2 * 2, or 54px ). You can remove or add styling to this shout box entry as desired.
    .shoutWithImage { min-height: 54px; }
  • Make the shoutbox scrollable
    You could make the shout box scrollable by the shoutScrollable variable to true. If you want to adjust the height then modify the height in the ".scrollableShout" css class (in red), it's set to 300px by default.
    var shoutScrollable = true;
10/30/2010: Modified script to work with new shout box layout.
11/2/2010: Avatar option removed, it is now an option. Updated to work with new layout.
12/1/2010: Script will now make any url (not an image) clickable.
12/2/2010: Shout URLs now work in IE.
8/2/2011: Updated and moved shout box code to an external script.
TopBottom

_Shulkie_ (Guild Admin) 5/28/2010 3:50 AM EST : RE: Shout Box Images
_Shulkie_
Posts: 467
Fingers of Fury!

sweet addition mottie. big thumbs up.
Cheers, Shulkie
TopBottom

Mottie (MVP) 10/30/2010 8:02 AM EST : RE: Shout Box Images
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Updated to work with the new layout... and also included the ability to make a shout box scrollable and remove the avatars.
TopBottom

Merenwench (MVP) 10/30/2010 8:20 AM EST : RE: Shout Box Images
GuildPortal MVP
Merenwench
Posts: 2772
Zomgawsh Poster

Brilliant! Now if I could get my event box fixed I'd be a very happy lil camper LoL

TopBottom

Mottie (MVP) 11/2/2010 7:17 PM EST : RE: Shout Box Images
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Updated again
TopBottom

Mottie (MVP) 12/1/2010 10:35 AM EST : RE: Shout Box Images
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Updated this script to make urls in the shout box into links.
TopBottom

Mottie (MVP) 12/2/2010 1:03 PM EST : RE: Shout Box Images
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Fixed again to make links work in IE... sorry about that.
TopBottom

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