Ritaglio facile da usare delle miniature dei post?


32

C'è un modo per consentire ai miei utenti di definire l'area di ritaglio di un'anteprima del post? Le anteprime sono sempre allegati post esistenti, preferirei non creare un allegato aggiuntivo per anteprima.

Le miniature dei post devono essere di 200x100 pixel e provenire da una delle immagini utilizzate nel post. Quindi, nel mio mondo ideale, quando fai clic sul link "Imposta immagine in primo piano", ottieni una panoramica delle immagini già incluse e quando fai clic su una di queste, puoi definire tu stesso l'area di ritaglio (spostandola o ridimensionandola, ma mantenendo le proporzioni 2x1). Quando fai clic su "OK", la nuova miniatura del post viene salvata con l'allegato originale ( _wp_attachment_metadata['sizes']['post-thumbnail']ad esempio nel campo dei metadati), non come nuovo allegato. L'uso di un'immagine già utilizzata come miniatura di un post per un altro post non dovrebbe essere consentito o almeno dare un avviso.

Credo che l'editor di immagini incluso non soddisfi le mie esigenze, dal momento che puoi scegliere di modificare tutte le versioni dell'immagine, o la normale miniatura, ma non solo la miniatura del post. Trovo anche un po 'confuso sapere quali versioni sto modificando, quindi penso che i miei utenti avranno ancora più problemi con esso.

Esiste un plugin che fa ciò che voglio o che posso facilmente estendere alle mie esigenze?

Aggiornamento: esempio UI

Mi piace molto l'interfaccia del selettore di immagini della Rubrica di Mac OS X: si seleziona un'immagine e si ridimensiona un ritaglio di miniature a rapporto fisso tramite un dispositivo di scorrimento. Puoi anche trascinare l'immagine di base in giro. Puoi espandere questa idea a più dimensioni di immagine (ne ho una post-thumbnaile post-thumbnail-1/2questa è metà di quella, per esempio). Consenti all'utente di selezionare le dimensioni che sta modificando ora con le caselle di controllo e di disegnare i rettangoli di ritaglio appropriati sullo schermo.

Il tagliatore di immagini della Rubrica in azione


1
@Jan Fabry - Il mio primo progetto WordPress a pagamento è stato un plug-in per il ritaglio delle immagini, prima che il ritaglio arrivasse in WordPress. Era significativamente diverso da quello che chiedi o lo includerei come risposta. Ma quello che vuoi non dovrebbe essere troppo difficile da scrivere se sei motivato ...
MikeSchinkel,

1
@Mike: l'ho visto una volta sul tuo sito web e speravo fosse disponibile da qualche parte. Anche se non spunta tutti gli elementi della mia (ampia) lista dei desideri, potrebbe essere un buon inizio.
Jan Fabry,

@Mike - Sarei anche molto interessato a rivedere qualsiasi codice che potresti aver creato o modificato in relazione al ritaglio dell'immagine. Ho cercato disperatamente di aggiungere jcrop a un metabox personalizzato che mi consentisse di aggiungere e ritagliare le immagini pur utilizzando la galleria multimediale wordpress integrata.
NetConstructor.com,

Ehi @Jan Fabry e @ NetConstructor.com - Ho appena rivisto il codice e dato che era il mio primo plugin per WP sono troppo imbarazzato per rilasciarlo, è così male. Mi piacerebbe lavorare su una soluzione più recente per il rilascio qui, ma potrebbe essere un po 'di tempo ...
MikeSchinkel,

Non essere timido Mike, il codice più vecchio fa sempre male agli occhi dello scrittore. Sono solo progressi :). @Jan - nel tuo esempio di UI, mi sembra che la dimensione della miniatura del post sia in qualche modo predefinita. Puoi dirci di più?
Hakre,

Risposte:


11

Il codice è ancora un casino, ma sembra funzionare, anche su IE 8. Ho intenzione di rilasciarlo nel repository, ma nel frattempo puoi giocare con la mia versione attuale . Per accedervi fai clic su "Modifica immagine" quando aggiungi o modifichi un'immagine, sostituisce il solito editor di immagini (sono molto difficili da combinare). Poiché la maggior parte dell'area di amministrazione utilizza l'anteprima normale e la mia versione corrente modifica l'anteprima del post, potrebbe sembrare che il codice non abbia alcun effetto, ma provalo mostrando un'anteprima del post e dovresti vederlo cambiare.

Questo plug-in richiede il mio Resizer di immagini su richiesta , che è anche un disastro, per eseguire il ridimensionamento effettivo.

Immagine di esempio nel ritaglio


codice pronto per il rilascio? forse lo credi? Sto morendo dalla voglia di integrare funzionalità come questa nella mia caldaia
Mild Fuzz,

Sono anche molto interessato a cosa / come hai fatto! Si prega di condividere il codice. Il tuo codice funziona utilizzando la libreria multimediale wordpress predefinita e ti consente di creare un semplice metabox nella schermata di modifica post in cui puoi chiamare un'immagine specifica E copiarlo solo per una dimensione specifica che hai creato come "new_thumb" come definito attraverso qualcosa come add_image_size ('new_thumb', 200, 100, true) ;? La situazione ideale sarebbe quella di avere qualcosa come il creatore di immagini di intestazione con la possibilità di cambiare ogni dimensione di immagine definita in base a singoli metabox per ogni dimensione definita.
NetConstructor.com il

@JanFabry hai già rilasciato questo codice come plugin? Mi piacerebbe raccomandarlo a qualcuno che ha bisogno di questa funzionalità!
Chip Bennett,

@ jan-fabry Come è andata questa funzione? Qualche successo?
Steven,

4

La soluzione migliore è utilizzare un ritaglio di immagine basato su javascript e quindi php combinato con ImageMagick o Image GD.

Dovrebbe essere scritto nelle tue funzioni o come plug-in in quanto non conosco al volo nessuno dei plug-in wordpress standardizzati, il che è sorprendente.

Esiste un ritaglio di immagine YUI con l'opzione di salvataggio basata su php http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

Ecco un tutorial diverso su come usare un jquery cropper con php
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

Una terza opzione molto simile al link sopra usando lo stesso jquery cropper ma codice diverso. http://www.leonkessler.com/blog/?p=132

Eccone un altro che utilizza jcrop di jquery, http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

Chi è pronto per un nuovo plug-in, questo sarebbe sicuramente popolare :)


Esiste già un codice di ritaglio delle immagini (HTML, JS e PHP) nel core di wordpress. Penso che un buon plugin lo riutilizzerebbe. Non è un must, basta dirlo. Hai ragione sul fatto che l'interfaccia utente di esempio disegnata da Jan ha bisogno di qualcosa del genere.
Hakre,

@hakre, l'ultimo a cui Wyck è stato collegato è jcrop che è stato integrato nel core wp in 2.8 . Ricordo di averlo letto allora, ma non riesco a trovare alcuna informazione su di esso effettivamente utilizzata oltre a un plug-in nel repository che da tutti gli account è rotto.
matt

@matt: se è stato integrato nel core (non conosco tutti i dettagli sull'interfaccia utente del ritaglio nel core in questo momento che è lì) presumo che sia usato per la funzionalità dell'interfaccia utente dell'immagine principale. Questa funzione non è sempre disponibile, ma solo se sono disponibili determinate librerie di immagini PHP o di sistema. Mi dispiace di non essere così specifico, ma è solo che finora non ho implementato l'implementazione di base. Ma so che ce n'è uno;)
hakre,

1

Supponendo che tu abbia già aggiunto il supporto per le anteprime, mentre stai parlando dell'opzione "Immagine in primo piano".

In tal caso, un'opzione è disponibile per aggiungere una nuova dimensione dell'immagine all'array di upload. Quindi, per impostazione predefinita, hai l'anteprima, media, grande. Nel seguente bit di codice, questo aggiunge una quarta immagine a quell'assortimento, in base alle dimensioni desiderate. Questo bit di codice verrebbe aggiunto al tuo file Functions.php.

add_image_size( 'new_thumb', 200, 100, true );

"new-thumb" = il nome della nuova immagine personalizzata
"200" = larghezza
"100" = altezza
"vero" = opzione di ritaglio fisso. Questo forzerà il ritaglio di un'immagine alla larghezza / altezza definite. Senza, si ridimensiona in proporzione.

Ora, per visualizzare la nuova miniatura su una pagina o su un array di post, inserire quanto segue nel codice HTML

<?php the_post_thumbnail('new_thumb'); ?>

@cnix: grazie per questa risposta, ma non è quello che sto cercando. Voglio un modo per l'utente finale di definire l'area che dovrebbe essere ritagliata, non io come progettista del sito. Quindi l'area può variare da immagine a immagine.
Jan Fabry,

1

Potresti voler usare i CSS per avere una grande flessibilità, correggere le miniature nel tuo tema (se lo desideri) ed evitare il disordine dei file:

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Ricorda che l'intera immagine verrà caricata, quindi non utilizzare gli originali da 3 MB per questo.

Aggiornamento secondo la richiesta di gennaio: se si desidera il ritaglio dinamico, considerare:

  • Per utente = amministratore, crea CSS tramite PHP; puoi semplicemente collegarti al php che legge le impostazioni appropriate e regolare i parametri di ritaglio di conseguenza.
  • Per utente = visitatore, utilizzare JavaScript per modificare i parametri di ritaglio nell'attributo di stile dell'immagine.
  • Come soluzione meno invasiva, considera la creazione di uno shortcode (tramite l'ottimo plugin Shortcode Exec PHP) come [thumb w = ?? h = ??] url [/ thumb] che puoi tradurre nel tag HTML appropriato con CSS incorporato.

In effetti, puoi fare il ritaglio tramite CSS per evitare di avere più dimensioni, ma come lasceresti che l'utente (autore del post) definisca l'area di ritaglio che dovrebbe essere mostrata?
Jan Fabry,

Si prega di consultare le modifiche sopra.
Raffaello

Grazie per il chiarimento. Ciò presuppone che l'utente conosca le posizioni dei pixel dell'area di ritaglio desiderata? In realtà sto cercando un modo più grafico (come l'attuale editor di immagini, ma mirato a pubblicare miniature e non miniature normali).
Jan Fabry,

Spero che tu intenda che questo sia un plugin, non un po 'di hack. È possibile fornire alcune opzioni predefinite che nella maggior parte dei casi sono sufficienti: angoli, centro, centrati sui bordi e così via (tutti facilmente calcolabili). Mi asterrei dall'offrire input gratuiti poiché le persone possono rovinare gravemente il flusso del sito se entrano in cazzate. Offrire un definitore grafico di clip (vedi Zenphoto per l'implementazione) va bene, immagino, ma i principi su come usare i valori, comunque ottenuti, rimangono gli stessi; devi solo costruire la GUI. Questo non posso aiutarti.
Raffaello


1

Credo che tu stia cercando questo: http://wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

Non l'ho provato, ma dovrebbe offrirti la funzionalità che stai cercando.

La pagina del plugin originale qui. http://wordpress.org/extend/plugins/scissors/

Ne ho bisogno anche per un progetto a cui sto lavorando.


Grazie per il suggerimento Ho visto Scissors (e sapevo che qualcuno lo ha aggiornato a 3.0), ma penso che sia troppo flessibile per quello che voglio: un cropper deve ritagliare a una dimensione predefinita. Le forbici possono fare molto di più e potrebbero quindi confondere i miei utenti finali.
Jan Fabry,

1

Penso che la soluzione definitiva a questo problema sarebbe quella di modificare il plugin da http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/

e personalizzalo in modo che qualsiasi dimensione dell'immagine personalizzata definita all'interno del tuo file Functions.php (usando add_image_size( 'new_thumb', 200, 100, true ); ) venga automaticamente utilizzata e quindi ottieni il codice per sostituire (o estendere) il link "modifica" quando vuoi modificare un'immagine.

Utilizzando questo approccio wordpress può continuare a creare le dimensioni dell'immagine applicabili come fa normalmente, ma se si desidera modificare in modo specifico l'area ritagliata di un'immagine specifica, si ha la possibilità di farlo che a sua volta sostituisce l'immagine generata automaticamente per quella dimensione. Hmmm ... anche se sembra confuso leggere di nuovo su di esso è esattamente quello che sento che mi manca.

Attualmente credo che il plug-in salvi queste dimensioni di immagine personalizzate in un campo personalizzato all'interno di un post anziché nel post per un'immagine applicabile.


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.