Você está procurando uma maneira de anexar imagens a posts com uma metabox simples de seleção de miniaturas? Embora provavelmente exista um plugin para isso, criamos um snippet de código rápido que você pode usar para anexar imagens a posts com uma metabox simples de seleção de miniaturas no WordPress.
Instruções:
Tudo o que você precisa fazer é adicionar este código ao arquivo functions.php do seu tema ou a um plugin específico do 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>';
}
}
Adicione este snippet dentro do loop do seu arquivo single.php para exibir as imagens em seus posts ou páginas.
<?
wps_thumbnails_list()
?>
Observação: Se esta é a primeira vez que você adiciona trechos de código no WordPress, consulte nosso guia sobre como copiar / colar trechos de código corretamente no WordPress, para não quebrar acidentalmente seu site.
Se você gostou deste trecho de código, considere conferir nossos outros artigos no site, como: 11 melhores serviços de hospedagem web gratuitos e como migrar o site do GoDaddy Website Builder para o WordPress.
existe um motivo para código jquery duplicado?
Ótimo plugin. Tenho tentado recuperar na página ou post os metadados correspondentes de cada imagem sem sucesso. Alguém descobriu ou é possível com este plugin?
Isso mostrará como obter metadados,
http://wpsnipp.com/index.php/loop/display-attachment-thumbnail-with-image-metadata/
Recebo uma tela branca ao incluir este código em functions.php. Estou usando WP 3.8, há uma correção? 🙂 Eu gostaria de usar isso.
olá! E quanto a Múltiplas Imagens Anexadas a Uma Miniatura? Ajude-me por favor
Olá Kevin
Só queria saber se, em vez de mostrar todos os anexos na Biblioteca de Mídia, há uma maneira de mostrar apenas as imagens enviadas para cada post ao qual elas estão anexadas?
Obrigado
Apenas adicione isto
‘post_parent’ => $post->ID
Abaixo
‘posts_per_page’ => -1,
Kevin, você encontrou algo que permite o upload de imagens para campos de perfil de usuário. Eu vi alguns plugins premium, e imagino que isso precise ser feito com JS semelhante, mas só queria saber se você já encontrou algum código para isso.
Você quer dizer como um tipo de upload de avatar?
Valeu, cara. Fácil de usar, como está, ou um ótimo ponto de partida para personalização.
Que bom saber disso, estou trabalhando em uma versão plugin deste snippet que suportará coisas como lazy load, pré-visualização de imagem em popup, etc., e a lançarei gratuitamente em breve. Siga-me no Twitter ou Facebook, farei um anúncio sobre isso.
Isso é simplesmente incrível. Você mencionou nos comentários sobre postar uma versão atualizada, apenas curioso se você já fez isso ou não? Obrigado pelo snippet legal
Parece uma ótima função php. Talvez seja só o meu computador, mas parece muito lento para mim, há alguma maneira de acelerá-lo?
Bom começo! Mas não use $file->guid. Isso destruirá as proporções. Use $thumbnail = wp_get_attachment_image_src($file->ID, ‘thumbnail’); e substitua $file->guid por $thumbnail[0] em vez disso. Muito, muito melhor!
Obrigado Jens, terei que postar uma versão atualizada com as sugestões que tenho recebido. Fico feliz em saber que você gosta do snippet,
Só queria dizer que finalmente consegui fazer funcionar, novamente, obrigado. Sua ajuda é muito apreciada 🙂
Sem problemas, fico feliz em saber que você conseguiu fazer as coisas funcionarem corretamente.
Hmmm, não sabia que a parte “AT kevin” se transformaria em um link do Twitter com o nome de usuário ‘kevin’
Desculpe por isso 🙂 Eu estava apenas respondendo para/para você Kevin (Chard).
haha sem problemas 🙂
@Kevin:twitter , uau, este deve ser o meu dia de sorte, estou procurando algo assim há um tempo! Sou muito grato, obrigado! Isso será útil e funciona muito bem, mas eu gostaria de saber como desativar a opção de seleção múltipla, eu só quero que a função seja capaz de selecionar apenas um anexo 🙂
(Eu já editei para mostrar apenas a url/source para que eu pudesse implementá-lo no loop do tema)…
Basta mudar isso de checkbox para botões de rádio, tudo dentro do mesmo grupo.
Kevin, obrigado, mas isso não funcionou. Primeiro, ao selecionar uma imagem, ela é selecionada, mas se outra imagem já estava selecionada, ela não é desmarcada, e ainda mostra várias imagens na postagem (não é um grande problema, mas seria mais amigável se um usuário pudesse selecionar apenas uma imagem :))
Em segundo lugar, gostaria de saber se é possível mostrar o tamanho da imagem na seção alt ou title de , ou abaixo da própria imagem como em um span. Isso é sequer possível com este snippet? Eu tentei o seguinte:
(Eu sei que não está correto :))
title=”””
Isso deve funcionar para você, os botões de rádio precisam ter o mesmo name=”” caso contrário, eles não fazem parte do mesmo grupo e funcionariam como uma caixa de seleção.
http://pastebin.com/vF6mjyZL
Eu fiz duas versões, uma que faz uma única imagem pelas mesmas razões que você pode ter, ambas devem funcionar juntas, embora esta tenha algum código comentado, mas deve funcionar bem.
O que eu tentei:
title = "' '"
Olá Senhor, posso dizer que este é um dos seus melhores snippets? Talvez!?
Obrigado, fico feliz em ver que você gosta do snippet.