Le Blog

Le blog laboratoire de F.L.D. Studio
0

visiImg

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 : 

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/

Pour le modifier utiliser la méthode : ->repImg('./dossier-des-images/');
Pour le reseter : ->repImg();

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 :
    1. 0 : valeur par défaut : pas de placeholder.
    2. 1 : retourne un gif transparent de 1x1 pixel.
    3. 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>';

Fonctions publiques

Valeurs retournées par : html('xxx') :

$vImg->html('xxx') ;

Retourne le balisage HTML :
->html('html') ;//url complette dernière image (la plus grande pour dataset et IE)  src,srcset et sizes
->html('src')
->html('srcset')
->html('sizes')
->html('baguette') ; // balisage responsif pour baguetteBox / idem ->hrefB(); 
->html('placeholder');// Image pour le placeholder (img ou base64)
->arrHtml['nomFicNew'] = nom netoyé et extension du fichier

Valeurs retournées par : flagIe()
->flagIe(); // Navigateur Internet Explorer <=11 : true/false
Valeurs retournées par : orientation()
->orientation(); // 'portrait' / 'paysage'

Commentaires: Pas de commentaires

Envoyer un commentaire