RTL - displaying thumbnails

In obsolete versions of Internet Explorer (IE6, IE7) there can be problem with displaying centered thumbnails if RTL language is used on the site. Obsolete versions of IE don't know using 50% 50% code for centering the thumbnails, so the code needs to be customized.

components/com_phocagallery/views/category/view.html.php:

Find the following code:

$imageBgCSSIE = 'background: url(\''.JURI::base(true).'/components/com_phocagallery/assets/images/'.$tmpl['displayimageshadow'].'.'.$tmpl['formaticon'].'\') '.$w.'px '.$h.'px no-repeat;';

and replace it with:

$imageBgCSSIE = 'background: url(\''.JURI::base(true).'/components/com_phocagallery/assets/images/'.$tmpl['displayimageshadow'].'.'.$tmpl['formaticon'].'\') 100% '.$h.'px no-repeat;';

components/com_phocagallery/assets/phocagalleryieall.css

Find the following code:

.phocagallery-box-file-third {

  position: relative; 

  top: -50%;

  left:-50%;

  padding-top:3px;

}

and replace it with:

.phocagallery-box-file-third {

  position: relative; 

  top: -50%;

  left:0;

  padding-top:3px;

  padding-right:9px;

  padding-left:1%;

  

}

This guide works with standard size of thumbnails and in case crop thumbnails parameter is enabled (crop thumbnails parameter is enabled as default and it causes creating the same size of all thumbnails). If you are using other thumbnail size, then you need to change padding-right and padding-left attributes.

If you are using more languages on your site (e.g. with help of Joom!fish component) and you have one language RTL (right to left) and second language LTR (left to right), you need to do following modifications. Copy (ftp) phocagalleryieall.css from:

components/com_phocagallery/assets/phocagalleryieall.css

to your PC. Rename it to phocagalleryieallrtl.css. Find the following code:

.phocagallery-box-file-third {

  position: relative; 

  top: -50%;

  left:-50%;

  padding-top:3px;

}

and replace it with:

.phocagallery-box-file-third {

  position: relative; 

  top: -50%;

  left:0;

  padding-top:3px;

  padding-right:9px;

  padding-left:1%;

  

}

Copy (ftp) this modified file (phocagalleryieallrtl.css) to:

components/com_phocagallery/assets/ folder (on your server)

Go to:

components/com_phocagallery/views/category/view.html.php:

Find the following code:

$document->addCustomTag("<!--[if lt IE 8 ]>\n<link rel=\"stylesheet\" href=\""

     .JURI::base(true)

     ."/components/com_phocagallery/assets/phocagalleryieallrtl.css\" type=\"text/css\" />\n<![endif]-->");

and replace it with:

if ($document->direction == 'ltr') {

    $document->addCustomTag("<!--[if lt IE 8 ]>\n<link rel=\"stylesheet\" href=\""

     .JURI::base(true)

     ."/components/com_phocagallery/assets/phocagalleryieall.css\" type=\"text/css\" />\n<![endif]-->");

} else {

     $document->addCustomTag("<!--[if lt IE 8 ]>\n<link rel=\"stylesheet\" href=\""

     .JURI::base(true)

     ."/components/com_phocagallery/assets/phocagalleryieallrtl.css\" type=\"text/css\" />\n<![endif]-->");

}

Find this code:

$imageBgCSSIE = 'background: url(\''.JURI::base(true).'/components/com_phocagallery/assets/images/'.$tmpl['displayimageshadow'].'.'.$tmpl['formaticon'].'\') '.$w.'px '.$h.'px no-repeat;';

and replace it with:

if ($document->direction == 'ltr') {

     $imageBgCSSIE = 'background: url(\''.JURI::base(true).'/components/com_phocagallery/assets/images/'.$tmpl['displayimageshadow'].'.'.$tmpl['formaticon'].'\') '.$w.'px '.$h.'px no-repeat;';

} else {

     $imageBgCSSIE = 'background: url(\''.JURI::base(true).'/components/com_phocagallery/assets/images/'.$tmpl['displayimageshadow'].'.'.$tmpl['formaticon'].'\') 100% '.$h.'px no-repeat;';

}

Now the images should be displayed correctly in RTL languages but in LTR languages too.

If you are using modal box as detail window and your modal box is not centered, try to add the following code into the phocagalleryieallrtl.css file:

* html #sbox-window,

#sbox-window

{

    margin:30%;

}

If you have problem with "jumping" images while mouse over, try to disable (comment) the following CSS class:

.phocagallery-box-file:hover

in components/com_phocagallery/assets/phocagallery.css

RTL - displaying thumbnails

Navigation