Page 1 of 1

How to add spacing to each img ?

Posted: Tue Aug 08, 2006 4:58 am
by Chief
H All, I like to add an horizontal 20 and vertical 20 and alternate description on each image posted into the blog like my exemple :

No Spacing
Image


With Spacing 20
Image


With Alt text under the pics
Image

I use Agregator with BSD Onyx .

Also its possible to add comments by default for the agregator user ? I allways have to edit the post to authorize comments.

In the user when I edit like my exemple CANOË authorize comments in post is checked.

Thx Again !

Use HTML/CSS

Posted: Tue Aug 08, 2006 7:11 am
by steven
in the CSS

Code: Select all

img{
     hspace: 20px;
     vspace: 20px;
     }
The alt text is for non-graphic browsers to tell them what they would see. It doesn't work the way you show.

You need a caption class which can be handled with css in your entry using HTML. (I assume as I've never used a picture in my short blog life)

Re: How to add spacing to each img ?

Posted: Tue Aug 08, 2006 11:17 am
by garvinhicking
Hi!

To patch the aggregator to allow comments, you must edit the serendpity_event_aggregator.php file.

Search for:

Code: Select all

'allow_comments' => 'false',
and change it to

Code: Select all

'allow_comments' => 'true',
HTH,
Garvin

Posted: Tue Aug 08, 2006 6:07 pm
by Chief
Here is the code in the rss feed I want to display in front page with the image I want to add spacing 20

Code: Select all

<pubDate>Tue, 08 Aug 2006 11:15:14 EST</pubDate> 
  <guid isPermaLink="true">http://www2.canoe.com/artsetculture/actualites/general/archives/2006/08/20060808-111514.html</guid> 
  <category>Aujourd`hui</category> 
  </item>
- <item>
  <title>Internet · MySpace choisit le système de Google</title> 
  <link>http://www2.canoe.com/techno/nouvelles/archives/2006/08/20060808-111443.html</link> 
- <description>
- <![CDATA[  Fox a annoncé lundi avoir signé un contrat pluriannuel pour utiliser le système de recherche et de publicité de Google.  (Canoë) 
  ]]> 
  </description>
- <content:encoded>
- <![CDATA[ 
 <p>
<a href="http://www2.canoe.com/techno/nouvelles/archives/2006/08/20060808-111443.html"><img src="http://www2.canoe.com/techno/nouvelles/archives/media/2006/08/20060808-111443-d-p.jpg" border="1" alt="" height="48" width="66" align="left" /></a> Fox a annoncé lundi avoir signé un contrat pluriannuel pour utiliser le système de recherche et de publicité de Google.<br /><font size="-1" color="#87000E">Canoë</font>
</p> 

  ]]> 
I have added this code in my .css but its not add the space on the img

Code: Select all

img{ 
     hspace: 20px; 
     vspace: 20px; 
     }

Note : I want the space only into the rss news display in center of my frontpage. ( I have added Padding and its work but its destroy all my layout ) :wink:


For the css tweak to include my alt text in lower pics its possible ?

Oh! I want also add a target="_blank" automaticly when I have an image as hyperlink into the rss news.

Thx for the help ...

Posted: Tue Aug 08, 2006 10:08 pm
by judebert
It probably messed up the rest of your layout because *all* images got the padding. Ugly. To select just feed images, you'll need to select only the images inside a feed, and that means a div with a class or ID specifically for each feed.

I don't use the aggregator plugin, so I don't know if it wraps its output in a div. You can use your browser's View Source button to check for yourself.

Someone else mentioned earlier that alt text doesn't work that way, and he's right. However, the plugin could be hacked to parse some field and add that under the image. Since the plugin uses an XML parser and takes the body as a single entity, it seems like it could be difficult to get the alt field for each image.

Posted: Wed Aug 09, 2006 11:02 am
by garvinhicking
Hi!

Uhm, RSS Feeds do not get CSS applied when they are being viewed in an RSS application. You would need to add "style='padding: 10px'" manually to each <img> link in the entry!

You could also write an automatic plugin that adds this on all images, but this is a rather complex task. Same applies to "target='blank'". You would need to create your own markup or regular expression to accommodate that.

Best regards,
Garvin