Redimensionner les images à la taille réelle utilisée dans l'éditeur?

20

Existe-t-il un moyen de redimensionner les images à la taille réelle qu'elles seront affichées dans le message? J'ai des utilisateurs qui importent une grande image, puis la redimensionnent dans l'éditeur visuel. C'est facile, car ils peuvent simplement faire glisser l'image jusqu'à ce qu'elle atteigne la taille souhaitée, sans ouvrir d'abord un éditeur d'image, redimensionner l'image, l'enregistrer et la télécharger en tant que pièce jointe distincte. Bien sûr, cela se traduit parfois par une image de 100 pixels de large dans la publication, mais de 1 500 pixels en réalité.

Existe-t-il un plugin qui fait cela lorsqu'un nouveau message est enregistré? Je voudrais garder l'image existante en taille réelle (pour la liaison ou les redimensionnements ultérieurs), mais ajoutez simplement une taille supplémentaire (et enregistrez-la dans l' _wp_attachment_metadataobjet), donc ce message a l'image dans la bonne taille et une référence à l'accessoire pleine grandeur.

Bien sûr, tous les messages existants doivent également être traités une fois. <img>les balises peuvent avoir juste un width, juste un height, ou aucun d'entre eux: tout cela devrait être nettoyé, afin qu'ils aient tous le bon width, heightet une image de cette taille.

Jan Fabry
la source
Êtes-vous d'accord avec une solution côté serveur qui redimensionne les images à la volée en fonction des paramètres de transfert transmis à une URL d'image existante? Apache / Mod_Rewrite?
hakre
@hakre: Voulez-vous dire un filtre post-sauvegarde qui passe par le post et réécrit chaque image en tant que image.png?w=300&h=400, ou image-300x400.png, que je prendrais ensuite via Mod_Rewrite et redimensionner (et cache) sur demande? Est-ce un avantage par rapport à la création des images redimensionnées une fois (dans cette action de post-sauvegarde) et à leur utilisation en tant que fichiers statiques?
Jan Fabry
@Jan Fabry Oui, c'est ce que je pensais. L'avantage est que vous ne créez l'image que sur demande, donc tant que l'auteur ne modifie pas le post, cela ne créera pas de fichiers en soi. À côté de ne pas bloquer l'édition, il est plus découplé de wp que vous pouvez même créer un service serveur, une extravagance de mise en cache CDN ou autre. :) --- wp.com fait quelque chose de similaire si je vois bien.
hakre
Combinée à la mise en cache, cette approche brille vraiment. Je suppose qu'il existe un plugin pour cela. Vous pouvez également exécuter une installation de Zenphoto avec un plugin comme Zenphoto Gallery (le mien: lmazy.verrech.net/zenphoto-gallery )
Raphael
@Raphael: En effet, aujourd'hui j'ai recherché les plugins possibles, et certains adoptent cette approche. Si vous avez quelque chose à ajouter à ma liste , faites-le, c'est modifiable par tous.
Jan Fabry

Réponses:

11

J'ai créé deux plugins qui, ensemble, devraient répondre à mes besoins. Ils sont actuellement à un stade alpha précoce et tous les commentaires sont les bienvenus.

Le plugin de base est un Resizer à la demande . Ce plugin surveille les demandes de fichiers non existants dans le répertoire de téléchargement et crée des images de la taille demandée si nécessaire. Par exemple, image-200x100.jpgva créer et retourner image.jpg, mais redimensionné à 200 par 100 pixels. L'image est enregistrée sous ce nom dans le répertoire, de sorte que les autres requêtes sont traitées directement par le serveur.

Le deuxième plugin, Resize img tags , modifie les <img>balises afin que leurs srcattributs incluent des données de largeur et / ou de hauteur. Cela permet au premier plugin de servir les bonnes images. Ensemble, ils font ce que je veux, et je n'ai besoin que de créer une fonction à exécution unique pour convertir tous les messages existants, mais cela devrait être facile (je ne veux pas me connecter the_contentà quelque chose qui ne devrait fonctionner qu'une seule fois).

Un troisième plugin "bonus", Images intermédiaires virtuelles , intercepte la création des images intermédiaires lors du téléchargement d'une nouvelle image dans WordPress. Puisqu'ils sont toujours créés par le premier plugin si demandé, cela vous permet de spécifier plusieurs tailles d'image sans occuper d'espace disque à moins qu'elles ne soient réellement utilisées. Cela n'est pas nécessaire pour que les deux premiers fonctionnent, mais c'était un ajout facile, et cela souligne le fait que je dois encore contourner l'éditeur d'images WordPress, mais je le ferai lorsque je créerai mon éditeur de vignettes , qui sera également utilisez le premier plugin.

Jan Fabry
la source
1
Ces sons sont vraiment excellents! J'ai hâte d'avoir le temps de les essayer quand j'en ai besoin pour des scénarios du monde réel.
MikeSchinkel
Super truc. Envisagez-vous de les ajouter au référentiel du plugin worpdress?
hakre
@hakre: Oui en effet. Une fois que je les ai préparés pour l'examen par les pairs :-)
Jan Fabry
4

J'ai recherché le répertoire du plugin "resize"ou "crop"(ce dernier pour une autre question ) et j'ai noté mes résultats dans une feuille de calcul Google publique . La recherche de plugins est très déroutante dans ses numéros de résultats (la dernière page de la "resize"recherche affiche "Affichage 145-150 des 273 plugins"), donc j'en ai peut-être manqué quelques-uns. Notes semi-liées: tout le monde semble penser que le monde a besoin d'un autre plugin de diaporama. Peu semblent réaliser que cela content_save_prepeut être un meilleur filtre pour effectuer une analyse approfondie que the_content.

Je n'ai encore testé aucun de ces plugins, mais voici une liste de plugins qui semblent faire ce que je veux. J'ai ajouté le numéro de version "Compatible jusqu'à" entre parenthèses.

Pensées personnelles: les quatre premiers réécrivent l'URL sur une page dynamique (quelque chose comme /wp-content/plugins/my-plugin/image.php?src=[original src]&w=100&h=50), avec différentes formes de mise en cache. Je préfère une image réelle créée selon les besoins, similaire à l'approche adoptée par ImageScaler. Cependant, je diviserais cela (et inclurais la suggestion de hakre dans les commentaires) et je réécrirais d'abord toutes les URL de /wp-content/uploads/2010/11/image.jpgà /wp-content/uploads/2010/11/image-100x50.jpg, puis je laisserais un script créer les images manquantes. La première demande pour cette image crée l'image, toutes les demandes suivantes utilisent cette image créée. Cela me permet également de partager les fonctionnalités entre différents plugins. Je publierai cette solution dans une réponse séparée.

Ces plugins limitent les images à une certaine taille maximale (en quoi est-ce différent de la spécification $content_width?):

  • JP-redesign-images , vérifie les images liées à chaud et surdimensionnées (seulement si elles sont trop grandes, pas si elles sont juste redimensionnées) (3.0.1)
  • Hungred Image Fit , vérifie les images trop grandes (3.0.0)

Le plugin suivant est intéressant pour d'autres raisons:

Ceci est un article du wiki communautaire, il peut donc être mis à jour si vous trouvez de nouveaux plugins.

Jan Fabry
la source
0

Qu'en est-il de l'utilisation de timthumb et de la variable de passage pour modifier automatiquement la taille / les dimensions de l'image et les niveaux de zoom? De cette façon, les tailles d'image d'origine peuvent toujours être conservées. Si vous avez besoin d'exemples sur cette ligne, faites-le moi savoir.

NetConstructor.com
la source
0

Wordpress propose trois tailles par défaut (petite, moyenne, grande) qui peuvent être configurées. Si vous les utilisez, Wordpress crée des copies redimensionnées. Il est probablement judicieux de les utiliser et de définir le nombre afin qu'ils correspondent au style actuel. Il en résulte que les images n'ont pas de tailles différentes sur toute la page et permettent des ajustements globaux lorsque le thème change.

Raphael
la source
Je sais qu'il est préférable de s'en tenir à des tailles d'image prédéfinies, mais mes clients ne le font pas :-) S'ils peuvent redimensionner l'image dans l'éditeur, il est logique que le système suive ce choix.
Jan Fabry
Eh bien, vous pouvez supprimer cette possibilité et les forcer à fonctionner correctement;)
Raphael
C'est aussi une question intéressante: "Comment désactiver la fonctionnalité de redimensionnement dans TinyMCE?" Si vous connaissez la réponse à cette question, veuillez créer une nouvelle question et y répondre vous-même, elle sera probablement utile aux autres.
Jan Fabry
0

Le plugin Image Pro récemment publié semble faire exactement cela. Je ne m'étais pas encore testé, la démo est très impressionnante, notez la mauvaise compatibilité du navigateur (Firefox uniquement pour le moment).

Rarst
la source