Vous cherchez un moyen d'attacher des images à des articles avec une simple boîte de métadonnées de sélection de miniatures ? Bien qu'il existe probablement un plugin pour cela, nous avons créé un extrait de code rapide que vous pouvez utiliser pour attacher des images à des articles avec une simple boîte de métadonnées de sélection de miniatures dans WordPress.
Instructions :
Il vous suffit d'ajouter ce code au fichier functions.php de votre thème ou dans un plugin spécifique au site :
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>';
}
}
Ajoutez cet extrait dans la boucle de votre fichier single.php pour afficher les images dans vos articles ou pages.
<?
wps_thumbnails_list()
?>
Remarque : Si c'est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez consulter notre guide sur la manière de copier / coller correctement des extraits de code dans WordPress, afin de ne pas casser accidentellement votre site.
Si vous avez aimé cet extrait de code, n'hésitez pas à consulter nos autres articles sur le site tels que : 11 meilleurs services d'hébergement web gratuits et comment migrer un site du constructeur de sites GoDaddy vers WordPress.
y a-t-il une raison pour un double code jquery ?
Excellent plugin. J'essaie de récupérer sur la page ou l'article les métadonnées correspondantes de chaque image sans succès. Quelqu'un a-t-il trouvé une solution ou est-ce même possible avec ce plugin ?
Cela vous montrera comment obtenir les métadonnées,
http://wpsnipp.com/index.php/loop/display-attachment-thumbnail-with-image-metadata/
J'obtiens un écran blanc lorsque j'inclus ce code dans functions.php. J'utilise WP 3.8, y a-t-il une solution ? 🙂 J'aimerais l'utiliser.
bonjour ! Qu'en est-il de plusieurs images attachées à une seule miniature ? Aidez-moi s'il vous plaît
Salut Kevin
Je me demande juste, au lieu d'afficher toutes les pièces jointes dans la médiathèque, y a-t-il un moyen d'afficher uniquement les images téléchargées pour chaque article auquel elles sont attachées ?
Merci
Ajoutez simplement ceci
‘post_parent’ => $post->ID
Sous
‘posts_per_page’ => -1,
Kevin, avez-vous rencontré quelque chose qui permet le téléchargement d'images pour les champs de profil utilisateur. J'ai vu quelques plugins premium, et je suppose que cela doit être fait avec un JS similaire, mais je me demandais juste si vous aviez rencontré du code pour cela.
Vous voulez dire comme un truc de téléchargement d'avatar ?
Merci, mec. Facile à utiliser, tel quel, ou un excellent point de départ pour la personnalisation.
Cool, content de l'apprendre. Je travaille actuellement sur une version plugin de cet extrait qui prendra en charge des choses comme le chargement différé, l'aperçu d'image en popup, etc., et je la publierai gratuitement dans un avenir proche. Suivez-moi sur Twitter ou Facebook, j'en ferai une annonce.
C'est juste super génial. Vous avez mentionné dans les commentaires que vous postiez une version mise à jour, je me demandais juste si vous l'aviez déjà fait ou pas ? Merci pour cet extrait cool.
Cela semble être une excellente fonction PHP. Peut-être que c'est juste mon ordinateur, mais cela me semble vraiment lent, y a-t-il un moyen de l'accélérer ?
Bon début ! Mais n'utilisez pas $file->guid. Cela détruira les proportions. Utilisez $thumbnail = wp_get_attachment_image_src($file->ID, ‘thumbnail’); et remplacez $file->guid par $thumbnail[0] à la place. Beaucoup, beaucoup mieux !
Merci Jens, je devrai poster une version mise à jour avec les suggestions que j'ai reçues. Content que vous aimiez l'extrait.
Je voulais juste dire que j'ai enfin réussi, encore une fois, merci. Votre aide est très appréciée 🙂
Pas de problème, content d'apprendre que vous avez réussi à faire fonctionner les choses correctement.
Hmmm, je n'étais pas au courant que la partie “AT kevin” se transformerait en un lien Twitter avec le nom d'utilisateur « kevin »
Désolé pour ça 🙂 Je répondais juste à/pour toi Kevin (Chard).
haha pas de problème 🙂
@Kevin:twitter , wow, ça doit être ma journée de chance, je cherchais quelque chose comme ça depuis un moment ! Je suis très reconnaissant, merci ! Cela va être pratique et cela fonctionne très bien, mais j'aimerais savoir comment désactiver l'option de sélection multiple, je veux que la fonction ne puisse sélectionner qu'une seule pièce jointe 🙂
(Je l'ai déjà édité pour n'afficher que l'URL/la source afin de pouvoir l'implémenter dans la boucle du thème)…
Changez simplement ceci de cases à cocher à des boutons radio, le tout au sein du même groupe.
Kevin, merci mais cela n'a pas fonctionné, tout d'abord lorsque l'on sélectionne une image, elle est sélectionnée mais si une autre image était déjà sélectionnée, celle-ci n'est pas désélectionnée, et plusieurs images s'affichent toujours dans la publication (pas vraiment un gros problème, mais plus convivial si un utilisateur ne peut sélectionner qu'une seule image :))
Deuxièmement, j'aimerais savoir s'il est possible d'afficher la taille de l'image dans la section alt ou title de, ou sous l'image elle-même comme dans un span. Est-ce même possible avec cet extrait ? J'ai essayé ceci :
(Je sais que ce n'est pas correct :))
title=”””
Cela devrait fonctionner pour vous, les boutons radio doivent avoir le même name=”” sinon ils ne font pas partie du même groupe et fonctionneraient comme une case à cocher.
http://pastebin.com/vF6mjyZL
J'ai fait deux versions, une qui gère une seule image pour les mêmes raisons que vous pourriez avoir, les deux devraient fonctionner ensemble bien que celle-ci ait du code commenté mais devrait fonctionner correctement.
Ce que j’ai essayé :
titre = “‘ ‘”
Bonjour Monsieur, puis-je dire que c'est l'un de vos meilleurs extraits ? Mai !?
Merci, heureux de voir que vous aimez l'extrait.