Testando o plugin Demon Image Annotation para WordPress

Este post possui recursos que pode ser complicado ou impossível acessar na versão mobile do blog e/ou com uma touchscreen. Versão desktop e mouse recomendados.

Como uma imagem vale por mil palavras, melhor começar passando o mouse sobre a imagem abaixo:

switch_hdmi_td-link_pcb_topo_DSC01564_640_ryan.com.br

Se nada aconteceu, me avise nos comentários dizendo que browser e versão você está usando.

Essa minha necessidade não é nova. Quem me acompanha desde o review do DVP642 sabe que eu tinha o hábito de comentar as fotos que publicava. Na época eu só precisava adicionar a biblioteca javascript overlib e, a parte mais chata do processo, criar um image map de cada imagem com os comentários. Esse processo era apenas parcialmente visual e um tédio por isso eu não lamentei muito quando minha mudança para o WordPress  me impediu de continuar usando-o.

O processo com overlib além de ser um tédio tinha o inconveniente de que você tinha que passar com o mouse sobre cada ponto da imagem à procura de comentários. Como se pode ver esse problema não existe com o plugin Demon Image Annotation (DIA), que mostra imediatamente todos os pontos comentados. E mais: eu posso demarcar e adicionar notas de forma totalmente visual. Ao contrário da overlib, que eu usava quase a contragosto, está sendo um prazer usar DIA.

Mas eu só posso dizer isso agora que DIA está funcionando. Eu venho há semanas (esporadicamente, é claro) apanhando para fazer o plugin funcionar neste blog. Ele funcionou imediatamente em outros de meus blogs onde instalei só para tirar a dúvida mas aqui sequer ele parecia instalado. Agora parece estar OK mas não estou certo do que fiz para resolver o problema. Quando eu testei da última vez há umas duas semanas não funcionava e quando testei ontem estava funcionando. Cache do wordpress? Erro meu? Não sei.

Notas para leitores:

  • Ao passar o mouse sobre a imagem ela é imediatamente alinhada à esquerda e não volta mais para o alinhamento central. Isso é coisa do plugin e não sei resolver;
  • O plugin permite que até vocês leitores façam comentários sobre as imagens. Mas como eu não consegui ver a utilidade disso para o tipo de imagem que publico, achei melhor desabilitar o recurso. Se eu estivesse fotografando paisagens ou “arte” eu acharia mais útil. Porém se conseguirem me apontar a utilidade eu poderei rever isso. No site do desenvolvedor existe um live demo mostrando como isso funciona;
  • O meu nome aparece em cada um dos comentários devido a essa característica “colaborativa” do plugin. Não há opção para desativar essa exibição, mesmo com apenas uma única pessoa comentando.

Notas para interessados em usar o plugin no próprio blog:

  • Infelizmente o autor não atualiza nem o próprio site há três anos e não responde na página de suporte do plugin há um ano. Os problemas encontrados no plugin vão precisar ser resolvidos pelo próprio usuário;
  • Se você copiar a imagem entre posts mantendo o “ID”, todos os comentários acompanham, como acontece na imagem acima. Se eu editar aqui, automaticamente a imagem no post original é editada também.
  • Mesmo você sendo o Admin os comentários adicionados por você caem em uma fila de moderação do próprio plugin. Eles ficam visíveis somente até você atualizar a página e somem. Isso me deixou confuso por vários minutos porque mesmo depois de achar os comentários na fila de aprovação eu não entendi o linguajar do plugin. O que eu achei que estava aprovado na verdade estava “desaprovado”. Aliás parece que quem escreveu os textos no plugin não domina a língua inglesa, conforme nota a seguir;
  • O plugin fica exibindo em todo lugar no dashboard do wordpress o texto “Important: Please update the new version of settings and usage” que dá a entender que você precisa fazer alguma atualização nas configurações. Depois de muito tempo tentando encontrar essa atualização eu estou convencido de que o plugin quer dizer que você deve se “atualizar a respeito” ou “familiarizar” com a nova versão das configurações. Eu escreveria “be aware of” ou “take a minute to review” no lugar de “update”;
  • Se habilitar DIA com ID automático não fizer absolutamente nenhuma diferença visual nas suas imagens, pode estar havendo um conflito com outro de seus plugins;
  • Por default o plugin habilita comentários em todas as imagens. Como isso não é um fotolog e cada imagem com comentários habilitados cria um pequeno problema visual no fluxo do blog eu decidi definir manualmente cada imagem onde os comentários vão aparecer. Para isso é necessário acrescentar manualmente uma atributo à tag da referida imagem. Infelizmente isso pode ser um aborrecimento quando você tem muitas imagens em um texto longo. Como o WP não tem recurso na UI para acrescentar um atributo visualmente, você tem que reverter para o HTML, achar a referência à imagem na munheca e acrescentar o atributo à tag;

 

Eu estou aberto a sugestões de alternativas de anotação de imagens.

 

12/08/2017

Quando pedi ajuda no fórum de suporte do plugin Calculated Fields Form (CFF) para o fato de CFF parar de funcionar ao ativar tanto a versão 3.6 quanto a 3.7 do DIA, o autor gentilmente me mostrou que o autor do DIA cometeu um erro grosseiro. O WordPress vem com sua própria versão da biblioteca Jquery e o autor do DIA decidiu usar outra, mais recente, e em vez de usá-la apenas no seu plugin fez a modificação valer para o blog inteiro.

Isso é muito ruim. Provavelmente diversos outros plugins que eu testara sem sucesso aqui no blog podem ter falhado por causa disso.

O problema está em imageannotation.php

Como se pode ver, nas linhas 5 e 6 o autor desabilita a versão do jquery que vem com o wordpress e habilita uma versão específica 2.1.1 hospedada pela Google. Mais à frente, nas linhas 9 e 10 ele faz o mesmo com uma biblioteca jquery que proporciona interface com o usuário. E mais à frente ele de novo troca as bibliotecas usadas pelo wordpress pelas suas próprias versões, desta vez instaladas junto com o plugin.

O que ele faz nas linhas 5 e 6 é o que provoca o maior dos problemas. Todo autor de plugin (bem, obviamente quase todo ele) espera usar o jquery que vem com o wordpress. Ao fazer essa mudança para acomodar uma necessidade sua o autor de DIA  criou um problema para todos os outros plugins que usam jquery!

A solução imediata é comentar as linhas 5 e 6. Isso deixa a operação do plugin mais lenta mas aparentemente não há outro efeito colateral. Idealmente devemos comentar as linhas 9 e 10 também, mas isso impede a adição de novas notas porque a UI fica sem os botões. Por hora eu vou deixar habilitado mas eu tenho que ter em mente que qualquer problema de UI que eu encontrar ao testar um novo plugin pode ser provocado por isso.

Muitos erros no LOG

Desde 28/07/2016, quando provavelmente eu comecei a fazer meus testes, o plugin está com um problema e eu não havia notado. Encontrei um arquivo wp-admin\error_log com 57MB e mais de 72 mil erros relacionados com uma alteração de tabela mal sucedida:

Erro de banco de dados do WordPress Duplicate column name ‘note_post_ID’ para a consulta ALTER TABLE wp_demon_imagenote ADD note_post_ID bigint(20) NOT NULL AFTER note_comment_ID; feita por do_action(‘admin_init’), WP_Hook->do_action, WP_Hook->apply_filters, call_user_func_array, dia_admin_init, dia_createtable

Um ALTER TABLE só deveria acontecer na instalação do plugin mas às vezes o erro ocorre uma vez a cada segundo! Eu editei o arquivo imageannotation.php comentando uma das linhas que faz um ALTER TABLE e aparentemente o problema foi resolvido:

 

 

25 comentários
  • claudio - 65 Comentários

    Funcionou aqui (Chrome 52.0.2743.116 no Win8.1)

    Mas, eu só percebi isso porque você avisou. Explico: eu leio o blog normalmente no feedly, e só raramente navego para a página. Na visualização do feedly, mesmo aberta, a imagem não tinha anotação nenhuma.

    Nessa caso, sugiro mencionar na legenda quando usares anotações e elas forem importantes para o entendimento do texto :)

    abraços,
    Claudio

    • Jefferson - 6.464 Comentários

      Obrigado pelo aviso. As legendas sempre serão importantes por isso eu sempre vou precisar avisar. O plugin avisa mas acredito que até isso deixa de aparecer no leitor de feeds.

    • Saulo Benigno - 279 Comentários

      É, eu também leio pelo Feedly. Só chego aqui para comentar.

      Só vi o efeito do plugin vindo aqui. Gostei bastante mesmo.

      Mas, alguns problemas que pude imaginar. Como é o funcionamento mobile do plugin?
      E é preciso o leitor sempre clicar na imagem e ficar passando o mouse? Não seria mais interessante na imagem colocar os números de uma cor diferente (tipo amarelo)? Tipo 1 , 2 , 3 em cada lugar e lá embaixo colocar uma lista do que é o que?

      1. barra
      2. corredor
      3. porta

      Complicado… bem, boa a ideia, vai ajudar bastante com certeza os leitores :)

      • Jefferson - 6.464 Comentários

        Mas, alguns problemas que pude imaginar. Como é o funcionamento mobile do plugin?

        Xiii… não pensei em uso com touchscreen.

        Não seria mais interessante na imagem colocar os números de uma cor diferente (tipo amarelo)? Tipo 1 , 2 , 3 em cada lugar e lá embaixo colocar uma lista do que é o que?

        Isso cria três problemas que sempre quis evitar, por isso raramente usei:

        1)Poluição visual, com obstrução da imagem;
        2)Eu vou precisar fazer mais um passo específico na edição da imagem;
        3)Para adicionar itens eu vou ter que editar a imagem de novo. Isso vai me desestimular a publicar as anotações antes de eu ter concluído. Com o DIA, passeando pelo blog eu estou a um clique de editar/adicionar notas e sem nem mesmo precisar abrir o post para edição.

        Eu vou ter que tomar uma decisão sobre o uso com touchscreen. Mas minha opinião geral a respeito disso é contrária a engessar o sistema para atender uma parcela dos casos então a princípio minha opinião é que se você quiser ter acesso à “riqueza” do post, vai precisar usar uma interface “rica”.

        • Jefferson - 6.464 Comentários

          Tentar usar o recurso na versão mobile do blog cria uma bagunça visual, mas eu suponho que isso seja culpa do plugin WPTouch. A versão desktop no celular mesmo com uma touchscreen é “usável”.

  • Claudio - 65 Comentários

    Teste, podes deletar …

    o comentario anterior falhou com o erro abaixo:

    noted on #img-4481-d9184673e6

    Warning: Cannot modify header information – headers already sent by (output started at /home2/jeffryan/public_html/blogs/quicktalk/wp-content/plugins/demon-image-annotation/imageannotation.php:106) in /home2/jeffryan/public_html/blogs/quicktalk/wp-includes/comment.php on line 517

    Warning: Cannot modify header information – headers already sent by (output started at /home2/jeffryan/public_html/blogs/quicktalk/wp-content/plugins/demon-image-annotation/imageannotation.php:106) in /home2/jeffryan/public_html/blogs/quicktalk/wp-includes/comment.php on line 518

    Warning: Cannot modify header information – headers already sent by (output started at /home2/jeffryan/public_html/blogs/quicktalk/wp-content/plugins/demon-image-annotation/imageannotation.php:106) in /home2/jeffryan/public_html/blogs/quicktalk/wp-includes/comment.php on line 519

    Warning: Cannot modify header information – headers already sent by (output started at /home2/jeffryan/public_html/blogs/quicktalk/wp-content/plugins/demon-image-annotation/imageannotation.php:106) in /home2/jeffryan/public_html/blogs/quicktalk/wp-includes/pluggable.php on line 1167

    • Jefferson - 6.464 Comentários

      Obrigado mais uma vez pelo aviso. O problema só ocorre com quem não é admin (ou seja: todo mundo menos eu) por isso eu ia demorar a notar. E como fica claro nas mensagens, é provocado pelo DIA, que não deveria estar interferindo com comentários, principalmente de não-admins, já que eu (supostamente) desabilitei a possibilidade de não-admins adicionar notas com o DIA.

      Ainda bem que o comentário não é perdido, como você percebeu. Outra hora eu vejo se dá para consertar isso ou se vou ter que abandonar o plugin.

      • Jefferson - 6.464 Comentários

        O problema aparentemente foi resolvido. Eu esperava ter que analisar arquivos PHP e editar plugins na munheca, por isso esperei até a noite para analisar o problema, mas foi incrivelmente fácil resolver. Eu havia esquecido habilitada a opção “Comments Thumbnail”. Bastou desabilitar para o problema sumir. Eu testei como leitor anônimo.

  • Fernando Di Ramos - 29 Comentários

    eu gostaria que seu blog tivesse como apertar um botão curtir* para cada postagem, :D

    *é sério.

    abraços

    • Jefferson - 6.464 Comentários

      Até o mês passado, tinha. Eu desliguei vários plugins justamente tentando fazer este funcionar. E praticamente ninguém usava além de mim.

      • Fernando Di Ramos - 29 Comentários

        incrível, lhe acompanho a muitos anos e nunca havia notado a função disponível.

        talvez ela fosse bloqueada pelo ublock-origin (adblock).

        de todo modo, muito obrigado pelo blog, fico feliz que você tem sido mais presente e mais produtivo no blog neste últimos tempos.

        abraços

        • Jefferson - 6.464 Comentários

          Existiam três plug-ins:

          Um para dar um “+” No Google Plus. Aparecia na forma de um ícone flutuante do G+ à direita.

          Um para publicar em diversas redes sociais, incluindo o Facebook. Aparecia na forma de uma lista de ícones de redes sociais;

          Um para dar uma nota para a postagem e para comentários. Aparecia na forma de estrelas vazias.

        • Jefferson - 6.464 Comentários

          Eu reativei o plugin “Sociable”, que permite compartilhar em várias redes sociais. Mas tive que deixar desligado o “GD Star Rating” que permitia dar uma “nota” de 1 a 5 estrelas a cada post e comentário, pois este impede o DIA de funcionar. Como ninguém usava o GD Star Rating mesmo, eu não me sinto estimulado a consertar isso.

          • Fernando Di Ramos - 29 Comentários

            hahaha, saquei. eu não uso nenhuma rede social mesmo, mas marquei no g+ em agradecimento.

            o ublock-origin estava de fato ocultando a barra aqui, tive que desabilitá-lo para seu blog.

            possivelmente o que mais se assemelharia ao que me referi mais cedo fosse o GD Start Rating, xD imaginei algo simples como curtir/não curtir do youtube, talvez exigiria cadastro do usuário no seu site e coisas do tipo. de qualquer forma, muitíssimo obrigado pela atenção e pela intenção de satisfazer seus leitores.

            um forte abraço!

            • Jefferson - 6.464 Comentários

              Eu não espero realmente que meus leitores sejam adeptos de redes sociais, mas uso o Sociable porque “não custa nada”. Infelizmente eu não tenho qualquer feedback da sua utilização então mesmo que fosse massivamente usado por meus leitores eu ainda acharia que ninguém está usando.

              Já a utilização do GD Star Rating eu podia acompanhar.

          • Jefferson - 6.464 Comentários

            Um ano depois, eu finalmente reativei o plugin GD Star Rating.

  • Fernando Di Ramos - 29 Comentários

    off: ao enviar a msg anterior, obtive uma msg me avisando que já havia enviado a msg.

    • Snow_man - 301 Comentários

      também apareceu erro ao postar comentário; voltei para a página anterior e o comentário estava postado.

      • Snow_man - 301 Comentários

        noted on #img-4481-d9184673e6

        Warning: Cannot modify header information – headers already sent by (output started at /home2/jeffryan/public_html/blogs/quicktalk/wp-content/plugins/demon-image-annotation/imageannotation.php:106) in /home2/jeffryan/public_html/blogs/quicktalk/wp-includes/comment.php on line 517

        Warning: Cannot modify header information – headers already sent by (output started at /home2/jeffryan/public_html/blogs/quicktalk/wp-content/plugins/demon-image-annotation/imageannotation.php:106) in /home2/jeffryan/public_html/blogs/quicktalk/wp-includes/comment.php on line 518

        Warning: Cannot modify header information – headers already sent by (output started at /home2/jeffryan/public_html/blogs/quicktalk/wp-content/plugins/demon-image-annotation/imageannotation.php:106) in /home2/jeffryan/public_html/blogs/quicktalk/wp-includes/comment.php on line 519

        Warning: Cannot modify header information – headers already sent by (output started at /home2/jeffryan/public_html/blogs/quicktalk/wp-content/plugins/demon-image-annotation/imageannotation.php:106) in /home2/jeffryan/public_html/blogs/quicktalk/wp-includes/pluggable.php on line 1167

        • Fernando Di Ramos - 29 Comentários

          exato, aparece direto um erro ou outro ao postar, mesmo agora que desativei o ublock-origin para o blog, mas apesar dos erros todas as minhas mensagens foram publicas sem exceção.

          abraços

  • Snow_man - 301 Comentários

    Ok aqui no Chrome Versão 52.0.2743.116 m em um windows 7.
    Gostei da inovação.
    Muito útil para posts como do Home Theater Samsung.

  • Luciano - 464 Comentários

    Aqui funcionou, inclusive com o bug do alinhaento… Firefox ESR 38.5.1 no Windows XP.

  • Alisson Teles Cavalcanti - 76 Comentários

    Safari 9.1.1 (10601.6.17) @ Hackingtosh OSX Yosemite. Tudo funcionando, sem problemas. Mas no app do Feedly, mesmo sintoma apontado por outras pessoas (não funciona, nem retorna erro ou aviso).

  • Jefferson - 6.464 Comentários

    O meu nome aparece em cada um dos comentários devido a essa característica “colaborativa” do plugin. Não há opção para desativar essa exibição, mesmo com apenas uma única pessoa comentando.

    Eu resolvi isso editando imageannotation-run.php

    Lá no final do arquivo mude:

    $json[‘author’] = $author;

    Para:

    $json[‘author’] = ”;

  • Jefferson - 6.464 Comentários

    Estou à procura de um plugin que adicione um campo à galeria de imagens ou ao editor de posts que me permita adicionar facilmente o atributo “id” que esse plugin requer.

Deixe um comentário para Saulo Benigno Cancelar resposta

Você pode usar estas tags HTML

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  

  

  

:) :( ;) O_o B) :lol: :huh: :S :D :-P 8-O :yahoo: :rtfm: :dashhead1: :clapping: more »