Corte fácil de miniaturas de post?

32

Existe uma maneira de permitir que meus usuários definam a área de corte de uma miniatura de postagem? As miniaturas sempre são anexos de postagem existentes. Prefiro não criar um anexo extra por miniatura.

As miniaturas da postagem devem ter 200 x 100 pixels e provir de uma das imagens usadas na postagem. Portanto, no meu mundo ideal, quando você clica no link "Definir imagem em destaque", obtém uma visão geral das imagens já incluídas e, quando clica em uma delas, pode definir a área de corte (movendo ou redimensionando, mas mantendo a proporção de 2x1). Quando você clica em "OK", a nova miniatura da postagem é salva com o anexo original (no _wp_attachment_metadata['sizes']['post-thumbnail']campo de metadados, por exemplo), não como um novo anexo. O uso de uma imagem que já é usada como miniatura da postagem para outra postagem não deve ser permitido, ou pelo menos dar um aviso.

Acredito que o editor de imagens incluído não atenda às minhas necessidades, pois você pode optar por editar todas as versões da imagem ou a miniatura normal, mas não apenas a miniatura da postagem. Também acho um pouco confuso saber quais versões estou editando, então acho que meus usuários terão ainda mais problemas com isso.

Existe um plugin que faça o que eu quero ou que possa ser facilmente estendido às minhas necessidades?

Atualização: UI de exemplo

Gosto muito da interface do seletor de imagens do Catálogo de endereços do Mac OS X: você seleciona uma imagem e redimensiona um cortador de miniaturas de proporção fixa por meio de um controle deslizante. Você também pode arrastar a imagem base. Você pode expandir essa ideia para vários tamanhos de imagem (eu tenho um post-thumbnaile post-thumbnail-1/2é metade desse tamanho, por exemplo). Deixe o usuário selecionar os tamanhos que ele está editando agora com caixas de seleção e desenhe os retângulos de corte apropriados na tela.

O cortador de imagens do Catálogo de endereços em ação

plugin-recommendation images post-thumbnails Jan Fabry
fonte
1
@ Jan Fabry - Meu primeiro projeto pago do WordPress foi um plugin para cortar imagens, antes que o recorte viesse no WordPress. Foi significativamente diferente do que você solicitou ou o incluiria como resposta. Mas o que você quer não deve ser muito difícil de escrever, se você está motivado ...
MikeSchinkel
1
@ Mike: Vi isso uma vez no seu site e esperava que estivesse disponível em algum lugar. Mesmo que não marque todos os itens da minha (extensa) lista de desejos, poderia fornecer um bom começo.
Jan Fabry
@ Mike - Eu também ficaria muito interessado em revisar qualquer código que você possa ter criado ou modificado relacionado ao corte de imagens. Eu estava procurando desesperadamente adicionar jcrop a um metabox personalizado, o que permitiria adicionar e cortar imagens enquanto ainda utilizava a galeria de mídia integrada do wordpress.
NetConstructor.com
Hey, @Jan Fabry e @ NetConstructor.com - Acabei de revisar o código e, como foi meu primeiro plugin para o WP, fico com vergonha de liberá-lo, é tão ruim assim. Eu adoraria trabalhar em uma solução mais recente para o lançamento aqui, mas que poderia ser um tempo ...
MikeSchinkel
Não seja tímido, Mike, o código mais antigo sempre é ruim aos olhos do escritor. Isso é apenas progresso :). @ Jan - no seu exemplo de interface do usuário, parece-me que o tamanho da miniatura da postagem é de alguma forma predefinido. Você pode dizer mais sobre isso?
hakre

Respostas:

11

O código ainda está uma bagunça, mas parece funcionar, mesmo no IE 8. Planejo liberá-lo no repositório, mas, enquanto isso, você pode jogar com a minha versão atual . Para acessá-lo, clique em "Editar imagem" ao adicionar ou editar uma imagem, substituindo o editor de imagens usual (eles são muito difíceis de combinar). Como a maior parte da área administrativa usa a miniatura regular e minha versão atual edita a miniatura da postagem, pode parecer que o código não tem efeito, mas tente exibindo uma miniatura da postagem e você deverá vê-la mudar.

Esse plug-in requer o meu On-Demand Image Resizer , que também é uma bagunça, para fazer o redimensionamento real.

Exemplo de imagem no cortador

Jan Fabry
fonte
código pronto para lançamento ainda? talvez github isso? Estou morrendo de vontade de integrar a funcionalidade como esta na minha caldeira
Mild Fuzz
Também estou muito interessado no que / como você fez isso! Por favor, compartilhe o código. Seu código funciona usando a biblioteca de mídia padrão do wordpress e permite criar uma metabox simples na tela pós-edição, onde você pode chamar uma imagem específica E copiá-la apenas para um tamanho específico que você criou, como "new_thumb", conforme definido através de algo como add_image_size ('new_thumb', 200, 100, true) ;? A situação ideal seria ter algo parecido com o criador da imagem do cabeçalho com a capacidade de alterar cada tamanho de imagem definido com base em metaboxes individuais para cada tamanho definido.
NetConstructor.com
@JanFabry você já lançou esse código como um plug-in? Eu adoraria recomendar a alguém que precisa dessa funcionalidade!
Chip Bennett
@ jan-fabry Como foi essa função? Algum sucesso?
Steven
4

Sua melhor aposta é usar um corte de imagem baseado em javascript e depois o php combinado com o ImageMagick ou o Image GD.

Teria que ser escrito em suas funções ou como um plug-in, pois não conheço nenhum plug-in wordpress disponível no mercado, o que é surpreendente.

Há um corte de imagem YUI com opção de salvamento baseada em php http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

Aqui está um tutorial diferente sobre como usar um cortador de jquery com o php
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

Uma terceira opção muito semelhante ao link acima, usando o mesmo cortador jquery, mas um código diferente. http://www.leonkessler.com/blog/?p=132

Aqui está outro usando o jcrop do jquery, http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

Quem quer um novo plug-in, isso certamente seria popular :)

Wyck
fonte
Já existe um código de corte de imagem (HTML, JS e PHP) no núcleo do wordpress. Eu acho que um bom plugin reutilizaria isso. Não é uma obrigação, apenas dizendo isso. Você está certo sobre o fato de que a interface do usuário de exemplo desenhada por Jan precisa de algo assim.
hakre
@hakre, o último ao qual Wyck está vinculado é o jcrop, que foi integrado ao núcleo wp em 2.8 . Lembro-me de ler sobre isso naquela época, mas não consigo encontrar nenhuma informação sobre ele sendo realmente usada, exceto um plug-in no repositório que, por todas as contas, está quebrado.
Matt
@matt: se ele foi integrado ao núcleo (eu não sei todas as especificidades sobre a interface do usuário de colheita no núcleo agora que está lá), presumo que ele seja usado para o recurso de interface do usuário da imagem principal. Esse recurso não está disponível o tempo todo, mas apenas se determinadas bibliotecas de imagens do sistema ou PHP estiverem disponíveis. Desculpe por ser tão inespecífico, mas é só que eu não participei da implementação principal até agora. Mas eu sei que há um;)
hakre
1

Supondo que você já tenha adicionado suporte para miniaturas posteriores, enquanto fala da opção "Imagem em destaque".

Nesse caso, você tem uma opção para adicionar um novo tamanho de imagem à matriz de upload. Então, por padrão, você tem miniatura, média, grande. No código a seguir, isso adiciona uma quarta imagem a essa variedade, com base no tamanho que você deseja. Este pedaço de código seria adicionado ao seu arquivo functions.php.

add_image_size( 'new_thumb', 200, 100, true );

"new-thumb" = o nome da nova imagem personalizada
"200" = largura
"100" = altura
"true" = opção de recorte rígido. Isso forçará uma imagem a ser cortada na largura / altura definida. Sem, apenas aumenta para proporção.

Agora, para exibir a nova miniatura em uma página ou matriz de postagem, insira o seguinte no seu HTML

<?php the_post_thumbnail('new_thumb'); ?>

fonte
@ cnix: Obrigado por esta resposta, mas não é o que estou procurando. Quero uma maneira de o usuário final definir a área que deve ser cortada, não eu como designer do site. Portanto, a área pode variar de imagem para imagem.
Jan Fabry
1

Você pode usar CSS para ter grande flexibilidade, corrigir miniaturas no seu tema (se desejado) e evitar confusão de arquivos:

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Lembre-se de que toda a imagem será carregada; portanto, não use seus originais de 3 MB para isso.

Atualização conforme solicitação de janeiro: se você deseja recorte dinâmico, considere:

  • Para usuário = administrador, crie CSS via PHP; você pode simplesmente conectar-se ao php que lê as configurações apropriadas e ajustar os parâmetros de recorte de acordo.
  • Para user = visitor, use JavaScript para alterar os parâmetros de recorte no atributo de estilo da imagem.
  • Como uma solução menos invasiva, considere criar um código de acesso (através do ótimo plugin Shortcode Exec PHP) como [thumb w = ?? h = ??] url [/ thumb] que você pode traduzir para a tag HTML apropriada com CSS embutido.
Rafael
fonte
De fato, você pode fazer o corte via CSS para evitar vários tamanhos, mas como você deixaria o usuário (autor da postagem) definir a área de corte que deve ser mostrada?
Jan Fabry
Veja as edições acima.
Raphael
Obrigado pelo seu esclarecimento. Isso pressupõe que o usuário conhece os locais de pixel da área de corte desejada? Na verdade, estou procurando uma maneira mais gráfica (como o editor de imagens atual, mas direcionado para postar miniaturas e não miniaturas regulares).
Jan Fabry
Espero que você pretenda que este seja um plugin, não um hack. Você pode fornecer algumas opções padrão que devem ser suficientes na maioria dos casos: cantos, centro, centralizadas nas arestas e assim por diante (todas facilmente calculadas). Eu evitaria oferecer entrada gratuita, já que as pessoas podem atrapalhar muito o fluxo do site se entrarem porcaria. Oferecer um definidor gráfico de clipe (veja Zenphoto para implementação) é bom, eu acho, mas os princípios de como usar os valores, por mais obtidos que sejam, permanecem os mesmos; você apenas precisa criar a GUI. Isso não posso ajudá-lo.
Raphael #
1

Existe um plug-in mais antigo chamado WP Post Thumbnail que às vezes usamos. Não é perfeito, e existem alguns pequenos bugs com a versão mais recente do WP (não é atualizada desde 2008, portanto não é necessariamente confiável). http://wordpress.org/extend/plugins/wp-post-thumbnail/

gabrielk
fonte
1

Acredito que você esteja procurando por isso: http://wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

Eu não tentei isso, mas deve oferecer a funcionalidade que você está procurando.

A página original do plugin aqui. http://wordpress.org/extend/plugins/scissors/

Também estou precisando disso para um projeto em que estou trabalhando.

tomcat23
fonte
Obrigado pela sugestão. Eu olhei para o Scissors (e sabia que alguém o atualizou para o 3.0), mas acho que é muito flexível para o que eu quero: deve um aparador que recorte para um tamanho predefinido. Tesouras podem fazer muito mais e, portanto, podem confundir meus usuários finais.
Jan Fabry
1

Eu acho que a solução definitiva para esse problema seria modificar o plugin em http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/

e personalize-o para que qualquer tamanho de imagem personalizado definido em seu arquivo functions.php (use add_image_size( 'new_thumb', 200, 100, true );) seja usado automaticamente e obtenha o código para substituir (ou estender) o link "editar" quando você desejar modificar uma imagem.

Utilizando essa abordagem, o wordpress pode continuar a criar seus tamanhos de imagem aplicáveis, como normalmente faz, mas se você deseja modificar especificamente a área cortada de qualquer imagem específica, poderá fazê-lo, o que, por sua vez, substituirá a imagem gerada automaticamente para esse tamanho. Hmmm ... embora isso pareça uma leitura confusa, é exatamente o que sinto que está faltando.

Atualmente, acredito que o plug-in salva esses tamanhos de imagem personalizados em um campo personalizado dentro de uma postagem em vez de na postagem de uma imagem aplicável.

NetConstructor.com
fonte