[Résolu]Soucis avec Sprites/Css pour rendre les images téléchargeables

Bonjour, premier message dans ce forum que je consulte régulièrement depuis pas mal de temps et qui a toujours su répondre à mes petits soucis...sauf aujourd'hui

Je demande donc l'aide de personnes bien plus calées que moi en css/php.

J'ai une image Jpeg contenant 100 icônes que j'ai acheté sur fotolia.
J'ai généré avec un peu de php et de css un tableau de 100 cases.

J'aimerais que ces "images" soient téléchargeables, affichables et permettent de faire fonctionner le drag and drop des images sur Mozilla.

Le but étant très simple, j'ai plusieurs "planches d'images" que l'utilisateur peut consulter dans son administration; il faudrait qu'il puisse prendre les icônes pour les "coller" dans l'éditeur wysiwyg où il le souhaite plutôt que de lui faire rajouter la class="d5" pour afficher l'icône valider.

Je pense qu'une possibilité serait de lier chaque "case" à une page php qui récupère le curseur de 20px*20px (par exemple) et génère à la volée l'image permettant le téléchargement direct ou dans le dossier icones, mais je n'ai aucune idée de comment récupérer en php cette zone pour créer mon jpeg derrière. (ça me permettrait entre autre de pouvoir insérer une planche dans le répertoire sprites et de lancer la génération du css pour les utilisateurs avancés qui utilisent le wysiwyg en mode code et les images "décortiquées" une à une dans le répertoire icones pour les utilisateurs lambda)

Une illustration de ma grille :



A noter qu'il y a des lettres et chiffres afin de donner un repère et voir immédiatement que j9 c'est la class qui affiche un appareil photo




Merci d'avance !
Modifié par xarduk (02 Nov 2009 - 01:37)

Bonjour et bienvenue.

Le sujet du message est totalement hors sujet par rapport au thème principal du forum.
Aussi, je doute fort qu'une réponse soit apportée au problème.

Je te conseille donc d'aller chercher renseignement sur des forums plus adaptés (ajax, php, développement...).

Salut,

Sans compter que proposer au téléchargement des images achetées sur Fotolia est illégal...

Après vérification des CGU de fotolia, il est tout à fait possible d'afficher l'image ou dans mon cas une partie sur le site web (ici un intranet).

Mais le problème n'est pas du tout d'ordre juridique puisque j'ai bien précisé que j'avais d'autres planches, que j'ai donc fait faire par mon infographiste sur le même modèle (quadrillage de x icônes) vu que j'aime bien proposer en sus à mes clients des icônes qui leur sont propres.

Concernant le hors sujet, j'en conviens qu'il est certainement hors sujet (en partie) mais à ce compte là il aurait aussi bien pu apparaitre dans plusieurs sections.

Le problème principal étant bien de "découper" une image qui est quadrillée à l'aide du css en plusieurs petites images. Le php n'ayant servi qu'à générer les 100 classes...


Merci de vos réponses,

en espérant que qqn saura m'aider

xarduk a écrit :
Le problème principal étant bien de "découper" une image qui est quadrillée à l'aide du css en plusieurs petites images. Le php n'ayant servi qu'à générer les 100 classes...

Je ne suis pas sûr de comprendre la logique. Tu travailles avec une image de type sprite, mais le rédacteur doit pouvoir insérer une image d'une icone précise dans un contenu à partir d'un sprite, et au final sur le site ce sont ces images individuelles qui sont affichées? Quel est alors l'intérêt d'utiliser des sprites, si leur seule vertu est de t'obliger à les découper côté serveur?

Il me semble qu'il faudrait d'abord se poser la question «quel est le code HTML qui devra être inséré dans le contenu lors du clic sur un bouton d'icone?» (ou nous donner cette information si tu as déjà une réponse). Partant, si tu as besoin d'images indifividuelles, pourquoi ne pas préparer ces images à l'avance plutôt que de les générer à la volée en PHP? Quel est le gain?

En lisant ta demande, j'ai l'impression que tu nous demandes un script PHP pour raboter les coins d'un cube afin de le faire rentrer dans une ouverture ronde. Et si tu prenais plutôt des tubes ou une entrée carrée? Je peux me tromper, bien sûr.

Pour expliquer la procédure :

des planches comme celle-là j'en ai environ 400, soit 40.000 images si on découpe et on en ajoute régulièrement.

A l'insertion de l'image dans l'intranet, un quadrillage et une feuille css sont générés via php

On peut alors utiliser les icônes en tapant leur "code" de type a2,j9,... à renseigner dans une class.

Certains utilisateurs vont picorer et aller chercher uniquement certaines images de chaque planche et au final ils ont tout au plus 5-6 icônes dans leur cms. Donc effectivement, je peux découper chaque image en 100 icônes et laisser l'utilisateur faire son drag and drop (java).

L'intérêt d'utiliser les sprites est de découper puis générer via php, à la volée une image donnée puis d'avoir une id à chacune des images planche.php?id=22&icone=j4 sous forme de lien qui charge l'image en jpg et permet entre autre le drag and drop directement dans le corps de l'éditeur wysiwyg

Au passage, c'est aussi assez pratique si je souhaite générer tous les icones d'un coup, le graphiste fait une planche, la met dans l'intra et hop, les minis sont générés .

En fait j'ai d'un côté un serveur "maitre" où j'aurais mes 400 planches et de l'autre les répertoires des utilisateurs qui doivent être les plus légers possibles.

Mon problème reste entier car j'ai bien mon quadrillage de 100 liens, le drag and drop est possible mais l'image n'apparait pas dans l'éditeur puisque le lien qui est cop/coller ne renvoie pas directement vers une image le code étant :

<a href="css/#">c6</a>

pour illustrer :

drag and drop


résultat


Modifié par xarduk (31 Oct 2009 - 13:37)

Je suis toujours circonspect.

Si tu veux pouvoir mettre en ligne une «planche» et que tu as besoin, pour l'insertion d'icones individuelles dans un éditeur WYSIWYG, d'images séparées, les solutions qui me viennent sont:
- lors de l'upload ou sur demande, générer des images individuelles pour chaque case de la grille, et stocker tout ça intelligemment sur le serveur;
- ou bien créer un script PHP qui va générer les images souhaitées à la volée à partir d'un fichier «master» (la planche).

Ce n'est certainement pas au moment du drag 'n drop que je chercherais à générer une petite image. Soit je prépare le terrain avant (et alors ma planche d'images utilisables par drag 'n drop serait une série d'éléments IMG en bonne et due forme), soit je me repose sur un script associé à un système de cache pour générer ces images à la demande, la demande étant une requête HTTP du navigateur qui cherche à afficher l'image en question.

Dans tous les cas, il faut que tu t'arranges pou avoir au final comme contenu déposé une des deux options suivantes:

<img alt="..." src="http://media.monsite.com/icons/maplanche/small/c6.png" />

<img alt="..." src="http://media.monsite.com/icons/generator?master=maplanche&amp;icon=c6" />

La question du drag 'n drop est finalement complètement différente de la question de la génération des petites images. Les deux doivent être traitées différemment. Pour les images, c'est une question de workflow, de préparation des ressources nécessaires et d'automatisation. Pour le drag 'n drop, il s'agit juste de s'assurer que l'on obtient le bon code HTML dans le buffer de l'éditeur WYSIWYG.

Prendre les deux problèmes de front en y voyant une seule question est, à mon avis, une erreur de méthodologie.

tu as tout a fait compris ma problématique !

le lien que tu donnes est exactement le lien qui apparait sur un drag n dropp lorsque les images sont affichées via un lien existant (générées à la volée ou pas d'ailleurs)

J'ai peut être oublié de préciser un aspect :

si je souhaite générer les images à la volées c'est aussi pour la balise alt qui sera, elle aussi générée à la volée selon la langue. (on associe un xml à chaque planche)


Donc, je cherche en fait tout simplement comment réaliser un script php permettant de générer une image en php de 20px*20px sur une image de 200px*200px.

Je pourrais donc soit les générer toutes, dans des répertoires avec la bonne langue et les supprimer/recréer sur mise à jour des xml.

Après pourquoi, je parlais de Drag n drop ? c'est assez simple :

le drag n drop copie, le lien, l'image et l'alt. Si je les mets juste sur le serveur, l'éditeur va juste insérer la photo et 8x sur 10 l'utilisateur va zapper l'alt. (pas trop dérangeant s'il s'agit de back office, mais certaines pages sont en ligne donc, je souhaite afficher des alts correspondants)

reste, je sais faire

Je pense avoir manqué de clarté sur mon explication, merci de m'avoir aider à cibler correctement ma problématique. Je me suis laissé un peu dépasser par un besoin de simplification maximal au lieu de réfléchir correctement à l'utilité de ce que je voulais faire

Merci beaucoup de l'aide apporteée, je vais effectuer une recherche sur la génération que je recherche, à moins que qqn ait une piste car je suppose que ça tient sur 2-3 lignes de codes

Je vous dois combien ?
Modifié par xarduk (01 Nov 2009 - 10:35)

je pense que :

imagecopy ( resource dst_im , resource src_im , int dst_x , int dst_y , int src_x , int src_y , int src_w , int src_h )

répond à ma question


comme quoi c'était vraiment simple...

xarduk a écrit :
si je souhaite générer les images à la volées c'est aussi pour la balise alt qui sera, elle aussi générée à la volée selon la langue. (on associe un xml à chaque planche)

La gestion des attributs alt est une problématique différente. Ça n'impose aucune contrainte technique pour la génération des petites images. Tu peux les créer à la main au préalable, les créer d'un seul coup lors de l'upload d'un script, les créer lors de la première requête HTTP si l'image n'existe pas encore, ou autre solution (tout sauf les générer via une requête Ajax lorsque l'utilisateur fait un drag 'n drop, ce serait juste bêtement inefficace).

xarduk a écrit :
Donc, je cherche en fait tout simplement comment réaliser un script php permettant de générer une image en php de 20px*20px sur une image de 200px*200px.

(...)

merci de m'avoir aider à cibler correctement ma problématique

Maintenant que c'est cerné, tu peux effectivement faire des recherches de ton côté. Tu peux aussi passer ce sujet en [Résolu], et créer un nouveau sujet sur le salon dédié aux langages serveur. À priori tu auras besoin de créer un script utilisant la librairie GD de PHP.