Switched Keys

Many years ago I started using b2evolution for my blog even though it was not the most popular platform. I'm still using it. Although it is complex, it gives me options that don't exist in other platforms. Now that it has expanded to include other types of collections (photo blogs, manuals, etc), it is even more complex. Unfortunately, the image insertion routines in b2evolution are quite inflexible, and I suspect that is one reason it will never be very popular.

The guide says you should attach the image where you want it, but it doesn't include the file in the page markup and instead includes a tag that identifies the image. The logic presented in the on-line forums is that you can adjust the stylesheet and php to apply uniformly to all images. You can put the image in different sections (teaser, cover, in-line) of the post and it supposedly is more efficient that way.

The Issue

Although you have multiple options for placement (vertically) in a post, if it's an in-line image you can't see it in the editor. Instead you see . Additionally you can't modify the formatting of the image. That's where the problems resides. If b2evolution included the code in-line (like it used to) I could modify the HTML/CSS to format the image. 

Emulating a print publication, I like to wrap text around some images, and like adjusting the size to make it look more balanced. Well, there is a way to include the markup, but it's not intuitive.

The Work Around

I've discovered after inserting all my images that there is a viable workaround to get the code into the post, something that used to be an option in the editor in past versions.

1. Go to the b2e Back-office and select Files > Browse and upload the images for the post. I prefer to put them in the root collection folder, not the quick-uploads.

2. From the post, attach any image to the post (ideally an inline). The easiest way is to select Attach existing files and select one. You won't be including that in the post, but you will be using that image to get to other files you would like to insert. If an image tag is inserted into the post you can delete it if you want. 

3. Position your cursor at the point in your post where you want to include one of your uploaded images.

4. Go to the attached image in the Images and Attachments section and click on the Locate file icon (bull's eye).

 

5. When the Attach files dialog box is displayed find the file you really want. You may have to change folders to find it. Again, I prefer to use images in the root collection folder.

6. Check the box for the file to select it. Don't press Attach. 

7. Finally, at the bottom, with selected files: change the option to Insert IMG/link into post and press Go.

Formatting Images 

The main reason I want the code in the post is so I can customize the image. In order to do that switch to Markup view and find the image's code. It'll begin with something like

<div class="image_block"><a href="..">

Two of the modifications that I generally make are to position the image and resize the image to look good in the post. By positioning, I generally float it left or right.

Floating Images

In markup, find the image markup as noted above and change the div to add

style="float:right"

so it looks like this

<div class="image_block" style="float:right"><a href="..">

If you are floating, it might also be necessary to adjust the margins by changing it to 

style="float:right; margin-left:20px"

Resizing

The image should show the actual size in the img tag and would look something like this.

width="431" height="56" />

If the size is not appropriate for the post, I simply change the width to a percentage and drop the height so it would look something like this

width="35" />

I have used b2evolution for many years, and find it useful for multiple blogs, but I guess these kinds of challenges are one reason it is not so popular as a blogging platform.