Stai cercando un modo per allegare immagini ai post con una semplice metabox di selezione delle miniature? Sebbene esista probabilmente un plugin per questo, abbiamo creato un rapido snippet di codice che puoi utilizzare per allegare immagini ai post con una semplice metabox di selezione delle miniature in WordPress.
Istruzioni:
Tutto quello che devi fare è aggiungere questo codice al file functions.php del tuo tema o in un plugin specifico per il sito:
add_action("admin_init", "images_init");
add_action('save_post', 'save_images_link');
function images_init(){
$post_types = get_post_types();
foreach ( $post_types as $post_type ) {
add_meta_box("my-images", "Pictures", "images_link", $post_type, "normal", "low");
}
}
function images_link(){
global $post;
$custom = get_post_custom($post->ID);
$link = $custom["_link"][0];
$count = 0;
echo '<div class="link_header">';
$query_images_args = array(
'post_type' => 'attachment',
'post_mime_type' =>array(
'jpg|jpeg|jpe' => 'image/jpeg',
'gif' => 'image/gif',
'png' => 'image/png',
),
'post_status' => 'inherit',
'posts_per_page' => -1,
);
$query_images = new WP_Query( $query_images_args );
$images = array();
echo '<div class="frame">';
$thelinks = explode(',', $link);
foreach ( $query_images->posts as $file) {
if(in_array($images[]= $file->ID, $thelinks)){
echo '<label><input type="checkbox" group="images" value="'.$images[]= $file->ID.'" checked /><img src="'.$images[]= $file->guid.'" width="60" height="60" /></label>';
}else{
echo '<label><input type="checkbox" group="images" value="'.$images[]= $file->ID.'" /><img src="'.$images[]= $file->guid.'" width="60" height="60" /></label>';
}
$count++;
}
echo '<br /><br /></div></div>';
echo '<input type="hidden" name="link" class="field" value="'.$link.'" />';
echo '<div class="images_count"><span>Files: <b>'.$count.'</b></span> <div class="count-selected"></div></div>';
}
function save_images_link(){
global $post;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){ return $post->ID; }
update_post_meta($post->ID, "_link", $_POST["link"]);
}
add_action( 'admin_head-post.php', 'images_css' );
add_action( 'admin_head-post-new.php', 'images_css' );
function images_css() {
echo '<style type="text/css">
#my-images .inside{padding:0px !important;margin:0px !important;}
.frame{
width:100%;
height:320px;
overflow:auto;
background:#e5e5e5;
padding-bottom:10px;
}
.field{width:800px;}
#results {
width:100%;
overflow:auto;
background:#e5e5e5;
padding:0px 0px 10px 0px;
margin:0px 0px 0px 0px;
}
#results img{
border:solid 5px #FDD153;
-moz-border-radius:3px;
margin:10px 0px 0px 10px;
}
.frame label{
margin:10px 0px 0px 10px;
padding:5px;
background:#fff;
-moz-border-radius:3px;
border:solid 1px #B5B5B5;
height:60px;
display:block;
float:left;
overflow:hidden;
}
.frame label:hover{
background:#74D3F2;
}
.frame label.checked{background:#FDD153 !important;}
.frame label input{
opacity:0.0;
position:absolute;
top:-20px;
}
.images_count{
font-size:10px;
color:#666;
text-transform:uppercase;
background:#f3f3f3;
border-top:solid 1px #ccc;
position:relative;
}
.selected_title{border-top:solid 1px #ccc;}
.images_count span{
color:#666;
padding:10px 6px 6px 12px;
display:block;
}
.count-selected{
font-size:9px;
font-weight:bold;
text-transform:normal;
position:absolute;
top:10px;
right:10px;
}
</style>';
}
add_action( 'admin_head-post.php', 'images_js' );
add_action( 'admin_head-post-new.php', 'images_js' );
function images_js(){?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.frame input').change(function() {
var values = new Array();
$("#results").empty();
var result = new Array();
$.each($(".frame input:checked"), function() {
result.push($(this).attr("value"));
$(this).parent().addClass('checked');
});
$('.field').val(result.join(','));
$('.count-selected').text('Selected: '+result.length);
$.each($(".frame input:not(:checked)"), function() {
$(this).parent().removeClass('checked');
});
});
var result = new Array();
$.each($(".frame input:checked"), function() {
result.push($(this).attr("value"));
$(this).parent().addClass('checked');
});
$('.field').val(result.join(','));
$('.count-selected').text('Selected: '+result.length);
$.each($(".frame input:not(:checked)"), function() {
$(this).parent().removeClass('checked');
});
});
</script>
<?}
function wps_thumbnails_list(){
global $post;
$image = get_post_meta($post->ID, '_link', true);
$image = explode(",", $image);
foreach($image as $images){
$url = wp_get_attachment_image_src($images, 1, 1);
echo '<a href="';
echo $url[0];
echo '" class="lightbox">';
echo wp_get_attachment_image($images,'thumbnail', 1, 1);
echo '</a>';
}
}
Aggiungi questo snippet all'interno del loop del tuo file single.php per visualizzare le immagini nei tuoi post o pagine.
<?
wps_thumbnails_list()
?>
Nota: Se questa è la prima volta che aggiungi snippet di codice in WordPress, consulta la nostra guida su come copiare / incollare correttamente snippet di codice in WordPress, in modo da non rompere accidentalmente il tuo sito.
Se ti è piaciuto questo snippet di codice, prendi in considerazione la lettura dei nostri altri articoli sul sito come: 11 migliori servizi di web hosting gratuiti e come migrare un sito dal website builder di GoDaddy a WordPress.
c'è un motivo per il doppio codice jquery?
Ottimo plugin. Ho cercato di recuperare nella pagina o nel post i metadati corrispondenti di ogni immagine senza successo. Qualcuno ha capito come fare o è possibile con questo plugin?
Questo ti mostrerà come ottenere i metadati,
http://wpsnipp.com/index.php/loop/display-attachment-thumbnail-with-image-metadata/
Ottengo una schermata bianca quando includo questo codice in functions.php. Sto usando WP 3.8, c'è una soluzione? 🙂 Mi piacerebbe usarlo.
ciao! E per Immagini Multiple Associate a una Singola miniatura? Aiutami per favore
Ciao Kevin
Mi stavo solo chiedendo, invece di mostrare tutti gli allegati nella Libreria multimediale, c'è un modo per mostrare solo le immagini caricate per ogni post a cui sono associate?
Grazie
Aggiungi solo questo
'post_parent' => $post->ID
Sotto
'posts_per_page' => -1,
Kevin, ti sei imbattuto in qualcosa che consente il caricamento di immagini per i campi del profilo utente. Ho visto alcuni plugin premium e immagino che questo debba essere fatto con JavaScript simile, ma mi stavo solo chiedendo se ti sei imbattuto in qualche codice per questo.
Intendi qualcosa come un caricamento di avatar?
Grazie, amico. Facile da usare, così com'è, o un ottimo punto di partenza per la personalizzazione.
Fantastico, sono contento di sentirlo. Attualmente sto lavorando a una versione plugin di questo snippet che supporterà funzionalità come il caricamento lazy, l'anteprima delle immagini popup, ecc., e la rilascerò gratuitamente nel prossimo futuro. Seguimi su Twitter o Facebook, farò un annuncio a riguardo.
Questo è semplicemente fantastico. Hai menzionato nei commenti di pubblicare una versione aggiornata, mi chiedevo solo se l'avessi già fatto o meno? Grazie per il fantastico snippet
Sembra una fantastica funzione php. Forse è solo il mio computer, ma mi sembra molto lento, c'è un modo per velocizzarlo?
Bel inizio! Ma non usare $file->guid. Questo distruggerà le proporzioni. Usa $thumbnail = wp_get_attachment_image_src($file->ID, ‘thumbnail’); e sostituisci $file->guid con $thumbnail[0] invece. Molto, molto meglio!
Grazie Jens, pubblicherò una versione aggiornata con i suggerimenti che ho ricevuto. Felice di sapere che ti piace lo snippet,
Volevo solo dire che finalmente l'ho fatto funzionare, ancora, grazie. Il tuo aiuto è molto apprezzato 🙂
Nessun problema, felice di sapere che hai fatto funzionare le cose correttamente.
Hmmm, non ero consapevole che la parte “AT kevin” si trasformasse in un link Twitter con il nome utente 'kevin'
Scusa per questo 🙂 Stavo solo rispondendo a te Kevin (Chard).
haha nessun problema 🙂
@Kevin:twitter , wow questo deve essere il mio giorno fortunato, sto cercando qualcosa del genere da un po'! Ti sono molto grato, grazie! Questo sarà utile e funziona benissimo, ma vorrei sapere come disabilitare l'opzione di selezione multipla, vorrei solo che la funzione fosse in grado di selezionare un solo allegato 🙂
(L'ho già modificato per mostrare solo l'url/sorgente in modo da poterlo implementare nel loop del tema)…
Basta cambiare questo da checkbox a radio button tutti all'interno dello stesso gruppo.
Kevin, grazie ma non ha funzionato, prima di tutto quando si seleziona un'immagine la seleziona ma se un'altra immagine era già selezionata non la deseleziona, e mostra ancora più immagini nel post (non è un grosso problema, ma sarebbe più facile per l'utente se se ne potesse selezionare solo una :))
In secondo luogo, vorrei sapere se è possibile mostrare la dimensione dell'immagine nella sezione alt o title, o sotto l'immagine stessa come in uno span. È anche possibile con questo snippet? Ho provato quanto segue:
(So che non è corretto :))
title=”””
Questo dovrebbe funzionare per te, i pulsanti radio devono avere lo stesso name=”” altrimenti non fanno parte dello stesso gruppo e funzionerebbero come una checkbox.
http://pastebin.com/vF6mjyZL
Ho creato due versioni, una che fa una singola immagine per le stesse ragioni che potresti avere, entrambe dovrebbero funzionare insieme anche se questa ha del codice commentato ma dovrebbe funzionare bene.
Quello che ho provato:
title = “‘ ‘”
Ciao Sir, posso dire che questo è uno dei tuoi migliori snippet? Magari!?
Grazie, sono felice di vedere che ti piace lo snippet.