How to remove image border

[schimanke]

Hi there,

I recently updated to s9y 1.5.2 and am facing a little problem now. All my blog posts start with a small image indicating what the article is about. Before the update these images had no border and some padding around them. For this I used the image selector, selected the proper image and chose "Preview". When I do exactly the same now in s9y 1.5.2 there is always a border around the image which I don't really like. When I observed the used code, I found out that in the old version the image was inserted like this:

Code: Select all

<img width="110" height="110" style="float: left; border: 0px none; padding-left: 5px; padding-right: 5px;" class="serendipity_image_left" src="/uploads/technik/Apple/Apps/appstoreperlen.serendipityThumb.jpg" />

Now in s9y 1.5.2 the code looks like this:

Code: Select all

<img width="110" height="110" src="/uploads/technik/Apple/Apps/appstoreperlen.serendipityThumb.jpg" class="serendipity_image_left" />

Where and how can I change that back to the old behavior? Thanks in advance!

[yellowled]

Erm ... I don't see a border around those images in your blog, so I'm guessing you fixed it yourself?

YL

[schimanke]

Not really, I modified the code after I selected the image. But I'd like to have this done by default. Just like it was before the update...

[yellowled]

Not really, I modified the code after I selected the image. But I'd like to have this done by default. Just like it was before the update...

Well, you should've left it the way it was so somebody could actually have a look at it and figure our the source of error

Your template has

Code: Select all

#content img {padding: 0; margin-bottom:3px; border: 1px solid #ddd;}

That's the line causing the border. If you didn't have this line before, you probably used the class .serendipity_entryIcon for these images, since your template also has:

Code: Select all

#content img.emoticon, #content img.serendipity_entryIcon {border:none;}
#content img.serendipity_entryIcon {float:right;}

But actually, that's just guesswork.

YL

[schimanke]

Well, you should've left it the way it was so somebody could actually have a look at it and figure our the source of error

Okay, I thought posting the code was enough to find the error...

Now there is one post (the very first one) which actually shows the error. Is it really the line that you quoted that causes the error? I thought it must occur earlier, i.e. when I write the post and pick the image from my library. When this is done and I switch from the WYSIWYG editor to HTML, there is already this part missing which was there before:

Code: Select all

style="float: left; border: 0px none; padding-left: 5px; padding-right: 5px;"

I have no idea where to change this back since I did not change my template. What was updated during the update was the folder templates/default. Is it something in there?

[yellowled]

Is it really the line that you quoted that causes the error?

Yes.

When this is done and I switch from the WYSIWYG editor to HTML, there is already this part missing which was there before:

Code: Select all

style="float: left; border: 0px none; padding-left: 5px; padding-right: 5px;"

Yes, but this is not causing the gray border. These are "default" styles to make sure an image which you want to be floated left is actually floated left, no matter whether your template contains the appropriate styles. You could remove all but "float: left;" manually, but it wouldn't make a difference. The style I quoted is in your template's CSS, in a part commented "Content styles".

I have no idea where to change this back since I did not change my template. What was updated during the update was the folder templates/default. Is it something in there?

It's much more likely that the style has always been in your template but was overwritten by another style before.

YL

[schimanke]

Okay, you were right. This really causes the grey border around the images and I removed it.

Anyway is there any way that I could get this

Code: Select all

style="float: left; border: 0px none; padding-left: 5px; padding-right: 5px;"

thing back in my code by default? Where is this created?

[yellowled]

Anyway is there any way that I could get this

Code: Select all

style="float: left; border: 0px none; padding-left: 5px; padding-right: 5px;"

thing back in my code by default? Where is this created?

Erm ... this is in your code (which it shouldn't be). Are you entering this manually for every image? Or are you just wondering why it isn't in the HTML code when you switch to the HTML editor in the backend?

Thing is, styles like these (inline styles) are bad™, since they make it much harder to style via a template (you have to overwrite these, which is possible, but tricky). Therefore, they have been removed from the code generated by the media db and are now being "drawn" from /templates/default/style_fallback.css (so they are still present if your template does not explicitly define them).

This should work with any template, even if you modified it. And you shouldn't even have to add the inline styles manually (if you do), the images should look just fine without them.

YL

[schimanke]

Well it used to be there before the update. Since then I have to enter this part manually. Bottom line is that with the modifications you suggested above, it works fine on the website, i.e. in a browser. But I also have an iPhone app which uses the rss feed. And in there the text is not floating properly around the image. It starts at the bottom of the image instead of the top of it, which it does with the mentioned line inside the code. So even if it is "bad", how can I get it back in there by default. It was in there before the update, so I guess there must be a way to get it in after it as well...

[yellowled]

Well it used to be there before the update.

Software changes, you know.

But I also have an iPhone app which uses the rss feed. And in there the text is not floating properly around the image.

Are you sure images were floated in the RSS feed before? Because I don't think so. Anyway, I have no idea what to do about this. (Other than my personal opinion which says RSS feeds should not be styled at all anyway. Just my 2 cents.)

Garvin?

So even if it is "bad", how can I get it back in there by default. It was in there before the update, so I guess there must be a way to get it in after it as well...

No. It has been changed in the s9y core, so there is no way of inserting it automagically unless you want to patch your s9y installation, I think. But this really is something Garvin should chime in on.

YL

[Don Chambers]

[Are you sure images were floated in the RSS feed before? Because I don't think so. Anyway, I have no idea what to do about this. (Other than my personal opinion which says RSS feeds should not be styled at all anyway. Just my 2 cents.)

I don't think so either. HTML is escaped from all rss output. I have, however, seen a few broswers that will apply their own styling to rss output. Opera, as an example, does a nice job of floating images within rss output. I cannot speak personally for the iPhone - I do not have one.

[schimanke]

Okay, here are two screenshots from the output in my iPhone app.



On the left hand side you can see how it looks after the update, i.e. without the mentioned code. On the right hand side you can see how it was before. I have added the code manually to the post. Weird...

Bottom line is that I can add the code manually each time I create an entry. But I really guess there has to be a way to roll back to the old way...

[garvinhicking]

Hi!

Actually there is an easy way to resort to the "good old days".

Inside serendipity_editor.js you can fidn a line:

Code: Select all

 styled = false; // Templates now do this.

change that back to "styled = true" and you'll get the inline styling added back.

I do think this RSS-Feed thing actually is an issue. It should look as intended in the feeds as well, so we somehow will need to get the CSS styling into the RSS feed. I've never addressed this, does anyone know what it takes, and if it even works?

Regards,
Garvin

[schimanke]

Thanks for your input Garvin.

Unfortunately this doesn't have any effect. Is there anything else I need to change in order to get my "old code" back?

[garvinhicking]

Hi!

This will only affect new blog postings, and you need to refresh your browsers cache...

Regards,
Garvin