Tutoriais

Imagem com largura total do post

Ando recebendo vários emails e comentários pedindo ajuda de como fazer uma imagem ocupar 100% do total de espaço de um post. Então resolvi fazer o tutorial explicando.

Se você não sabe como é uma imagem ocupando 100% da largura do post, dê uma olhada nesse theme exemplo para ter uma ideia.

Para fazer isso é bem simples. Basta adicionar uma class na imagem e configurar essa class para ficar na posição certa. Mas primeiro você precisa saber a largura do seu post e quanto de espaço tem nas laterais dessa largura.

Vou usar como exemplo, o esse theme.

O espaço do post do Honey Pie tem 600 pixels de largura. O espaço nas laterais, para que o texto do post não fique grudado no limite é de 15 pixels. Então o CSS é mais ou menos assim:

.entry {
  width:570px;
  padding:15px;
}

Por que está largura 570 se você disse que é 600? Por que no CSS quando você usa o padding, ele soma isso na largura. Então se você fizer as contas 570 (largura) + 15 (lateral esquerda) + 15 (lateral direita) será igual 600.

Note que no CSS acima está .entry mas no seu código pode ser outro nome. Você precisa descobrir qual class é usada para o espaço do seu post para que possa ver quais são as medidas usadas nela. Normalmente usa .post-body no Blogger e .entry ou .entry-content no WordPress. Mas é bom verificar para ter certeza, por que quem fez o theme pode ter usado outro nome.

Então, sabendo essas medidas, você monta o CSS para uma class que você usará na imagem.
No CSS a class deverá ter largura máxima de 600 pixels e adicionamos um margin-left com os 15 pixels negativo. Esse margin-left negativo vai forçar a imagem ficar 15 pixels para esquerda. Os mesmos 15 pixels do padding, que faz o conteúdo do post não ficar no limite do espaço do mesmo.

Eu costumo fazer com o nome alignnone por que é um dos padrões de alinhamento de imagem no WordPress. Mas se você quiser pode colocar outro nome, só que você precisar lembrar dele na hora que for usar na imagem.

O CSS será assim:

img.alignnone {
  max-width:600px;
  height:auto;
  margin-left:-15px;
}

Adicionei um height:auto no CSS da class para que sua imagem não fique distorcida. E note que os 15 pixels tem um sinal negativo para forçar a imagem para a esquerda.

Feito o CSS da class que quer usar, só adicionar ela sempre na imagem que quer aplicar o efeito.
Então quando adicionar a imagem no post, precisa ser assim:

<img src="http://site.com/imagem.jpg" alt="" class="alignnone"/>

Então só alterar a URL da imagem no código acima. E se você criou uma class com outro nome, altere ela no código também.

Tanto no WordPress quanto no Blogger (e acredito que em qualquer outro do tipo) não funcionará se você adicionar o código da imagem no modo visual. Use o modo HTML para inserir o código da imagem.

E nesse caso, que a largura é de 600 pixels, o ideal é que suas imagens tenha essa mesma largura. Caso no seu código seja 700 pixels, use imagens com essa medida.

Existe outra forma para chegar nesse mesmo resultado, mas essa é a que costumo usar.
Espero ter ajudado.

WordPress

Funções básicas para WordPress

Algumas funções que considero básicas em qualquer theme para WordPress.

Basta adicionar qualquer um dos códigos abaixo no functions.php do seu theme. Verifique antes se não possui a função no seu arquivo functions.php pois se colocar duplicado, pode ser que gere erro no theme.


Ativar opção de thumbnail

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 );

Esse código apenas ativa a opção de thumbnail. Ele não vai adicionar o thumbnail no seu theme. Para isso, leia esse outro tutorial.


Permitir shortcode em widgets

add_filter('widget_text', 'do_shortcode');

Remover meta tag wp_generator

remove_action('wp_head', 'wp_generator');

Se você não remover esse wp_generator fica aparecendo no código fonte do seu theme uma linha de código dizendo qual versão do WordPress você está usando.
Acho inútil isso ficar aparecendo, sem contar que deixa seu blog vunerável para possíveis ataques de hackers.


Remover CSS padrão da Galeria

add_filter('gallery_style', create_function( '$css', 'return preg_replace("#<style type=\'text/css\'>(.*?)</style>#s", "", $css);' ) );
add_shortcode('wp_caption', 'fixed_img_caption_shortcode');
add_shortcode('caption', 'fixed_img_caption_shortcode');
function fixed_img_caption_shortcode($attr, $content = null) { $output = apply_filters('img_caption_shortcode', '', $attr, $content); if ( $output != '' ) return $output; extract(shortcode_atts(array( 'id'=> '', 'align' => 'alignnone', 'width' => '', 'caption' => ''), $attr)); if ( 1 > (int) $width || empty($caption) ) return $content; if ( $id ) $id = 'id="' . esc_attr($id) . '" '; return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>'; }

Esse código também remove o style padrão adicionado em imagem com caption.


Remover barra do topo na visualização do blog

show_admin_bar(false);
add_filter('show_admin_bar', '__return_false');

Eu tenho horror a quase todas barras no topo (ou rodapé).


Remover CSS padrão do widget “Comentários Recentes”

function dld_remove_recent_comments_style() { add_filter( 'show_recent_comments_widget_style', '__return_false' ); }
add_action( 'widgets_init', 'dld_remove_recent_comments_style' );

Ativar sidebar

function dldblog_widgets_init() {
/* Sidebar 1 */
register_sidebar( array(
'id' => 'sidebar-1',
'name' => __('Sidebar 1', 'dld_theme'),
'description' => __('Sidebar 2', 'dld_theme'),
'before_widget' => '<!--widget--><div id="%1$s" class="widget %2$s">',
'after_widget'  => "<div style=\"clear:both;\"></div> </div><!--//widget-->\n",
'before_title'  => "\n<h2 class=\"title\">",
'after_title'   => "</h2>\n",
) );
/* end Sidebar 1 */
}
add_action( 'widgets_init', 'dldblog_widgets_init' );

E onde quer que apareça o Sidebar 1, adicione o código abaixo:

<?php /* Sidebar 1 */ if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
<?php endif; /* end Sidebar 1 */ ?>
Trends

Redes Sociais Viciantes


GetGlue
Está assisindo um seriado? Faz um check-in! E avisa os amigos do facebook ou seguidores do twitter o que você está assistindo.

Além de check-in pra seriados, tem pra filmes, livros, músicas, jogos ou o que quer que esteja pensando. E você ganha um sticker para cada check-in.
Tem aplicativo para iPhone, iPad e Android.

Qual a graça? Saber o que seus amigos estão assistindo, lendo.. e você ainda recebe dicas de novos seriados, filmes, livros.. baseado no que você anda lendo ou assistindo.
É viciante e estou também.



Pinterest
Um tempo atrás, tipo uns 5 anos atrás, eu costumava sair salvando no computador várias imagens que gostava e encontrava na internet. Separava tudo em pastas, e no final meu HD ficou superlotado com tanta coisa e eu nem sabia mais da onde tinha tirado tal foto. E quando queria procurar uma imagem era aquela tristeza, por que levava horas pra encontrar ela.

Hoje posso fazer tudo isso com o Pinterest facilmente.

Vou confessar que demorei me apegar à ele. No ano passado quando comecei com o Projeto 365 (que desisti no meio do caminho) no flickr, alguém me indicou o site e me mandou um convite. Entrei, olhei e descartei uma semana depois. No início desse ano a rede social teve um boom e de repente tá todo mundo lá, e eu mendigando um convite por que precisava testar o botão de compartilhar para adicionar em um freela. Então agora estou , mais uma vez!



Pinspire
Criado pela mesma empresa que participou da criação do GlossyBox e Groupon, tem o mesmo objetivo do Pinterest. Você pode salvar fotos que gosta, inspirações que encontra pela internet em um só lugar.. as pessoas podem comentar e compartilhar com outros.

O diferencial dele é que você não precisa mendigar convite pra ninguém para participar da rede social e ele é em Português. Além disso, também é possível adicionar botão de compartilhar no blog e assim todo mundo pode compartilhar seus posts lá facilmente.

Também estou !



Tumblr
Nem preciso comentar muito sobre esse, acredito que a maioria já sabe o suficiente, certo?
De uma certa forma ele funciona como os dois últimos comentados, mas o legal é que você pode personalizar sua página. Eu tenho uns 7 tumblrs, mas tenho atualizado dois quase que sempre. rs


Mais redes sociais viciantes

Twitter e Facebook chega ser redundante comentar né? Mas ainda tem We Heart It que já está velho nessa história, Lookbook para os fashionistas (ou não) de plantão, Instagram para os consumidores da Apple..

Tem muito mais, a lista é grande! Mas esses são os que eu mais tenho usado nos últimos meses.
E você, tem alguma rede social que não consegue ficar sem?

Trends

Happy Weekend #11

Uncategorized

Hello 2012!

Quem é vivo uma hora acaba aparecendo, certo? Bem, o twitter e facebook estão sendo atualizados direto, mas o blog estava às moscas. Então como dizem que as coisas começam a funcionar depois do carnaval, estou aqui para provar isso, por que agora acredito que esse blog voltará a ser atualizado.

Como podem ver, foram feitas algumas mudanças por aqui. O blog agora é subdominio. Os themes também irão para um subdomínio, mas no momento está em manutenção. O portfolio continua lá, mas em manutenção também. Espero conseguir terminar tudo ainda esse mês.

A ideia de separar com subdominio não é nova, na verdade era pra eu ter feito isso desde o início do Difluir, mas sempre fiquei naquela indecisão libriana. Agora resolvi fazer. Fica mais fácil por que assim posso mudar um sem depender do outro. Embora seja possível fazer isso também em uma só instalação do WordPress, separado fica mais fácil.

Agora vamos ver se consigo atualizar aqui mais vezes. Ando bastante ocupada com os freelas, mas vou tentar vir aqui com algum post legal pelo menos uma vez por semana.