Attn: Matthew - how to fix chopped off images in this forum

[Zauron]

I ran into the same problem on my own phpBB custom theme for my Volgarr the Viking Beta Test forum. I've seen many threads on these boards where someone embeds an image and then complains about it chopping off the right side of the image.

Its mostly because this theme is using a fixed width, but that doesn't mean the image has to get cut off - it could instead be shrunk to fit within the designated space. A superior solution, in my opinion, to chopping it off.

To fix this, I went into the forum/styles/<mytheme>/theme folder and edited content.css (if you don't have a bunch of .css files in there then it will just be in stylesheet.css).

Find the section that talks about postbody styles, which for example in my theme looked like this:

Code: Select all

/* Post body styles
----------------------------------------*/
.postbody {
   padding: 0;
   line-height: 1.48em;
   color: #333333;
   width: 76%;
   float: left;
   clear: both;
}


Add a new style for images that uses max-width: 100%, which in my case made it now look like this:

Code: Select all

/* Post body styles
----------------------------------------*/
.postbody {
   padding: 0;
   line-height: 1.48em;
   color: #333333;
   width: 76%;
   float: left;
   clear: both;
}

.postbody img {
   border: none;
   max-width: 100%;
}


Upload that version and refresh a thread where the images are being chopped off, and it will make images not be cut off any more, but shrunk to fit instead.

[Matthew]

Good suggestion, but maybe I'm missing something because it didn't work. My web development experience is definitely lacking.

[Zauron]

Are you certain it didn't work? Did you leave the change in there? For some reason when I did it a few times I had to upload the file again and refresh again to make sure the change actually "stick". Figured that was just a quirk with my web server though.

Anyway there is another method if that one doesn't work, its similar though. In the same place find common.css and open that up (I actually open these things in Visual Studio heh, it has a nice css editor). There may be a default img tag already in there, like this:

Code: Select all

p {
   line-height: 1.3em;
   font-size: 1.1em;
   margin-bottom: 1.5em;
}

img {
   border-width: 0;
}


If so you just have to add that max-width line - if not you can add the entire img tag here. The p {} tag will likely be different than mine, I just included that for a placement reference, though frankly you can put it anywhere in the file, doesn't really matter as far as I can tell.

Anyway modify the file so it ends up looking more like this:

Code: Select all

p {
   line-height: 1.3em;
   font-size: 1.1em;
   margin-bottom: 1.5em;
}

img {
   max-width: 100%;
   border-width: 0;
}


and re-upload that.

I'm not good at web development either man, that's why I used something like phpBB, I just did some research when this problem popped up to figure out a way around it. I frankly don't understand exactly how css files work I just know these solutions worked for me. To give the users some choice I actually included several styles on my board and almost all of them had this problem so I had to fix it in 4 different themes. I don't know why its not a default for these themes, who would want images chopped off instead of just shrunk anyway?

[Zauron]

Actually I have a better idea, I'm going to try installing the base theme you used (I'm guessing its IDLaunch_BLack?) and see if I can fix it using that same theme on my board and then I'll tell you exactly what I did

[Zauron]

Okay I installed IDLaunch_Black on my board (it appears all of the IDLaunch themes use the same css setup so this should work even if you didn't use that specific one - but if you used a different IDLaunch one let me know and I'll double-check it to not waste your time).

If you are worried about it you may want to quickly backup your content.css file first, but assuming you didn't directly modify the .css files themselves when customizing the theme, you should be able to just overwrite the one you have now with this one to fix the problem:

replacementcss.zip

If you did modify the css files from the base theme, if you'd like you could zip up your css files and pass them over, and I can apply the fix, test the fix on my own board to make sure nothing broke, and pass them back to you.

Sorry if I'm being a pest, I'm really just trying to help you out because I appreciate how quickly you were able to patch the game to work again on my netbook the other day .

[Matthew]

That's identical to the one that's already on my server now

[Matthew]

Sorry, I should have elaborated more in that last post. I'm still busy making sure other people get the same help you said you received

I tried both of your suggestions in both of the .css files and I still don't see an improvement. Is there something I need to do to force the theme to reload the .css files? Are they cached on the server as well as locally? It's been a long time since I've set this up and dealt with it so I don't really remember how it all worked.

Thank you for trying to help. It's very much appreciated.

[Zauron]

Hmm, nope, assuming you uploaded it to the correct theme's folder, it really ought to be working at this point. I can see by inspecting the page via chrome that its pulling an img tag from a css that does not include the width=100% line, so it seems like its just ignoring the changes. No idea why (as mentioned before, this isn't really my ball of wax either heh). Maybe if the changes are left in there it will somehow sync with them later? Or maybe there's some other css file that's overriding the ones in that folder somehow from other changes that were made? I'm not exactly sure how it determines which css files take precedence. This stuff gives me a headache...

Oh well, can't say we didn't try. At least people CAN still view the full images by just right-clicking on it and telling it to open in a new tab.

Sorry to waste your time with something trivial like this when obviously there's much more important things for you to work on, I thought it would be a quick fix .

[Darkfrost]

In the admin control panel, go to styles > templates, then select templates on the left, and click refresh on the theme you use. Should flush the cache of it. Might help :p

[tswaters]

Hi guys, trusty web developer here.

I'm not sure if any of these styles have been applied, but looking at the board they don't appear to be. The first one in this post, if applied, would not work. I applied it with FireBug and it seemed to not do the trick.

I'm not very familiar with phpBB and how it works -- but I do know how CSS works. You can add the following rule to make the attachment boxes not go over the width of a post :

Code: Select all

dl.attachbox { max-width:100%; }

you can also throw in --

Code: Select all

dl.attachbox img { max-width:100%; }

To make images within the attachbox scale down. there will, however, still be some scrollbars without it ...

Without the last rule, there will be a scrollbox if images go over the width of the post container.

I'm not sure if that will work at all in IE ... max-width on images in IE is a little tricky if I recall correctly.