Suporte » Desenvolvendo com WordPress » Tamanho da imagem

  • Pessoal,

    Queria saber como fazer o codigo da imagem do post ficar assim no index do blog:

    <img class=”alignnone size-full wp-image-33841″ src=”http://www.site.blog.br/wp-content/uploads/2014/07/cantada1.jpg&#8221; alt=”cantada” width=”xxx” height=”yyy”>

    Onde o width=”xxx” height=”yyy” é o tamanho real da imagem no post, ou seja, esse valor vai ser sempre de acordo com o tamanho realm da imagem no post.

    Atualmente no meu blog o codigo fica assim

    <img src=”http://localhost/wordpress/wp-content/uploads/2014/06/mapa-do-brasil-6-290×160.jpg&#8221; alt=”xxxxxxx.”>

    Ela fica apenas uma miniatura no index, ai quando eu coloco no css max-width: 100% ele é anulado por alguma coisa e não funciona. Mas se eu adiciono manualmente por exemplo um height ai o max-width funciona.

    Resumindo o que eu quero é que a imagem do post aparece no index do mesmo tamanho que dentro do post.

Visualizando 13 respostas - 1 até 13 (de um total de 13)
  • Moderador Leo Baiano

    (@leobaiano)

    Essa imagem é a definida como imagem de destaque, correto? Como você está chamando ela na home/ Tente chamar assim:

    <?php if( has_post_thumbnail() ) the_post_thumbnail( 'full' ); ?>
    Criador do tópico erickcouto

    (@erickcouto)

    Muito obrigado pela ajuda, mas meio que desisti dessa ideia, pq acho que visualmente até funcionária mas a parte funcional não ia rolar, pq minha ideia era fazer com que os post aparecessem completo no index igual a maioria dos blogs, mas acho que pra isso seria muito mais aumentar essa imagem =/

    mas vlw a força ai obrigado.

    Moderador Leo Baiano

    (@leobaiano)

    Beleza então, alterei o status do tópico para resolvido.

    Criador do tópico erickcouto

    (@erickcouto)

    A situação que tenho e que acho que determina o tamanho da imagem é essa

    Quando o post tem imagem : Determina que a imagem tenha 290×160

    <?php if(has_post_thumbnail()): ?>
    <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘widget-image’); ?>

    <div class=”block-image”>‘ title='<?php the_title(); ?>’><img src=”<?php echo $image[0]; ?>” alt=”<?php the_title(); ?>” width=’290′ height=’160′ /><?php echo $icon; ?></div>
    <?php else: ?>
    <div class=”block-image”>‘ title='<?php the_title(); ?>’><img src=”<?php bloginfo(‘template_directory’); ?>/timthumb.php?src=<?php bloginfo(‘template_directory’); ?>/images/thumbnail.png&w=290&h=160″ alt=”<?php the_title(); ?>” width=’290′ height=’160′ /><?php echo $icon; ?></div>
    <?php endif; ?>
    <h2>‘ title='<?php the_title(); ?>’><?php the_title(); ?></h2>
    <span class=”block-meta”><?php the_time(‘F j, Y’); ?>, <?php comments_popup_link(); ?></span>
    </div>
    <?php else: ?>

    E quando o post não tem imagem: Determina que a imagem tenha 50×50

    <div class=”block-item-small”>
    <?php if(has_post_thumbnail()): ?>
    <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘widget-image-thumb’); ?>
    <div class=”block-image”>‘ title='<?php the_title(); ?>’><img src=”<?php echo $image[0]; ?>” alt=”<?php the_title(); ?>” width=’50’ height=’50’ /><?php echo $icon; ?></div>
    <?php else: ?>
    <div class=”block-image”>‘ title='<?php the_title(); ?>’><img src=”<?php bloginfo(‘template_directory’); ?>/timthumb.php?src=<?php bloginfo(‘template_directory’); ?>/images/thumbnail.png&w=60&h=60″ alt=”<?php the_title(); ?>” width=’50’ height=’50’ /><?php echo $icon; ?></div>
    <?php endif; ?>
    <h2>‘ title='<?php the_title(); ?>’><?php the_title(); ?></h2>
    <span class=”block-meta”><?php the_time(‘F j, Y’); ?>, <?php comments_popup_link(); ?></span>
    </div>
    <?php endif; ?>
    <?php $counter++; endwhile; ?>

    </div>
    <?php endif; ?>
    <?php endif; ?>

    Os codigos acima se encontram na index.php, substitui a linha

    <?php if(has_post_thumbnail()): ?>

    pelo o que vc me indicou acima

    <?php if( has_post_thumbnail() ) the_post_thumbnail( ‘full’ ); ?>

    Mas depois que salvo e atualizo a pagina home fica toda em branco.

    FIz certo ? ou devo colocar esse codigo que vc indicou em outro lugar ?

    Moderador Leo Baiano

    (@leobaiano)

    Não conhecia seu código quando dei a sugestão. O erro da página em branco é por causa d o endif, você apagou o if, então ele não faz mais sentido. Porém a melhor solução é você voltar seu código como estava e mudar “widget-image” e “widget-image-thumb” por “full”.

    Criador do tópico erickcouto

    (@erickcouto)

    So substituir as dimensões 290×160 e 50×50 no codigo por FULL ???

    Moderador Leo Baiano

    (@leobaiano)

    Bloco de código 1 fica assim

    <?php if(has_post_thumbnail()): ?>
    <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); ?>
    
    <div class="block-image">' title='<?php the_title(); ?>'><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" /><?php echo $icon; ?></div>
    <?php else: ?>
    <div class="block-image">' title='<?php the_title(); ?>'><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php bloginfo('template_directory'); ?>/images/thumbnail.png&w=290&h=160" alt="<?php the_title(); ?>" width='290' height='160' /><?php echo $icon; ?></div>
    <?php endif; ?>
    <h2>' title='<?php the_title(); ?>'><?php the_title(); ?></h2>
    <span class="block-meta"><?php the_time('F j, Y'); ?>, <?php comments_popup_link(); ?></span>
    </div>
    <?php else: ?>

    E o segundo bloco de código fica assim:

    <div class="block-item-small">
    <?php if(has_post_thumbnail()): ?>
    <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); ?>
    <div class="block-image">' title='<?php the_title(); ?>'><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" /><?php echo $icon; ?></div>
    <?php else: ?>
    <div class="block-image">' title='<?php the_title(); ?>'><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php bloginfo('template_directory'); ?>/images/thumbnail.png&w=60&h=60" alt="<?php the_title(); ?>" /><?php echo $icon; ?></div>
    <?php endif; ?>
    <h2>' title='<?php the_title(); ?>'><?php the_title(); ?></h2>
    <span class="block-meta"><?php the_time('F j, Y'); ?>, <?php comments_popup_link(); ?></span>
    </div>
    <?php endif; ?>
    <?php $counter++; endwhile; ?>
    
    </div>
    <?php endif; ?>
    <?php endif; ?>
    Criador do tópico erickcouto

    (@erickcouto)

    Substitui porem a imagem ainda estão com as medidas 290×160 e 50×50

    No css tenho a seguinte condição

    /** Block styles **/
    .block img { border:1px solid #D7D7D7; padding:2px; margin-top: 10px; }
    /** Article Icons **/
    	.block-image { position:relative; }

    Tentei colocar max-width: 100% em ambos e nada muda …

    se eu coloco um width: 500px por exemplo no primeiro codigo ai a imagem aumenta, se eu coloco no segundo codigo alguma coisa por traz da imagem que esta “invisivel” aumenta eu sei disso pq ele empurra o texto ao lado pra baixo. Eu até imagem que essa suposta coisa invisivel poderia estar bloqueando a imagem, então eu coloquei um width: 500px no segundo codigo e um max-width: 100% no primeiro .. mas não resolveu …

    Criador do tópico erickcouto

    (@erickcouto)

    Talvez isso aqui ajude alguem a me ajudar rs

    Em um blog que tem o esquema igual ao que eu quero a imagem deles é “impressa” da seguinte forma no index:

    <img class="alignnone size-full wp-image-33841" src="http://www.site.blog.br/wp-content/uploads/2014/07/cantada1.jpg" alt="cantada" width="610" height="915">

    Já a minha esta indo da seguinte forma:

    <img src="http://localhost/wordpress/wp-content/uploads/2014/06/mapa-do-brasil-6-290x160.jpg" alt="xxxxxxx.">

    O width e o height no primeiro codigo é impresso com o tamanho real da imagem postada é justamente o que eu quero. Mas eu não sei o que esta determinando isso no código =/

    Moderador Leo Baiano

    (@leobaiano)

    A modificação que fiz só funciona se tiver imagem destacada cadastrada, agora que vi um else ali que chama uma imagem fixa e redimensiona com tinthumb. Cadastre uma imagem de destaque no post pra ver.

    Criador do tópico erickcouto

    (@erickcouto)

    A imagem já esta como destaque. No painel de controle no canto direito em baixo ela ja aparece como destaque …. =/

    NO css eu mudo algo ou não ?

    Moderador Leo Baiano

    (@leobaiano)

    Compartilha aqui o link da página que está com esse problema por favor.

    Criador do tópico erickcouto

    (@erickcouto)

    Poutz ta no localhost pq to fuçando para aprender…

    O tema que modifiquei é o Avenue, ele esta assim:

    IMAGEM 1

    Quero que fique assim:

    IMAGEM 2

    To achando que e melhor pegar um tema que segue o padrão que eu quero igual da segunda imagem, e editar ele todo de novo, o que acha ?

    Sugere algum tema que seja facil de trabalhar em cima ?

    vlww

Visualizando 13 respostas - 1 até 13 (de um total de 13)
  • O tópico ‘Tamanho da imagem’ está fechado para novas respostas.