Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Shout > Shout Box Images
Mottie (SuperAdmin) 5/27/2010 11:12 PM EST : Shout Box Images & Links
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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

This is now a Mod
Control Panel > Site Mods > Get Site Mods >
Look for "Shout Box Images & Links"

<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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 10/30/2010 8:01 AM EST : RE: Shout Box Images
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Updated to work with the new layout... and also included the ability to make a shout box scrollable and remove the avatars.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Merenwench (Member) 11/2/2010 5:27 PM EST : RE: Shout Box Images
Merenwench
Posts: 2772

0
Like

0
Dislike

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

TopBottom

Mottie (SuperAdmin) 11/2/2010 7:17 PM EST : RE: Shout Box Images
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Merenwench!

Fixed!! Bunny Dance
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 12/1/2010 10:30 AM EST : RE: Shout Box Images
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Updated the code to make urls inside the shout into links!wakey wakey
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Soloyos (Member) 8/28/2011 4:42 PM EST : RE: Shout Box Images
Soloyos
Posts: 68

0
Like

0
Dislike

Works great thanks.
Photobucket  
TopBottom

Giznat (Applicant) 9/2/2011 6:18 PM EST : RE: Shout Box Images
Giznat
Posts: 2733

0
Like

0
Dislike

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.  
TopBottom

Mottie (SuperAdmin) 9/3/2011 12:32 PM EST : RE: Shout Box Images
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Giznat!

Actually the way I have the shout box images/links set up is to just add the URL, no img markup or anything.

So this: http://www.guildportal.com/GuildFiles/278466/mod.gif automatically just turned into an image:

this http://www.google.com becomes a generic link - link.

And this: {Google}:http://www.google.com automatically becomes a named link - Google
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Giznat (Applicant) 9/3/2011 2:37 PM EST : RE: Shout Box Images
Giznat
Posts: 2733

0
Like

0
Dislike

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
TopBottom

Mottie (SuperAdmin) 9/3/2011 10:39 PM EST : RE: Shout Box Images
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Giznat!

I just looked at your site and all I see is the one Google link that appears to be working.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%