Fyryke

Fyryke est un micro-framework écrit en PHP pour simplifier le traitement et l'affichage des images sur votre site.

Vous pouvez créer des styles normalisés en format JSON et les appliquer sur vos images de formats PNG, JPEG/JPG et GIF.

Version : Fyryke-1.2.beta2

Download Fyryke

Fonctionnalitées

  • Configuration des styles d'images au format JSON
  • Partage et réutilisation des styles d'images
  • 6 styles d'images par défaut
  • Enregistrement des images aux formats PNG, JPEG/JPG et GIF.<
  • Fonction de debug avec affichage graphique

Fichier de configuration

Le fichier de configuration permet de créer des styles d'images normalisés pour pouvoir les appliquer aux images de votre site.

config.json

"key_1":{
	"name":"style_1",
	"effets":[
		{
			"name": "crop",
			"height": 300,
			"width": 500,
			"upscaling": true
		},
		}
			"name": "resize",
			"anchor": "middel",
			"x": 0,
			"y": 100,
			"width": 100,
			"height": 50
		},
			"name": "scale",
			"width": 50,
			"height": 100
		}
		],
	"out":"img/style_1"
	"format":"png",
	"quality":75
	}
}

L'exemple ci-dessus montre toutes les possibilités de paramètres attendus pour un style d'image.

Paramètres des styles

key_1: (String) clef ou identifiant unique de votre style d'image
name: (String) nom du style d'image
effets: (Array) tableau des effets à appliquer sur votre image
out: (String) sortie des images de style
format: (String) format de sortie des images de style (jpeg/jpg, png, gif)
quality: (int) qualité de sortie des images de 1 (qualité minimum) à 100 (qualité maximum). Conseillée 75.

Les effets

Pour que Fyryke puisse reconnaître les effets appliqués à l'image, chaque effet commence par la clef « name » suivie du nom de l'effet.

Mise à l'échelle

name: "crop" effet de mise à l'échelle de vos images (redimensionne vos images en gardant les proportions pour éviter la déformation de l'image)
height: (int) la hauteur de mise à l'échelle
width: (int) la largeur de mise à l'échelle
upscaling: (bool) autorise l'agrandissement de l'image si la nouvelle taille dépasse la taille de l'image de base

L'ensemble des paramètres attendus par l'effet d'échelle sont facultatifs (y faire figurer la largeur, la hauteur, les deux, aucun, avec ou sans agrandissement). Si vous faites figurer la hauteur et la largeur, la largeur aura la priorité sur la hauteur.

Exemple :

Image originale

Image mise à l'échelle (width 200)

Image mise à l'échelle (height 200)

Image mise à l'échelle (width 500 avec agrandissement)

Recadrage

name: "resize" effet de recadrage (tronquer votre image)
anchor: (String) Permet coordonnées du point sources dynamique.
x: (int) coordonnées du point source.
y: (int) coordonnées du point source.
height: (int) la hauteur du recadrage
width: (int) la largeur du recadrage

Les paramètres de largeur et de hauteur sont attendus ET les valeurs x et y OU la valeur anchor.

L'anchor possède 9 valeurs autorisées :

  • top_left,
  • top_middle,
  • top_right,
  • middel_left,
  • middle,
  • middle_right,
  • bottom_left,
  • bottom_middle,
  • bottom_right.

Chacune d'elles permet de calculer dynamiquement les coordonnées x et y pour un meilleur positionnement. La valeur d’anchor, x et y sont remplies, l'anchor aura la priorité sur les valeurs de x et y.

Exemple :

Image originale

Image avec anchor top_left 300*300

Image avec anchor top_middle 300*300

Image avec anchor top_right 300*300

Image avec anchor middle_left 300*300

Image avec anchor middle 300*300

Image avec middle_right anchor 300*300

Image avec anchor bottom_left 300*300

Image avec anchor bottom_middle 300*300

Image avec anchor bottom_right 300*300

Image recadrée : x:0 y:400 width:450 height:100

Redimensionnement

name: "scale" la redimension permet de donner de nouvelles valeurs à votre image (mais peut la déformer)
height: (int) la hauteur du Redimensionnement
width: (int) la largeur du Redimensionnement

L'ensemble des paramètres attendus pour le redimensionnement :

Exemple :

Image originale

Image recadrée : x:0 y:400 width:450 height:100

Image recadrée : x:0 y:400 width:450 height:100

Mise en place

Les styles créés plus haut vont maintenant être utilisés pour traiter vos images.

<?php
	//Appeler Fyryke si votre fichier n'est pas dans le même répertoire
	require_once('plugins/fyryke.php');

	//Déclaration de l'objet
	$img = new Fyryke("config.json");
	
	//Applique le style à l'image
	<img src="<?echo $img->getImage("mon_images.png","mon_style"); ?>" />
?>

Debugger

Une fonction permet de retrouver chaque erreur possible pendant l'utilisation de Fyryke. Elle retrouve notamment les erreurs de création ou d'utilisation du fichier de configuration et les erreurs d'activation des bibliothèques de traitement d'images.

En cas d'erreur, l'image originale est retournée, ce qui évitera l'affichage d'un message d'erreur PHP. À mettre en fin d'exécution de script (ou en fin de page) :

<?php
	$img->debug();
?>

Chaque erreur est précise pour retrouver plus facilement le problème.

Problèmes récurrents

Le fichier de configuration

Le fichier est normalisé pour éviter toute fausse manipulation (d'où la lourdeur du code par endroits) Un moyen simple de comprendre d'où vient votre erreur est de le soumettre à un validateur de fichier JSON en ligne. JSON Formatter & Validator (vivement conseillé)

La bibliothèque GD

GD est la bibliothèque de traitement d'images sous laquelle Fyryke et basé. Il se peut qu'elle soit être désactivée dans certains cas (hébergeur gratuit par exemple), puisque le traitement d'images en PHP consomme de la ressource mémoire. Il faudra donc l'activer sur votre serveur.

Sous Windows

Éditer le fichier php.ini et chercher cette ligne :

;extension=gd.dll

Retirer le ';' pour dé-commenter Redémarrer votre serveur Apache (WAMP, AppServeur, EasyPHP ...)

Sous Linux

Tout dépend de votre distribution (à voir au cas par cas)


Dans certains cas vous n'aurez pas accès au fichier php.ini (hébergement gratuit, hébergement mutualisé). Les hébergements mutualisés bloquent rarement la bibliothèque GD puisqu'elle est utilisée par beaucoup de CMS.