Ridimensionare le immagini alle dimensioni effettive utilizzate nell'editor?


20

C'è un modo per ridimensionare le immagini alla dimensione effettiva che verranno mostrate nel post? Ho utenti che importano un'immagine di grandi dimensioni e quindi la ridimensionano nell'editor visivo. Questo è facile, poiché possono semplicemente trascinare l'immagine fino a raggiungere le dimensioni desiderate, senza prima aprire un editor di immagini, ridimensionare l'immagine, salvarla e caricarla come allegato separato. Naturalmente, questo a volte si traduce in un'immagine che è larga 100 px nel post, ma 1500px nella realtà.

Esiste un plug-in che consente di salvare un nuovo post? Vorrei mantenere l'immagine a dimensione intera esistente (per il collegamento o ridimensionamento successivo), ma basta aggiungere una dimensione aggiuntiva (e salvarla _wp_attachment_metadatanell'oggetto), quindi questo post ha l'immagine nella dimensione corretta e un riferimento a l'allegato a grandezza naturale.

Naturalmente, tutti i post esistenti dovrebbero essere gestiti una volta. <img>tag ci potrebbero avere solo una width, solo una height, o nessuno di essi: questo dovrebbe essere ripulito, in modo che tutti abbiano la giusta width, heighte un'immagine di quelle dimensioni.


Stai bene con una soluzione lato server che ridimensiona le immagini al volo in base ai parametri get passati a un URL immagine esistente? Apache / mod_rewrite?
Hacre,

@hakre: Intendi un filtro post-salvataggio che passa attraverso il post e riscrive ogni immagine come image.png?w=300&h=400, o image-300x400.png, che vorrei poi prendere tramite Mod_Rewrite e ridimensionare (e cache) su richiesta? È un vantaggio rispetto alla creazione delle immagini ridimensionate una volta (in quell'azione post-salvataggio) e alla loro pubblicazione come file statici?
Jan Fabry,

@ Jan Fabry Sì, è quello che avevo in mente. Il vantaggio è che crei l'immagine solo su richiesta, quindi fintanto che l'autore modifica il post, ciò non creerebbe file di per sé. Accanto a non bloccare la modifica, è più disaccoppiato da wp in modo da poter persino creare alcuni servizi server, stravaganze nella cache CDN o altro. :) --- wp.com fa qualcosa di simile se lo vedo bene.
Hacre,

In combinazione con la memorizzazione nella cache, questo approccio brilla davvero. Suppongo che ci sia un plugin per questo. Puoi anche eseguire un'installazione di Zenphoto insieme a un plugin come Zenphoto Gallery (il mio: lmazy.verrech.net/zenphoto-gallery )
Raffaello

@Raphael: In effetti, oggi ho studiato i possibili plugin e alcuni adottano questo approccio. Se hai qualcosa da aggiungere alla mia lista , per favore fallo, è modificabile da tutti.
Jan Fabry,

Risposte:


11

Ho creato due plugin che insieme dovrebbero risolvere i miei bisogni. Sono attualmente in una fase alfa iniziale e tutti i commenti sono benvenuti.

Il plug-in di base è un Resizer su richiesta . Questo plugin monitora le richieste di file inesistenti nella directory dei caricamenti e, se necessario, crea immagini delle dimensioni richieste. Ad esempio, image-200x100.jpgverrà creato e restituito image.jpg, ma ridimensionato a 200 per 100 pixel. L'immagine viene salvata con quel nome nella directory, quindi ulteriori richieste vengono gestite direttamente dal server.

Il secondo plug-in, Resize img tags , modifica i <img>tag in modo che i loro srcattributi includano i dati di larghezza e / o altezza. Ciò consente al primo plug-in di fornire le immagini corrette. Insieme fanno quello che voglio, e ho solo bisogno di creare una funzione run-once per convertire tutti i post esistenti, ma questo dovrebbe essere facile (non voglio agganciarmi the_contenta qualcosa che dovrebbe funzionare solo una volta).

Un terzo plug-in "bonus", Immagini intermedie virtuali , intercetta la creazione delle immagini intermedie durante il caricamento di una nuova immagine in WordPress. Poiché sono ancora creati dal primo plug-in, se richiesto, ciò consente di specificare più dimensioni di immagine senza occupare spazio su disco a meno che non vengano effettivamente utilizzate. Questo non è necessario perché i due funzionino per primi, ma è stata un'aggiunta facile ed evidenzia il fatto che ho ancora bisogno di aggirare l'editor di immagini WordPress, ma lo farò quando creerò il mio editor di miniature , che sarà anche usa il primo plugin.


1
Questi suoni sono davvero eccellenti! Non vedo l'ora di avere il tempo di provarli quando ne ho bisogno per gli scenari del mondo reale.
MikeSchinkel,

Roba fantastica. Stai pensando di aggiungerli al repository dei plugin di worpdress?
Hacre,

@hakre: Sì davvero. Una volta che li ho pronti per la revisione tra pari :-)
Jan Fabry

4

Ho cercato nella directory dei plug-in "resize"o "crop"(quest'ultima per un'altra domanda ) e ho notato le mie scoperte in un foglio di calcolo pubblico di Google . La ricerca del plugin è molto confusa nei suoi numeri di risultati (l'ultima pagina della "resize"ricerca mostra "Mostra 145-150 di 273 plugin"), quindi potrei averne perso alcuni. Note semi-correlate: tutti sembrano pensare che il mondo abbia bisogno di un altro plug-in per le presentazioni. Pochi sembrano rendersi conto che content_save_prepotrebbe essere un filtro migliore per eseguire analisi pesanti rispetto a the_content.

Non ho ancora testato nessuno di questi plugin, ma ecco un elenco di plugin che sembra fare quello che voglio. Ho aggiunto il numero di versione "Compatibile fino a" tra parentesi.

Pensieri personali: i primi quattro riscrivono l'URL in una pagina dinamica (qualcosa del genere /wp-content/plugins/my-plugin/image.php?src=[original src]&w=100&h=50), con varie forme di memorizzazione nella cache. Preferisco un'immagine reale creata all'occorrenza, in modo simile all'approccio adottato da ImageScaler. Tuttavia, lo dividerei (e includerei il suggerimento di hakre nei commenti) e prima riscriverei tutti gli URL da /wp-content/uploads/2010/11/image.jpga /wp-content/uploads/2010/11/image-100x50.jpg, quindi lasciare che uno script crei le immagini mancanti. La prima richiesta per questa immagine crea l'immagine, tutte le richieste successive utilizzano questa immagine creata. Questo mi permette anche di dividere la funzionalità tra diversi plugin. Pubblicherò questa soluzione in una risposta separata.

Questi plug-in limitano le immagini a una determinata dimensione massima (in che cosa differisce dalle specifiche $content_width?):

  • JP-redesign-images , controlla sia le immagini hotlink sia quelle sovradimensionate (solo se sono troppo grandi, non se sono appena ridimensionate) (3.0.1)
  • Hungred Image Fit , controlla immagini troppo grandi (3.0.0)

Il seguente plugin è interessante per altri motivi:

Questo è un post Wiki della comunità, quindi può essere aggiornato se trovi nuovi plugin.


0

Che ne dici di utilizzare timthumb e passare la variabile per cambiare automaticamente dimensione / dimensioni dell'immagine e livelli di zoom? In questo modo è ancora possibile mantenere le dimensioni dell'immagine originale. Se hai bisogno di alcuni esempi in questa riga fammi sapere.


0

Wordpress offre tre dimensioni predefinite (piccola, media, grande) che possono essere configurate. Se li usi, Wordpress crea copie ridimensionate. Probabilmente è un buon stile usare quelli e impostare il numero in modo che si adattino allo stile corrente. Ciò si traduce in immagini che non hanno dimensioni diverse su tutta la pagina e consentono regolazioni globali quando il tema cambia.


So che è meglio attenersi alle dimensioni predefinite dell'immagine, ma i miei clienti non lo fanno :-) Se riescono a ridimensionare l'immagine nell'editor, è logico che il sistema segua quella scelta.
Jan Fabry,

Beh, si potrebbe rimuovere questa possibilità e li costringono a lavorare in modo pulito;)
Raphael

Questa è anche una domanda interessante: "Come posso disabilitare la funzionalità di ridimensionamento in TinyMCE?" Se conosci la risposta, crea una nuova domanda e rispondi tu stesso, probabilmente sarà utile per gli altri.
Jan Fabry,

0

Il plugin Image Pro rilasciato di recente sembra fare esattamente questo. Non mi ero ancora messo alla prova, la demo sembra molto impressionante, nota la scarsa compatibilità del browser (solo Firefox al momento).

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.