Início » Posts do antigo blog » css

Tag: css

crp taxonomy

Melhorando o Contextual Related Posts com Taxonomy Tools

Em outro artigo, eu falava sobre o plugin Contextual Related Posts, uma adição indispensável a qualquer site construído com WordPress, que exibe posts relacionados àquele que o leitor está vendo. É uma ferramenta essencial porque prende o leitor, fazendo-o navegar de um artigo a outro dentro do mesmo site, gerando vários e vários cliques.

crp taxonomy

Bom. Mas o CRP às vezes torna-se bem irritante, já que os posts “relacionados” muitas vezes pertencem a categorias diferentes e têm em comum, apenas, algumas palavras muito usadas – não o assunto em si.

Mas e se fosse possível limitar o conceito de “related” a algo controlável, como categorias ou tags?

Pois bem. Com o uso do CRP puro, isso não pode ser feito. Para isso, precisamos de um segundo plugin, o CRP Taxonomy Tools.

Trata-se de uma mera adição ao plugin original. Sua instalação é semelhante, e na verdade, se vocês já leram meu artigo anterior, já sabem que com o Plugin ativo basta clicar em Configurações, e depois em Related Posts, para abrir a tela de configuração do Contextual Related Posts.

É aqui que o novo plugin se faz visível. Ele adiciona novas opções. Especificamente, essas aqui:

crp taxonomy

Em “Fetch related posts only from”, podemos escolher se queremos limitar os posts relacionados àqueles que pertencem à mesma categoria, ou que têm as mesmas Tags (as palavras-chave que colocamos no post quando o criamos, para facilitar a vida dos mecanismos de busca levando o site a bombar no Google).

Podemos escolher as duas coisas, inclusive. Elas não são excludentes. 

Na opção abaixo, “Taxonomy Matching”, temos a opção de uma associação mais radical, relacionando apenas posts que sejam exatamente iguais nos itens selecionados acima (da mesma categoria, com exatamente as mesmas tags, ou ambas as características). É uma opção realmente extrema, para sites com montanhas de posts, e eu não consigo imaginar que possa ser útil ao blogueiro comum.


 

E é isso. Com CRP e sua extensão Taxonomy Tools, podemos exibir finalmente uma lista de assuntos que o leitor do artigo que está na tela irá, com certeza, ter interesse ler. E assim, fazemos com que nossos leitores “se percam” dentro do site, lendo artigo atrás de artigo, o que é bom para todo mundo: leitor, blogueiro e anunciantes.

Espero ter ajudado. Continuem ligados porque, sempre que dá um tempo, trago aqui novas dicas. WordPress é vida (mas já havia vida antes dele, que fique claro).

Até mais!

crp-menu-900x300

Código CSS para deixar o Contextual Related Posts mais bonito

Boa noite, leitores amantes do WordPress. Hoje, falaremos de um Plugin muito popular entre wordpresseiros: o Contextual Related Posts, utilizado para exibir aquela pequena relação de matérias que têm algo a ver com a que o usuário acaba de ler.

Pois bem: o Contextual Related é um dos melhores plugins para isso, pois é leve e adaptável. O problema é que ele não é muito bonito. Felizmente, é customizável. Eu deixei o meu com a seguinte aparência:

menu1

Quando o usuário passa o mouse sobre uma das matérias, eis o que acontece:

menu2

Gostou?

Então, agora vamos construir isso, passo a passo.


PASSO 1 – INSTALAR O PLUGIN

Essa é a parte mais fácil. Abra “Plugins”, “Adicionar Novo”, e em seguida, busque pelo nome, “Contextual Related Posts”. Instale o plugin. Agora, seu painel tem uma nova opção dentro de “Configurações”. Abra.

menu3  


PASSO 2 – CONFIGURAÇÕES MANUAIS

Com a tela “General Settings” devidamente aberta pela clicada do passo anterior, vamos uma série de opções para escolher. Uma delas, “Number of related posts to display” é muito interessante, porque nos permite escolher quantos posts relacionados vamos mostrar ao final de cada matéria.

O centro da nossa atividade de hoje, no entanto, é “Thumbnal Options”, porque aqui vamos modificar o tamanho e a forma das imagens que serão exibidas para chamar leitores para o próximo post.

Primeira parada, opções básicas:

menu4

Aqui é importante notar que eu marquei “Display thumbnails inline with posts, before title”, e depois, na opção de tamanho, “Custom size”.

Hora de correr a tela para baixo um pouco.

Agora, vem a hora mais importante antes do código.

menu5

Aqui, temos uma coisa importante: eu escolhi a largura e a altura das figuras de thumbnail, e marquei a checkbox do “crop mode” para obter um “hard crop”. Ou seja, o plugin vai ficar uma largura e altura de caixa, botar a foto de destaque da matéria centralizada nessa caixa, e cortar os cantos.

Com isso, não teremos deformações nem imagens espichadas ou esquisitas.

A opção “image size attributes” é praticamente irrelevante. Só não escolha “No html or Style”, porque daí não funciona mesmo.

DICA LEGAL: se você, assim como eu, tem a mania de escrever títulos longos e quer evitar que eles sejam cortados no “related”, modifique “Limit post title length (in characters)” para o número de caracteres desejados antes do corte. Esta minha customização foi desenhada para títulos até 95 caracteres, então, pode tacar-le pau na criatividade.


PASSO 3 – O CÓDIGO CSS

Dentro da caixa “Styles”, marque “No styles”, porque nós vamos adicionar um código CSS na caixa logo mais abaixo. O código CSS que criei, e que é uma versão modificada do original, que vem com o plugin:

crp_related {
clear: both;
margin: 10px 0;
}
.crp_related h3 {
margin: 0 !important;
}
.crp_related ul {
list-style: none;
float: left;
margin: 0 !important;
padding: 0 !important;
}
.crp_related li, .crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: center;
}
.crp_related li {
margin: 5px 5px 5px 0 !important;
border: 1px solid #ddd;
padding: 0;
background:#eee;
}
.crp_related li:hover {
background: #eee;
border-color: #bbb;
}
.crp_related a {
width: 135px;
height: 200px;
text-decoration: none;
}
.crp_related a:hover {
text-decoration: none;
}
.crp_related img {
margin: auto;
}
.crp_related .crp_title {
position: absolute;
min-height:80px;
height: inherit;
bottom: 6px;
left: 0px;
padding: 3px;
/* width: 144px; = 150px – (3px * 2) */
color: #000;
font-size: 1em;
line-height:110%;
text-shadow: 1000 .1em .1em .2em;
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 1);
}
.crp_related li:hover .crp_title {
color: #fff;
font-size: 1.1em;
font-weight:bold;
height:100%;
top:0;
bottom:0;
background: rgb(0.2, 0.2, 0.2);
background: rgba(0, 0, 0, 0.8);
}

.crp_related .crp_thumb, .crp_related li, .crp_related .crp_title {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}

.crp_clear {
clear: both;
}

Para quem entende um pouquinho sobre CSS, o código acima é bastante compreensível. “.crp_related li”, por exemplo, é a caixa que abriga cada related post. Ela tem um Padding, que pode ser alterado para dar uma distância entre o miolo (foto e título), e as bordas. Já “.crp_title ” é a caixinha com o título de cada matéria, que aparece novamente sob “hover”, com as propriedades dela quando o mouse passa por cima.

As cores estão definidas em RGBA, como em “rgba(0,0,0,.4)”, que para quem não conhece, significa o seguinte: os três primeiros números são as quantidades de cada cor (vermelho, verde e azul), que vão de 0 a 255. O último numeral vai de 0 a 1, e indica a opacidade do objeto (0 o torna invisível, 0.5 o torna meio transparente e 1 o torna sólido).

Note que “.crp_related img” não tem nada de parâmetro algum. É que as imagens já foram trabalhadas pelo código que será gerado pelo plugin seguindo as instruções que demos lá atrás.


PASSO 4 – THUMBNAILS DINÂMICOS

Um inconveniente de usar este Plugin é que, quando modificamos o código CSS, o site já gerou imagens de thumbnail para os posts relacionados. Assim, nunca visualizaremos os resultados de nosso lindo código.

Seria tão bom se o site gerasse esses thumbnails dinamicamente, né? Pois é. Para isso, temos que baixar o Plugin “OTF Regenerate Thumbnails“.

E… pronto!


ATUALIZAÇÃO: os critérios de relacionamento entre posts ficam bem melhores usando CRP Taxonomy Tools, que eu explico em outro artigo!

 

redimensionando

PHP, CSS, HTML: corte dinâmico de imagens para exibição usando Overflow


Digamos que eu esteja construindo um site em PHP no qual o cliente deverá publicar notícias e atualizações.

Cada post que escrevemos tem uma imagem de exibição diferente, e cada imagem tem seu tamanho. O problema é quando a capa do site tem um espaço definido para exibir a tal foto de capa, e não queremos que ela fique deformada. Mas tem como fazer, e é simples.

redimensionando

O cenário é conhecido: o site fictício Jornaloso.Com faz uma matéria sobre enchentes, e bota uma foto em formado “paisagem” (1000 pixels de largura por 600 de altura). Ela exibe perfeitamente na capa do site, que tem uma “manchete” acompanhada de uma imagem. Porque lá na capa, foi definido o tamanho 500X350 para a imagem, e a foto da enchente fica bonitinha.

Só que daí o Jornaloso entrevista a socialite Maria Rica, e ela insiste em aparecer em uma foto no formato “retrato”, ou “em pé”, que tem 700 pixels de largura por 1000 de altura. Pronto. Vai sair deformada na capa.

Ou não.

Vamos ver agora como fazer isso funcionar.


A PRIMEIRA COISA: OVERFLOW

O primeiro passo é extremamente simples, e requer conhecimentos rudimentares de CSS. Lá na capa do site, vamos usar uma DIV para conter a foto que vamos exibir. Esta DIV terá um atributo “overflow” definido para “hidden”. Ou seja, vamos definir uma altura e largura para a DIV, e qualquer coisa que ultrapasse o tamanho dela sumirá.

<div style=”width:500px; position:relative; float:left; height:350px; overflow:hidden;”>
        <img src=”imagemdacapa.jpg”>
</div>

O problema com o código acima é que, se temos uma foto de 700×1000, como é o caso, e o espaço é de 500×350, o resultado final será um corte “de canto” da imagem.

Uma solução possível, ainda sem usar NADA de PHP ou de outra coisa qualquer que não seja CSS e HTML, é forçar uma largura para a foto. Isso resolve mais ou menos bem o problema para imagens “em pé”, porque normalmente veremos a parte de cima dessas imagens.

corte_com_width_e_sem

Só que, quando colocamos imagens “deitadas”, elas ficarão parecendo aqueles filmes gravados para cinema e exibidos na TV de tubo: uma imagem com faixas pretas em cima e embaixo (claro, a cor dessas faixas, podemos definir adicionando um atributo “background” à DIV).

Fora isso, temos outro problema: em muitas fotos “em pé”, de pessoas, a caixa exibirá o topo da cabeça do retratado.

Caso optemos por definir um “max-height” e um “max-width” para todas as imagens, então as imagens “em pé” ficarão com espaço ao redor, e as imagens “deitadas” ficarão com espaço no alto e abaixo. É um saco. O ideal seria termos a imagem preenchendo o campo, e a DIV exibindo o centro da imagem, na pior hipótese.


A SEGUNDA COISA: CENTRALIZANDO

Agora vamos ter que usar um pouquinho de PHP. Mais especificamente, a função “getimagesize”, que nos dá duas informações muito importantes: a altura e a largura da imagem. Usando logo depois um “if”, podemos ter dois modos de redimensionamento: um para imagens “em pé” e outro para imagens “deitadas”.

$dadosdaimagem = getimagesize($urldaimagem);

 

$largura = $dadosdaimagem[0];

 

$altura = $dadosdaimagem[1];

 

$larguraexibicao = ($largura*350)/$altura;

 

if ($larguraexibicao >= 500) {

$margem = ((($larguraexibicao-500)/2)*-1);

 

        echo ‘<div style=”position:absolute; height:290px; left:’.$margem.’px;'”>

 

                <img src=”‘.$urldaimagem.'” style=”height:350px;”>   

 

        </div>’;

 

} else {

 

        echo ‘<img src=”‘.$urldaimagem.'” stye=”height:350px; text-align:center;”>’;

 

}

Agora, olhe o código acima. Dentro do IF é que está o pulo do gato: a largura de exibição já foi calculada, usando como base a imagem já “redimensionada” para a altura de 350 pixels. Bom. Caso a lagura seja maior do que 500 (ou seja, estamos lidando com uma imagem mais “comprida” do que “alta”), então, surge a variável $margem.

Esta variável terá como valor a nova largura da imagem, MENOS a largura do painel, dividido por dois. Isso quer dizer que, se a imagem ia ter 700 pixels de largura, menos 500, dá 200, e $margem terá 100. Quando formos exibir a imagem larga dentro da DIV com overflow, portanto, teremos um corte de 100 pixels à direita, e 100 pixels à esquerda, centralizando esta imagem.

Dentro o DIV que tem overflow, eu crio OUTRO div, com position ABSOLUTE (ou seja, uma posição absoluta em relação ao DIV “pai”, aquele com overflow). E neste DIV de posição absolute, eu defino um atributo LEFT, ou seja, uma posição dele à esquerda, tendo como ponto ZERO a margem esquerda do DIV pai, aquele do overflow. Como eu tinha definido o valor de $margem como um número negativo, isso vai “puxar” o canto esquerdo do DIV absolute para fora da área exibida pelo DIV dentro do qual ele está. Como estamos falando de um DIV com “overflow: hidden”, este canto será “cortado”. E o centro da imagem será exibido.

Bom.

Neste meu exemplo, o ELSE, ou seja, a subrotina que trata de imagens “em pé” é bem mais simples e não tem toda essa complicação de margens calculadas. É que, quando eu exibo uma foto vertical, eu vou deixar os cantos vazios ao redor dela. Mas é possível, caso alguém queira, fazer o mesmo procedimento das fotos “deitadas”, definindo a largura da imagem (widh) para 500 e fazendo o corte (com uma DIV absolute), usando um cálculo de margem quase igual, mas centrado na altura, e cortando o topo e o pé da foto (ao invés de definir “left”, define-se “top”).

 

Só que, daí, há o risco de, em uma foto de pessoa, cortarmos a cabeça e as pernas, e exibir a barriga do fotografado. Nunca fica 100% bom. Melhor deixar as fotos “em pé” com cantos pretos ou coisa assim. Falo por experiência. Mas sintam-se livres.