Galeria de imagens sem plugin no Wordpress | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Galeria de imagens sem plugin no WordPress

Publicado na categoria Artigos com 4.957 visualizações e 8 comentários

Olá!

Estive numa briga danada para conseguir colocar alguns efeitos em imagens nos sites que desenvolvo em WordPress. Não sei se é somente comigo, mas tirando o plugin NextGen Gallery, eu só levo surras ao tentar trabalhar com algum efeito do estilo Lightbox utilizando plugins.

E põe surras homéricas nisso. Acho que o plugin olha pra minha cara e já sai berrando …

king-leonidas-this-is-sparta-300-1920x1080

Minha batalha

O que acontecia era o seguinte: eu buscava na internet alguma ajuda dos gringos que manjam demais de WordPress. Aqueles caras que criam funções absurdas e por incrível que pareça, disponibiliza o conteúdo para a comunidade.

Esses caras vão pro céu!

Mas, voltando ao assunto, o que acontecia era o seguinte:

O que eu precisava?

Keyboard_Help

Eu precisava de ajuda.

De alguma maneira, precisava dar um jeito de inserir automaticamente uma “classe” quando o usuário fosse publicar alguma imagem no site dele. Para ativar o efeito de imagens do Fancybox que eu resolvi colocar “na unha” no WordPress, o LINK do arquivo necessitava ter uma classe, ou algo que eu pudesse acionar no arquivo JavaScript responsável por iniciar tal efeito.

E eu poderia fazer isso via código? Sim, claro que sim.

Mas eu vendo sites gerenciáveis pelo cliente, e digo ao mesmo que é “fácil” sua manutenção”!

Eu NÃO POSSO (na realidade, eu não admito fazer isso!) dizer a ele para entrar “no código do seu artigo e lá nos links você vai digitar class=’o_mane_do_desenvolvedor_nao_sabe_ fazer’ em cada link de imagem que aí o efeito é acionado” …

As besteiras que eu fiz

dumb

Eu fui mexer lá no arquivo media.php, conforme instruções em alguns sites que apenas replicam a solução dada por outrem. E aí então começou o purgatório pro meu lado!

Quando eu incluía a imagem “solta” no conteúdo, a classe era setada (êêêêêêêêêêêêêêêêêêêêêêêêêêêêêêêêêê) e o efeito era ativado. A imagem então foi exibida de acordo com o efeito e funcionou bonitão!

E eu lá, mexendo no media.php … feliz da vida o bestão aqui!

Então, fui eu criar as galerias de imagem! Configurei o JavaScript para acionar a galeria, e para minha surpresa, depois de ter mexido onde não devia (media.php – saporra de arquivo vai me assombrar por um bom tempo!) , acontecia o seguinte: a primeira imagem da galeria LINKAVA PARA O ARQUIVO … funcionava o efeito; as demais, o LINK DIRECIONAVA para a PÁGINA DE ANEXO …

Em outras palavras, o efeito ativa a primeira foto e o restante, abria-se em páginas diferentes!

Acabou a energia …

rawz

E eu precisava duma luz!

Entrei no grupo do WordPress Brasil lá no Facebook, coisa que eu infelizmente não gosto muito não. “Fui criado” no Fórum de um grupo de educadores na área de webdesign e lá nosso intuito era sempre de ajudar a quem perguntava algo … não é crítica ou reclamação, mas sempre que alguém pede ajuda nesse tal grupo a turma que manja manda o cidadão “Ler o Codex” … Pra mim, é quase o mesmo que estar perdido numa cidade e perguntar prum cidadão onde fica o endereço procurado … e o cara te responder “Compre um mapa”!

Eu entendo que existam pessoas folgadas que apenas querem tudo pronto, enquanto outras apanham mas tem interesse em pesquisar e aprender.

O que eu acho que falta ao grupo é “discernimento para saber diferenciar entre ambas situações” …

Mas lá alguns que tentaram me ajudar disseram para NUNCA mexer no core do WordPress. E eis então que um cara soltou: “Você não atualizou a plataforma”?

Aí complicou realmente: eu mexi no core do WordPress e na próxima atualização, as modificações seriam reescritas e o site do cliente não funcionaria do jeito que eu havia pensado.

Então, a luz veio e criei um arquivo chamado functions.php e inserir ele na pasta do meu tema. Aí o WP não vai sobrescrever mais nada.

Voltei o arquivo media.php ao seu original (estou usando aqui a versão 4.0 – Benny) e aí tudo funcionou a contento e bonitão. As galerias voltaram a apontar para o arquivo de imagem e não para a página de anexo.

A solução encontrada foi …

solution

functions.php

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!--?php </p>
<p>/**<br ?--> * Attach a class to linked images' parent anchors
* e.g. a img => a.img img
*/
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
$classes = 'insira_aqui_sua_classe_para_imagens_no_conteudo'; // separated by spaces, e.g. 'img image-link'

// check if there are already classes assigned to the anchor
if ( preg_match('/<a.*? class=".*?">/', $html) ) {
$html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
} else {
$html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" >', $html);
}
return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);
function custom_attachment_fields_to_edit($form_fields, $post) {

$form_fields["image_url"] = '';
$form_fields["url"] = '';

$form_fields["url"]["input"] = "hidden";
$form_fields["url"]["value"] = wp_get_attachment_url($post->ID);

return $form_fields;
}
add_filter("attachment_fields_to_edit", "custom_attachment_fields_to_edit", null, 2);

function my_get_attachment_link($html) {
$postid = get_the_ID();
$html = str_replace('<a', '<a id="para_galeria_de_imagens" data-fancybox-group="efeito_que_quer_aplicar"></a> }
add_filter('wp_get_attachment_link', 'my_get_attachment_link', 10, 1);
?>

E então, foi assim que eu resolvi o problema dos efeitos de imagem para poder entregar um site a contento para meu cliente!

Só preciso agora acertar outros 3 projetos que quebrei a cabeça e deixá-los também funcionais!

Espero que isso ajude a todos, e que não tenham mais que apanhar como eu apanhei para conseguir fazer funcionar o negócio!

E o Fancybox pode ser baixado nesse link, junto com sua documentação e efeitos possíveis de serem aplicados!

Abraços!

Voltar à página anterior!

  • navarro

    Olá André. Fui add essa função que você sugere ao meu wp e meu site saiu do ar apresentando o erro 379.

    Tem alguma solução para o meu problema?

    Abç

    • Olá Navarro!

      Cara, isso não é problema do código. Isso provavelmente é algum problema de servidor. Você já conseguiu resolver?

      Abraços!

      • navarro

        Consegui sim!

        O que aconteceu foi que eu dei um espaçamento inicial no meio do código.
        Tive que reinstalar o tema.

        Obrigada! :)

        • hahahahahaha …acontece Carolina!

          Mas que bom que deu tudo certo!

          Abraços!

  • Adorei o post! *-* Sou dev Front-End, adoro wordpress, mas nem manjo de programação e tal para fazer essas coisas “na unha”… haha eu estive pesquisando (e sem nenhum sucesso) sobre como modificar a galeria do wordpress. Queria poder remover o que ele gera, pois isso me atrapalha na hora de usar responsivo… mas não consegui descobrir nenhuma maneira de alterar essa estrutura. Você tem alguma ideia de como adaptar a galeria para ser responsiva sem uso de plugins?

    • Fala Li Garone!

      Olha … eu costumo “fazer na unha” meus temas no WordPress, e uso o Bootstrap para deixá-lo responsivo.

      Nesse exemplo que dou no artigo, eu ainda uso a galeria nativa do WordPress e não tenho problemas quando preciso ver o site em celulares ou tablets … eles “obedecem” pois o site é responsivo … veja um exemplo: http://oabitu.org.br/entrega-das-carteiras-oab/

      E eu também apanhava para entender o que era esse tal de “functions.php” dentro do WP .. mas depois que você pega a manhã … .vixe …. rs

  • Jeferson Valério

    Show de bola André comecei a mexer agora com WP valeu pela dica… ;)

    • Fala Jeferson!

      Cara … que surra para conseguir acertar esse esquema … mas deu certo!

      Abraços!