Page 1 of 2
How to remove image border
Posted: Sat Jan 30, 2010 1:08 pm
by 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!
Re: How to remove image border
Posted: Sat Jan 30, 2010 9:10 pm
by yellowled
Erm ... I don't see a border around those images in your blog, so I'm guessing you fixed it yourself?
YL
Re: How to remove image border
Posted: Sat Jan 30, 2010 10:07 pm
by 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...
Re: How to remove image border
Posted: Sun Jan 31, 2010 11:20 am
by yellowled
schimanke wrote: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
Re: How to remove image border
Posted: Mon Feb 01, 2010 7:59 pm
by 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?
Re: How to remove image border
Posted: Mon Feb 01, 2010 8:11 pm
by yellowled
schimanke wrote:Is it really the line that you quoted that causes the error?
Yes.
schimanke wrote: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".
schimanke wrote: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
Re: How to remove image border
Posted: Mon Feb 01, 2010 8:59 pm
by 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?
Re: How to remove image border
Posted: Tue Feb 02, 2010 11:40 am
by yellowled
schimanke wrote: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
Re: How to remove image border
Posted: Tue Feb 02, 2010 1:44 pm
by 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...
Re: How to remove image border
Posted: Tue Feb 02, 2010 3:04 pm
by yellowled
schimanke wrote:Well it used to be there before the update.
Software changes, you know.
schimanke wrote: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?
schimanke wrote: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
Re: How to remove image border
Posted: Tue Feb 02, 2010 4:02 pm
by Don Chambers
yellowled wrote:[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.
Re: How to remove image border
Posted: Tue Feb 02, 2010 5:43 pm
by 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...
Re: How to remove image border
Posted: Tue Feb 02, 2010 7:03 pm
by 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
Re: How to remove image border
Posted: Tue Feb 02, 2010 7:32 pm
by 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?
Re: How to remove image border
Posted: Tue Feb 02, 2010 8:01 pm
by garvinhicking
Hi!
This will only affect new blog postings, and you need to refresh your browsers cache...
Regards,
Garvin