Shout Box Images & Links

GuildPortal admin site link to the original post

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>"
    

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 .shoutBody { 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.

This was working great but stopped earlier today. Temporary glitch or....?

Updated the code to make urls inside the shout into links!

I am trying to get this working but in regards to links I seem to be having a strange issue where it displays as such:   Our forums">link    or    link">link


Additionally, images display as the following:  Image test: " alt="">



Would you happen to have any suggestions Mottie? Also, I would also like to note that I am using the "mod" version of this that is selected from the new section under control panel.  

Hi again Mottie,

Thanks again for the reply! We tried posting a varying degree of links and they still all show up broken for some strange reason. If you could have a look at our shoutbox here it would be greatly appreciated!

http://visvirestoday.guildportal.com/Guild.aspx?GuildID=423551&TabID=3605050