Images Posted in Comments

[kopper]

I would like to request that Ning fix this bug with images posted to a member's comments section. What happens now is if the image is wider than the comments column, it gets cut off on the right side. See my attached screen shot as an example. You can tell that this image is cut off on the right side because the "E" at the end of "RAMPAGE" and "IO" at the end of "RADIO" are cut off.

Simply stated, images posted to a member's comment section should automatically adjust to fit within the boundaries of that comment window, not show up as only a portion of the image. This makes sense, right?

Can we get this fixed, please?

[Patrick Chappelle]

I agree! I resize my images in the uploader when I post comment images on members profiles, it would be ideal if it would simply resize it.

Great site by the way, bro! I'm tempted to join, but I've got so much going on with mine, trying to get it to where yours is.

[Design Faerie]

We also resize everything by pixels in the editor prior to saving/adding...saves a lot of headaches

[Peter Sorensen]

An easy fix for this is to go into your Appearance tab and add something like this to your CSS:

.xg_span-14 .comment img {max-width: 670px;}

".xg_span-14" being whatever container your comments are in (it's different for every site), and the 670px being whatever size you want them to be at their maximum width. This ensures that no image posted in your comment section is ever larger than the comment section itself.

Or, depending on how you have your site set up, you could also just change the comment section's CSS to include an "overflow: visible;" so that any image that is too large isn't cut off.

[Jen]

Hi kopper,

Peter is correct. If you want to make sure you don't alter any image size except the comment wall, try this in Advanced CSS:

.xg_widget_profiles_profile_show .xg_module_comment_wall img {
    max-width: 375px!important;

}

If you allow profile customization, you might have to add to Custom Code Box to override their settings. Wrap in a style tag:

<style>

.xg_widget_profiles_profile_show .xg_module_comment_wall img {
    max-width: 375px!important;

}

</style>

Hope that helps,

Jen

[kopper]

Thanks, that worked, although it's still trimming off some of the right side of images. I reduced the max pixel width down to 366 and that appears to be the widest I can make the width appear before it starts to trim it down.

<style>

.xg_widget_profiles_profile_show .xg_module_comment_wall img {
    max-width: 366px!important;

}

</style>

[Jen]

Good deal, kopper. Yeah, it depends on your unique theme CSS and customization.

Best,

Jen

[kopper]

OK, the image problem has been fixed, but what about when people embed YouTube videos in comments? These are also too wide for the comments column. Check out the videos posted in this guy's Comments section to see what I mean:

http://garagepunk.ning.com/profile/ramiLTX

How can we fix that?

[George H. Compton IV]

here you go this will fix the problem videos will now fit :-)just for videos use this code

.xg_widget_profiles_profile_show .xg_module_comment_wall embed {
    max-width: 335px!important;
    max-height: 275px!important;
    margin-left: -1px;

}

and if you would like the comment bubble  it will also make the Videos and pictures fit

/*Comments in bubble with arrow*/
dl.comment{
border:none!important;
max-width: 450px!important;
}

#comments dl.comment dd, #discussionReplies .discussion dd div.description, .xg_module_comment_wall dl.comment dd{
    background: #14135e;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-right: 35px !important;
    padding: 2px 5px 27px 10px;
margin-left:20px!important;
}

#comments dl.comment dd:before, #discussionReplies .discussion dd div.description:before, .xg_module_comment_wall dl.comment dd:before{
    background: url(http://api.ning.com:80/files/HFqCj2J1p5dDEhLE1YWO29om9ILqESN44Bg6dD...*ZHP9Un645KjUnEM37g4p/cornerright.png?c=290&v=201204022039) no-repeat scroll 5px 15px transparent;
    content: " ";
    display: block;
    height: 36px;
    margin-left: -33px;
    position: absolute;
    width: 37px;
}

.xg_widget_video_video_show .description, .xg_widget_photo_photo_show .description{
border:none!important;
}


.xg_widget_profiles_profile_show .xg_module_comment_wall embed {
    max-width: 335px!important;
    max-height: 275px!important;
    margin-left: -1px;

}



.xg_widget_profiles_profile_show .xg_module_comment_wall img {
    max-width: 335px!important;

}

[kopper]

Thanks! But what do you mean by "comment bubble"?

[George H. Compton IV]

 the comment bubble is in the picture above :-) but you don't have to use the comment bubble use the code right under the picture if you just want your videos to fit.

If you want to see more of a comment bubble go to my topic

http://creators.ning.com/forum/topics/comment-bubble-improvements-o...

[George H. Compton IV]

I'm glad my code work for you looks great on your profile :-)

[kopper]

Well, it was working for a while, then today I noticed it had stopped working (and I did nothing to the code or remove it or anything). See attached screen shot...

Any idea what happened?