Recent Topics

1 Nov 20, 2010 15:56    

My b2evolution Version: 3.3.3

How can I limit the size of an image so that it stays within the post's main area?
If an image is 500 px wide, I'd like it to resize automatically to 380 px when published within a post that is 400 px wide...

2 Nov 20, 2010 20:14

You need to "attach" images, they won't be resized if you just insert image tags into posts.

3 Nov 20, 2010 23:18

I'm sorry, I don't get it. What would be to "attach" an image, do you mean to have a link to download the image?

I've seen some b2evolution skins that don't allow images to exceed the size of the posting area. The thing is I don't recall which skin does that.

4 Nov 21, 2010 01:23

It doesn't matter what skin you are using.
When you create a post note the "Images & Attachments" section below the text area. navigate to your uploaded images and use chain icon to link/attach images to your post.

5 Nov 21, 2010 17:28

As far as I know if you upload an image and then insert the code within the code doesn't normally reduce the size of the image, you would have to change the wide and height values manually.
What I want is the image size to be resized automatically so it doesn't exceed the size of the post area.
I know it can be done because I've seen it, but I just don't remember where or how.

6 Nov 21, 2010 17:41

.bPost img{
max-width:300px;
}

Will work in most modern browsers

.bPost{
overflow:hidden;
}

will stop image being wider than post by cutting it off

¥

7 Nov 21, 2010 17:57

Thanks ¥åßßå!

That's what I was looking for.

8 Nov 21, 2010 18:17

if the image height is specified, where b2evolution does for inserted images, only the image width will be resized, and the image will be distorted. to fix that make it

.bPost img{
max-width:300px;
height: auto;
}

10 Nov 21, 2010 19:49

As far as I know if you upload an image and then insert the code within the code doesn't normally reduce the size of the image

That's exactly what I told you. You need to [u]link[/u] an image [u]instead of inserting[/u] the code.

11 Nov 22, 2010 03:25

Thanks ¥åßßå! Thanks tilqicom! and Thanks to sam2kb too.

Just to make it easy for others, the CSS elements have to be added/changed in the Skin's stylesheet page, usually the main posting area is referred as #bPost, but some skins call it differently (e.g. #content)

12 Nov 22, 2010 20:06

demo wrote:

<div lang="en-US" class="post bPost_ptyp1 bPostpublished" id="item_30">

Bugger, looks like .bPost is now .post :-S ... been ages since I played in templates. good catch ;)

¥


Form is loading...