Wordpress Themes - WP Forum at BFA - Borders around images

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)

- - Borders around images (http://forum.bytesforall.com/showthread.php?t=372)

Borders around images

Hello,

I like the borders around images that I've put into several (static) pages. Seems to me as good old fashioned paper pictures.

I noticed that at least with jpg files this border reduces the width and height: Firefox properties of a picture show for example: "size: 400px x 266px (scaled to 394px x 262px)". Another example: "300px x 199px (scaled to 298px x 197px)". With another picture (GIF file) there is no "scaled to..." hint.

Where does this scaling come from? Is it because of the borders? If yes: Is it possible to add the borders around the picture so that the whole pixel size is a bit larger (e. g. 406px x 270px)?

My problem with scaling is that I fear it reduces image quality and it costs time.

Can anybody help me?

Best regards,
upscho

That's probably caused by the img max-width in style.css round line 1420

HTML Code:

.post img.size-full {

        /*max-width: 100% auto;*/

        max-width: 96%;

change to 100% or delete it, or put it into /* ... */

I'd like to ask one thing about borders around images. I too like to use these 90% of the time. But there are some times where I'm using a floating image or one with a drop shadow shot on a white background. In those cases it would be good to "turn off" the border, only for a single post.

So, can I disable or override the default of a border around an image on a post or image basis?

I use "ecto" to post to my WP blog.

You can add an inline style to an image which will override CSS from the header or external files

After you added the image, add, in HTML mode

HTML Code:

<img style="border: 0;" class="......

You would just add the style="...." part. You can add more than just one property:value pair

HTML Code:

<img style="border: 0; padding: 0; margin: 10px 20px;" class="......

Hi Flynn,

I commented out the line with 96 % and removed the comment for the line with "100% auto;" (so it became active) and it works perfectly for me! :) Thank you very much.

Best regards,
upscho

Quote:

Originally Posted by Flynn (Post 1431)

You can add an inline style to an image which will override CSS from the header or external files

After you added the image, add, in HTML mode

HTML Code:

<img style="border: 0;" class="......

You would just add the style="...." part. You can add more than just one property:value pair

HTML Code:

<img style="border: 0; padding: 0; margin: 10px 20px;" class="......

Okay Flynn, I think I got you but let me run this by you. Since I use Ecto to post to the WP blog, my IMG tag for the thumbnail looks like this:

Quote:

So then should I simply add the "border: within this tag such as this:

Quote:

Or do I just add the entire tag as you've noted here like this:

Quote:

You already have an empty style="" at the end of your image tag, use that one

HTML Code:

<img src="http://blog.digitaltavern.com/wp-content/uploads/2009/02/photosp900-tm.jpg" 

width="220" height="284" alt="p900.jpg" name="photosp900-tm.jpg" style="border: 0;" />

Doesn't matter whether it is at the beginning or the end or in between other img properties such as src/width/height etc...

Hey Flynn or anyone else that knows these things. I've tried to drop the border which is defaulted on my website to no border with this code:

Code:

http://blog.digitaltavern.com/wp-content/uploads/2009/02/photos200902161815-tm.jpg" width="100" height="76" alt="200902161815.jpg" style="float:left;border:0;"

But the post still seems to ignore my "0" border and places a border around the image as in this post

Wacky, but the behaviour in Safari is still a border.

thanks

That's a background-color and padding what you're still seeing. Just setting the padding to 0 should suffice

HTML Code:

padding: 0;

okay Flynn. I must be a bit brain dead... but thanks for the look and clarity!

Done!