Written by Dans les anciennes versions d’Internet Explorer (IE6, IE7) l’affichage de vignettes centrées, sur des sites RTL (Right to Left pour les sites en arabe par exemple) pouvait poser des problèmes. Les anciennes versions d’Internet Exploreur ne peuvent pas utiliser le code 50% 50% pour centrer les étiquettes, donc le code doit être optimisé.
RTL et affichage de vignettes (Thumbnails) RTL et l’affichage de vignettes , ce qu’il faut modifier dans le composant Phoca Gallery de Joomla!.
Dans les anciennes versions d’Internet Explorer (IE6, IE7) l’affichage de vignettes centrées, sur des sites RTL (Right to Left pour les sites en arabe par exemple) pouvait poser des problèmes. Les anciennes versions d’Internet Exploreur ne peuvent pas utiliser le code 50% 50% pour centrer les étiquettes, donc le code doit être optimisé.
Pour cela, vous allez devoir faire quelques modifications sur certains fichiers :
1. Ouvrez le fichier : components/com_phocagallery/views/category/view.html.php
et trouvez le code
$imageBgCSSIE = ‘background: url(\ ».JURI::base(true).’/components/com_phocagallery/assets/images/’.$tmpl[‘displayimageshadow’].’.’.$tmpl[‘formaticon’].’\’) ‘.$w.’px ‘.$h.’px no-repeat;’;
et remplacez-le par
$imageBgCSSIE = ‘background: url(\ ».JURI::base(true).’/components/com_phocagallery/assets/images/’.$tmpl[‘displayimageshadow’].’.’.$tmpl[‘formaticon’].’\’) 100% ‘.$h.’px no-repeat;’;
2. Ouvrez le fichier : components/com_phocagallery/assets/phocagalleryieall.css
Trouvez le code
.phocagallery-box-file-third {
position: relative;
top: -50%;
left:-50%;
padding-top:3px;
}
et remplacez-le par :
.phocagallery-box-file-third {
position: relative;
top: -50%;
left:0;
padding-top:3px;
padding-right:9px;
padding-left:1%;
}
Ce guide fonctionne avec les tailles standard de vignettes. Le paramètre Recadrage vignette (Composant – Phoca Gallery – Paramètres – Onglet Principal) doit être activé. Si vous utilisez d’autres tailles de vignettes, vous devrez changer les attributs padding-right et padding-left.
Si vous utilisez plusieurs langues sur votre site (avec p.e. le composant Joomfish ou le système propre à Joomla – version 2.5) vous devez changer un langage RTL (Right to Left) et un second langage LTR (Left to Right), en suivant les modifications suivantes.
1. Copiez en local (par FTP) le fichier : components/com_phocagallery/assets/phocagalleryieall.css et renommez-le en phocagalleryieallrtl.css.
2. Trouvez le code suivant :
.phocagallery-box-file-third {
position: relative;
top: -50%;
left:-50%;
padding-top:3px;
}
et remplacez-le avec
.phocagallery-box-file-third {
position: relative;
top: -50%;
left:0;
padding-top:3px;
padding-right:9px;
padding-left:1%;
}
3. Renvoyez-le (FTP) dans le dossier components/com_phocagallery/assets/ de votre serveur.
4.Ouvrez le fichier components/com_phocagallery/views/category/view.html.php
Trouvez le 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]–> »);
et remplacez-le avec :
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]–> »);
}
Trouvez le code:
$imageBgCSSIE = ‘background: url(\ ».JURI::base(true).’/components/com_phocagallery/assets/images/’.$tmpl[‘displayimageshadow’].’.’.$tmpl[‘formaticon’].’\’) ‘.$w.’px ‘.$h.’px no-repeat;’;
et remplacez-le avec
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;’;
}
Maintenant, les images devraient êtres affichées correctement en RTL et en LTR également.
Si vous utilisez modal box comme fenêtre de détail et que votre modal box n’est pas centré, essayez d’ajouter le code suivant dans le fichier phocagalleryieallrtl.css :
* html #sbox-window,
#sbox-window
{
margin:30%;
}
Si vous rencontrez un problème d’images qui « saute » au passage de la souris, essayez de désactiver la classe CSS suivante :
phocagallery-box-file:hover
dans components/com_phocagallery/assets/phocagallery.css
Joomla! 3 Le Livre Pour Tous
Écrit pour toutes les personnes qui débutent avec Joomla!, ou qui possèdent déjà quelques connaissances avec les versions précédentes, et qui souhaitent construire et entretenir un site web sans avoir à entrer dans le code.
version numérique
{j2store}42||cart{/j2store}
version papier
{j2store}18||cart{/j2store}
Crédits photo
Image by Free-Photos from Pixabay