How to add spacing to each img ?

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
Chief
Regular
Posts: 69
Joined: Sun Jul 23, 2006 3:08 am

How to add spacing to each img ?

Post 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 !
steven
Regular
Posts: 57
Joined: Tue Jul 18, 2006 12:07 pm
Location: North Carolina USA
Contact:

Use HTML/CSS

Post 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)
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: How to add spacing to each img ?

Post 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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
Chief
Regular
Posts: 69
Joined: Sun Jul 23, 2006 3:08 am

Post 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 ...
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post 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.
Judebert
---
Website | Wishlist | PayPal
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post 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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
Post Reply