Insert Photo - Set Contraints

OK, so you are in the TinyMCE editor and want to insert a photo. You click the insert/edit photo icon and past the URL of the photo you want to insert.

That photos happens to be 2000px X 2000px and without thinking, you click OK and BAM! The images overlaps the whole website and its all jacked now.

How can we set the constrain proportions to a fixed H x W such as 600x400 regardless of what size the 'source' photo is?

In the editor itself, one can click on the image and handles will appear, click and drag a corner and it will keep the aspect ratio.  However, you can also use CSS max width to set a limit on the width of the image after the user posts the content.  Any image below the max width setting will stay the same and images larger will be reduced down, keeping the aspect ratio, to the max width size.

One could also edit the image tag that TinyMCE uses to set the max width statement; you have to know how to edit TinyMCE elements for that method.

Are you referring to the CSS of the Forums for setting max height and width? The point is not to depend on the user's having to do anything except upload/insert.

I want this to be handled automatically.

I had a similar issue and worked with Abservetech to make any inputted html responsive to the box.  I don't know what they did exactly, but their solution worked great and was priced very reasonably.  

So, in case you don't find the answer in the forums, at least you have a contact to reach out to.

Yes, change the CSS for the forum content box; use firebug or similar to see what class or ID is controlling the display, then use CSS max width to control the image size. http://www.w3schools.com/cssref/pr_dim_max-width.asp

 Start be telling us exactly where the problem is occurring...forum...blogs... comments...?  Either that, or post a url.  It's happened in several places that have already been fixed. The solution is simple, but must know the details. 

The place I am most worried about is the Forums. Although I run PKforums, they are now using some of the default Boonex features such as TinyMCE, MoxieManager, etc.

From looking at their demo, my best guess would be adding this to the modules css file:  Since I don't own PKforum, I can't say where the file is located

.pkforum-the-post img {
    max-width:100%;
    height:auto;
}

HL - I'm assuming I would need to change the 100% and auto to whatever values I want correct? Leaving them at this will keep the image their original size correct?

.pkforum-the-post img {
    max-width:100%;
    height:auto;
}

 Thats already added, i will need to take a look at this site.

Edit: @Zarcon, appears fine to me.

 Are you asking me if css on your site will alter the image size on someone else's server?

Of course not. That would be impossible. 

My question was revolved around leaving the H & W to auto/100%. Example: If I am inserting an image in the forum by using a URL linked to that image located at another website, MY site would show the image in it's original size using those settings (auto/100%), correct?

What I want is for the image to be displayed in the forum with a specified max H & W. Using the example above, if I link an image from somestupidwebsite.com that happens to 2000X2000  or THEIR site, I want it to display no bigger than 800X600 on my site in the forum.

W:100% & Height:auto limits the displayed width to the full available width of the container in which it is located. 50% = half the width of the container.  I'd stick with percentages if I were you, because they resize with the browser.

Unfortunately that isn't working. Not sure what I am doing wrong. The change was made to topic.css but it still screws up the layout whenever I click the insert/edit picture in the TinyMCE (forum) and paste this URL

http://www.planwallpaper.com/static/images/2022725-wallpaper_625864.jpg

added:

.pkforum-the-post img {
    max-width:100%;
    height:auto;
}

I'm out of suggestions... unless you want to hold a seance and see what mydatery would do.

HAHA. I finally figured it out. The problem was I had to change height to 'max-height'

We're good now.

Actually, I may have jumped the gun here a bit. I did get it to work properly by adding the above code to where these large images get 'set' to what I specified however..

I ran into other issues like, these images that were inserted are not responsive and makes my emoticons really large. Strange.. I give up for now.