Pre-Content and inserting images

[user1234]

Hi,

I have two questions...

1. Can someone explain pre-content for me? What is it good for, how can it be styled, what do people actually do with it, samples for that?

2. I have trouble posting centralized images with the normal media manager. There's this first setting which is supposed to insert an image aligned center, but it doesn't, instead it gets the same direction that the text gets and refuses to be styled by css. Even styling it using the concrete HTML insert code doesn't change things (theme Bulletproof).

Cheers,

Dachs

[onli]

To 1: You mean the <pre>-tag?

[Don Chambers]

1. This is for static pages. It is really nothing more than a block that comes before the main content. I have never really found much value in it.... especially in the more recent versions of the static page plugin that lets designers create custom static pages. One use where it might be valuable is where you display a list of child static pages. That list appears before static page main content, so if you wanted text before the list of child static pages, pre-content would be the way to do it.

2. What version of bulletproof? Inserting images via the media manager will insert them as class="serendipity_image_center". Unfortunately, the default styles really didn't style that as truly centered. BP does style it as centered if the image also contains a comment.

I seem to recall Yellowled modifying those styles at some point in time so that it would properly center. Or was that something else YL?

To center an image that does not have a comment might be a bit tricky... It works with comments because the image and its comment are contained by a div set to the same width as the image.

You could manually use the same technique by placing the media library inserted code within this, where Xpx is the width in pixels of your image.

Code: Select all

<p style="width: Xpx"; margin: 0 auto">[MEDIA LIBRARY CODE HERE]</p>

Personally, I never really want an image existing by itself, or if I do, it is usually wide enough to occupy the full content width.

Will have to give this some further thought...

[yellowled]

I seem to recall Yellowled modifying those styles at some point in time so that it would properly center. Or was that something else YL?

I did actually suggest a whole new code model, but we never got around to implementing it, mainly because it would have needed extensive testing (you know, backwards compatibility and stuff), and as usual, we didn't have the manpower to do that the way we would have liked to and would have had to do it, so we postponed it until we forgot about it.

Jeez. Feelin' a little dizzy all of a sudden.

YL

[yellowled]

To center an image that does not have a comment might be a bit tricky...

Actually, it isn't -- if the image is a thumbnail. Just let it link to the bigger version of the image. Should work. If it doesn't, we need to revise the styles in BP, because it works in my own template that way

YL

[Don Chambers]

Well, its gotta work for thumbs and full size. I'll try to look at this ASAP, but feel free to beat me to it!!

[user1234]

Hi,

Personally, I never really want an image existing by itself, or if I do, it is usually wide enough to occupy the full content width.

ahemm...

In the kind of blogs I have been lately setting up for people it is a common and usual thing to every once in a while post a single photo which needs centering to look neat. And as we are talking here a fluid width template and by now people using a gazillion different screen resolutions, it would be truly nice to be able to hand a noob blog owner his blog and say "push button here - picture is inserted centered and has margin". And really, I can assure you, in 8 of 10 static pages and blog posts this will be needed. It also would NOT be necessary to always have a caption (do you mean this by comment?).

So how do we get there? I never thought this is such a problem, as most any whichever cms image manager does this kind of thing nowadays without a problem.

Cheers,

Dachs

[user1234]

Hi again,

come to think of it, ideally that centered (left/right) version with caption should stay, but a centered (left/right) version without caption should be added and completely submit to central CSS styling, so that it's truly a one-click or one-choice thing to add for the author of posts and pages.

It would add three more insertion choices, though

Cheers,

Dachs

[user1234]

Hi,

and more wishes yet ... sigh.

Something adds inline styling to the images, this should _not_ happen. What for write CSS and attribute a class to an image, if the software adds style all on its own, which can't be overridden by the CSS sheet?

I was fumbling for half an hour now to style a left thumbnail to have a border and line up nicely. First stumbling block - the class in the CSS sheet is ".serendipity_imageComment_left". The class it gets via the ImageManager is ".serendipity_image_left". Not just that, the manager adds some wild inline styling to the thumbnail, such as a left margin of 5px (what for that? What one wants is a left image which lines up vertically with the text) and a border=0 and another 5px on the right, stuff which should be styled via the CSS sheet. So how can I kill such automatic inline styling? It has to be a bug, que no?

Cheers,

Dachs

[yellowled]

This is kind of stunning. In fact, it's not that hard to center images w/out content in BP, but somehow we never added that code (which is not as thoroughly tested as Don "I'm gonna take 17 screenshots in various browsers and browser versions and compare them in Photoshop until they fit pixel-perfect" Chambers would test it).

The additional CSS code .serendipity_image_center needs is

Code: Select all

.serendipity_image_center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Add this to your user.css or COLORSET_style.css for the time being.

I'm sensing potential IE6 issues here, however, which is why it should be tested way more throroughly before actually adding it to BP (hint: double floated margin bug; might be the reason why we didn't add it back then).

Don, can you please use your bug-testing magic on this?

YL

[yellowled]

Something adds inline styling to the images, this should _not_ happen. What for write CSS and attribute a class to an image, if the software adds style all on its own, which can't be overridden by the CSS sheet?

As Don mentioned, I have actually built a replacement for the code inserted by the s9y media database to address these issues and introduce a new class of image formatting -- floated left, floated right, centered and "neither floated nor centered". And yes, these work with or w/out image comments. See http://yellowled.de/tmp/s9y-img/.

However, there's way more to think about before changing such a crucial part of a blog engine. It's needs to be tested thoroughly and checked for backwards compatibility. The image display in blogs using older templated might break if this code is changed. The s9y project has always been very aware of changed affecting older versions, which is a blessing in disguise sometimes, but also makes changes harder to implement.

So how can I kill such automatic inline styling?

You're just gonna have to override it using the CSS cascade, it's selectors and their specifity. It's not a piece of pie, it takes a lot of time and testing, but it can be done.

YL

[Don Chambers]

I think both Yellowled and I have both advocated the removal of the media manager inline styles.. the problem is that many templates would then have no styling for inserted images.

Why the code was written to insert padding in the same direction an image is floated is a mystery to me as well. You can always add/override this stuff in your stylesheet, or by using bulletproof's user.css override stylesheet:

Code: Select all

.serendipity_image_center {display:block; margin: 0 auto}
.serendipity_image_left {padding-left: 0!important}
.serendipity_image_right {padding-right: 0!important}

I can add these styles to bulletproof so it is corrected in the upcoming 1.5 release. Yellowled's approach is probably the better way to go, but as he pointed out, will probably take a bit more time to test. The styles above will be fine for now as they are only doing what was originally intended.

[yellowled]

I think both Yellowled and I have both advocated the removal of the media manager inline styles.. the problem is that many templates would then have no styling for inserted images.

Well, we could use /templates/default/style_fallback.css for that now that we have it, right? Garvin?

YL

[user1234]

Hi,

I'm getting a headache as we speak...

And as I am just about to set up all images for this here blog, I'd better have a solution I can stick to now, rather than in half a year.

How can I get the media manager to insert CSS-wise "raw" images, just having a class attached and the correct functions for popup etc. so that I can style them myself, no captions, no nothing else?

Cheers,

Dachs

[user1234]

Hi again,

and I am somewhat puzzled. Why would a change to the now media manager not be backwards compatible?

If I grasp this correctly the relevant code already WAS inserted into the entries. Thus nothing short of deleting them could change that code. If you delete them, you'd then have to put them in again using the mediamanager, and then you could use the new styles. Nothing says you couldn't name the new classes differently (e.g. serendipity_image_center2), so the old classes can stay in the stylesheet for people having used the old media manager.

Or am I missing something here

Cheers,

Dachs