Objet : visiImg.php
Version du 20/03/2018
Dépendance PHP : SimpleImage.class.php ( https://gist.github.com/miguelxt/908143 )
Facilités pour plugin javaScript :
- lazyload : https://github.com/verlok/lazyload
- baguette : https://github.com/feimosi/baguetteBox.js
La classe visiImg.php permet de redimensionner si besoin des images et de les afficher. C'est une classe enfant de SimpleImage.class.php.
La redimenssion prend en charge deux types de concepts :
- Redimension classique : l'image est redimensionnée avec les valeurs demandées.
- Redimension responsive : l'image est redimenssionnée en plusieurs tailles afin de fournir une collection pour le balisage HTML responsif de type srcset.
Affichage de l'image :
La classe render() redimenssionne et affiche les images avec la prise en charge de la technique du LQPI ( gif transparent ou petite image ) pour l'affichages d'une image à l'aide du plugin javaScript lazyload , ainsi que le balisage spécifique pour le navigateur Internet Explorer ( <=11 ) qui ne supporte pas les images responsives ( pas de srcset )
Initialisation de l'objet :
include("./somewhere/SimpleImage.class.php");require_once("./class/VisiImg.php");$vImg = new VisiImg\VisiImg();
Méthode d'affichage
Image non redimenssionnée.
Par défaut le dossier des images non redimenssionnée est : ./images/
Méthode : ->render( $param1, $param2, $param3, $param4 = 0);
Affichage image, balisage HTML classique :
- Paramétre 1 : Classe CSS pour img, minimum = ''
- Paramétre 2 * : nom-fichier.ext
- Paramétre 3 * : texte alternatif
- Paramétre 4 : Option pour le placeholder :
- 0 : valeur par défaut : pas de placeholder.
- 1 : retourne un gif transparent de 1x1 pixel.
- xx: redimensionnent une image pour la fournir encodée en Base64
Exemple :
Affiche une image : balisage classique
echo $vImg->render( '' , 'image.ext' , 'text-alternatif'' );
Affiche une image : balisage lazyload (méthode LQPI de lazyload )
echo $vImg->render( 'lazyload' , 'image.ext' , 'text-alternatif'', 1 );
Affiche une image : balisage lazyload avec un placeholder (méthode LQPI de lazyload ), image en transparence avec la class : lazyload
echo $vImg->render( 'lazyload' , 'image.ext' , 'text-alternatif'', 20 );
Image redimenssionnée simple.
echo $vImg->render ( [
//'id' => 'monId', // si besoin d'un ID
'repImg' => './images/', // par defaut : './galerie/'
'nomFic' => 'img11.jpg',
'width' => 200, // largeur demandée
'height' => 200, // hauteur demandée
'paysage' => 'crop', // méthode découpage
'portrait' => 'crop', // resizeToWidth, resizeToHeight, resize, crop, cropFromTop
//'placeholder' => 20, // facultatif,1 ou x ( mini 6 )
'alt' => 'Mon Image',
'flagDestroy' => false // Supprimer image true/false, false par defaut
] );
Image redimenssionnée responsive.
echo $vImg->render ( [
'repImg' => './images/',
'nomFic' => 'img11.jpg',
'width' => 400,
'height' => 400,
'paysage' => 'crop',
'portrait' => 'crop',
//'placeholder' => 20,
'responsive' => 'full', // ou 'medium'
'sizes' => [
360 => 100,
480 => 100,
640 => 100,
820 => 100,
1300 => 100,
1500 => 100,
2000 => 100],
'class' => 'lazyload',
'alt' => 'Mon Image',// Affiche image imédiatement apres redim
'flagDestroy' => false
]);
Balisage lightBox
La classe renvoit une collections d'informations à l'aide de la méthode : html( 'Nom-de-la-clé ') utile pour concevoir le balisage HTML de l'affichage de l'image et le balisage HTML pour le plugin JS baguetteBox.
$img = $vImg->render ( [
'repImg' => './images/',
'nomFic' => 'img11.jpg',
'width' => 400,
'height' => 400,
'paysage' => 'crop',
'portrait' => 'crop',
//'placeholder' => 20,
// 'responsive' => 'full', // ou 'medium'
'sizes' => [
360 => 100,
480 => 100,
640 => 100,
820 => 100,
1300 => 100,
1500 => 100,
2000 => 100],
'class' => 'lazyload',
'alt' => 'Mon Image',// Affiche image imédiatement apres redim
'flagDestroy' => false
]);
echo '<a href="'.$vImg->html('baguette').'">';echo $img;
echo '</a>';
Nouveaux paramétres Septembre 2018 version 1.2 :
preserveHeight : true/false, preserver la hauteur de l'image (utile pour les map responsive en background )
Nouveaux paramétres Aout 2018 version 1.1 :
Pour les images responsives, il existe deux nouveaux paramétres :
- flagOptimise : true par défaut / false si on souhaite fabriquer des images de tailles plus grandes que l'image originale ( utile pour les animations si utilisateur upload des images plus petites que le slider
) - mediaQueries : Array des media querie personnaliés à utiliser , exemple : [820,1300,1500,2000] ( utile pour l'affichage de miniature dans galeries type https://github.com/guoyunhe/flexbin )
Fonctions publiques
Valeurs retournées par : html('xxx') :
$vImg->html('xxx') ;
Valeurs retournées par : flagIe()
Valeurs retournées par : orientation()
Commentaires: Pas de commentaires
