How to set the padding of MOSIMAGE based on right or left align-hack

[kidkie]

Ever been annoyed by the fact that your MOSIMAGE pictures get their padding globally? I was. When I publish my news with pictures, I want to mix between right and left aligned pictures to give my page a dynamic feeling. However, as the padding is set globally by default, right aligned pictures will be affected by the left padding setting and vice versa. There's also some shift due to the Joomla default hspace setting.

So, I did some core modifications to be able to choose between all left- and right alignment with my choice of spacing to floating text.

First make sure there's no reference to padding in your Template Stylesheet! ( img { or .mosimage { )

Then locate line 179 in /yourwebsitepathway/mambots/content/mosimage.php and change

From

Code: Select all

$image .=' hspace="6" alt="'. $attrib[2] .'" title="'. $attrib[2] .'" border="'. $border .'" />';

To

Code: Select all

$image .=' hspace="0" alt="'. $attrib[2] .'" title="'. $attrib[2] .'" border="'. $border .'" />';

All I did here was to remove the Joomla default horizontal setting.


And then splitting the IF case on line 169 (still in /yourwebsitepathway/mambots/content/mosimage.php)

From

Code: Select all

// assemble the <image> tag
$image = '<img src="'. $mosConfig_live_site .'/images/stories/'. $attrib[0] .'"'. $size;
// no aligment variable - if caption detected
if ( !$attrib[4] ) {
  if ($attrib[1] == 'left' OR $attrib[1] == 'right') {
    $image .= ' style="float: '. $attrib[1] .';"';
  } else {
    $image .= $attrib[1] ? ' align="middle"' : '';
  }
}

To

Code: Select all

// assemble the <image> tag
$image = '<img src="'. $mosConfig_live_site .'/images/stories/'. $attrib[0] .'"'. $size;
// no aligment variable - if caption detected
if ( !$attrib[4] ) {
  if ($attrib[1] == 'left') {
    $image .= ' style="float: '. $attrib[1] .'; margin-left: 0px; margin-right: 7px;"';

  } else if ($attrib[1] == 'right') {
    $image .= ' style="float: '. $attrib[1] .'; margin-left: 7px; margin-right: 0px;"';
                    
  } else {
    $image .= $attrib[1] ? ' align="middle"' : '';
  }
}

I split the IF case so that it gives separate settings for left and right aligned pictures... Left aligned get's one margin, and right aligned get's one. If you need more padding, just set the # of pixels to whatever you prefer...

[kidkie]

I've extended the hack to include padding on images with caption. Will post the solution asap.