Le Blog

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/

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

] );

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>';

30 secondes de CSS

30 secondes de JS

Composants HTML et CSS et ARIA

Composants Responsifs

GitHub : https://github.com/trending

Divers

Prompt pour console

Voir la partie Varaible CSS et pseudo class

Date dans calendrier SVG

Upload file

TurboLink : https://github.com/turbolinks/turbolinks

Debuger les scripts PHP avec XDEBUG

Mode opératoire pour le debugage des scripts .PHP en local dans un environement WAMP et VISUAL STUDIO CODE.

Etape 1 : le serveur PHP WAMP SERVER

Par défaut xdebug sous windows est déjà installé. Pour le vérifier, charger la homepage de wamp server et vérifier que xdebug est chargé.

Vérifier la configuration de xdebug : charger dans la catégorie outil de cette page : phpinfo() et vérifier la ligne : xdebug_remote_enable qui doit être à on

Pour le configurer il faut modifier le fichier php.ini et tout en bas créer la ligne :

• xdebug.remote_enable = on

Arrêter le serveur PHP et le relancer

Etape 2 : l'editeur VISUAL STUDIO CODE

Vérifier dans les extensions si xdebug est installé.

Si ce n'est pas le cas, installer l'extention xdebug

• Cliquer sur le bouton : debug
• Dans la liste des configurations choisir : php
• Un fichier de configuration .json est automatiquement crée

Utiliser XDEBUG

Placer des points d'arret dans le script

Lancer le mode debug de visual studio

Appeller le script dans le navigateur avec un paramétre type get : 

?XDEBUG_SESSION_START=vscode

La video de graphikart : xdebug exécution pas à pas