desenv-web-rp.com

Remova todas as tags <img>, exceto a primeira, altere o tamanho da imagem - Componente Tag

Contexto: Na página Tag (a página Tag de que estou falando é a página em que chego quando clico em uma tag logo abaixo do título de um artigo), quero exibir apenas uma imagem por artigo para:

  • se houver uma imagem de introdução, a imagem no artigo será removida
  • se não houver imagem de introdução, apenas a primeira imagem do artigo será exibida

O problema: Quando a página Tag aparece abaixo do tamanho da imagem do artigo, logo abaixo de um artigo que contém uma imagem introdutória muda (aqui o artigo 3 )

  • artigo 1: a imagem está em HTML (introtexto)
  • artigo 2: imagem é uma imagem de introdução
  • artigo 3: a imagem está em HTML (introtexto)
  • artigo 4: a imagem está em HTML (introtexto)

O tamanho da imagem deve ser width="456" height="140" (o padrão), mas é width="624" height="340".

Preciso de ajuda para: Estou tentando encontrar uma maneira de garantir que o tamanho das minhas imagens não seja alterado.

Aqui está o meu código

<?php 
    if (!empty($images->image_intro)) {                     
        $item->core_body= strip_tags( $item->core_body, '<p>');
    }                   
    else {
        $item->core_body= preg_replace('/\<img/','****',$item->core_body,1);
        $item->core_body= strip_tags( $item->core_body, '<p>');
        $item->core_body= str_replace('****','<img',$item->core_body);                  
    }                   
?>

O que fiz para corrigir o problema: Eu pensei que isso poderia estar relacionado ao fato de que a altura e a largura da imagem não estão definidas no HTML, mas quando testei a parte abaixo sozinha, o tamanho das minhas imagens não muda. Parece que o problema está em outro lugar.

<?php
   $item->core_body= preg_replace('/\<img/','****',$item->core_body,1);
   $item->core_body= strip_tags( $item->core_body, '<p>');
   $item->core_body= str_replace('****','<img',$item->core_body);
?>

Aqui é um exemplo ao vivo: procure o segundo artigo (aquele logo abaixo do desenho amarelo com cabanas). A imagem do segundo e terceiro artigo deve ter a mesma largura.

2
MagTun

Isso não responderá exatamente à sua pergunta, caso você queira usar o tamanho original das imagens inseridas em seus artigos, lembre-se de que:

Você sempre pode manipular a parte visual da página com CSS.

Algo como o css abaixo, no seu arquivo css (por exemplo, o template.css) deve funcionar e definirá uma largura máxima para todas as imagens exibidas na página de tags:

CSS

.tag-category .list-striped li img {
    max-width: 456px;
    width:100% !important;
}

Atualizar:

assim como uma pequena melhoria, você também pode adicionar esta regra adicional: width: 100%! important; - Portanto, as imagens também responderão aos vários tamanhos de tela. * Atualizei o código CSS acima. * Na verdade, minha maneira de fazer isso: estilizar completamente e dar o layout desejado para a página, seria com CSS. Eu me importaria apenas com os tamanhos html das imagens apenas por considerações de desempenho.

2
FFrewin

Seu exemplo tem apenas 1 imagem. As imagens devem ser exibidas em seu tamanho natural, a menos que você especifique as dimensões em seu html. Não especifique tamanhos no seu html, faça upload de imagens no tamanho desejado. É isso aí.

1
Seth Warburton