it-swarm-es.tech

Eliminar todas las etiquetas <img> excepto la primera, cambiar el tamaño de la imagen - Componente de etiqueta

Contexto: En la página Etiqueta (la página Etiqueta de la que estoy hablando es la página a la que accedo cuando hago clic en una etiqueta justo debajo del título de un artículo), quiero mostrar solo una imagen por artículo, así que:

  • si hay una imagen de introducción, la imagen en el artículo se elimina
  • si no hay imagen de introducción, solo se muestra la primera imagen del artículo

El problema: Cuando la página de etiqueta se ve debajo del tamaño de la imagen del artículo, justo debajo de un artículo que contiene una imagen de introducción cambia (aquí el artículo 3 )

  • artículo 1: la imagen está en HTML (introtexto)
  • artículo 2: la imagen es una imagen de introducción
  • artículo 3: la imagen está en HTML (introtexto)
  • artículo 4: la imagen está en HTML (introtexto)

El tamaño de la imagen debe ser width="456" height="140" (el valor predeterminado) pero en su lugar es width="624" height="340".

Necesito ayuda para: Estoy tratando de encontrar una manera de asegurarme de que el tamaño de mis imágenes no cambie.

Aqui esta mi codigo

<?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);                  
    }                   
?>

Lo que he hecho para solucionar el problema: Pensé que podría estar relacionado con el hecho de que la altura y el ancho de la imagen no están establecidos en el HTML, pero cuando probé solo la parte siguiente, el tamaño de mis imágenes no cambia. Parece que el problema está en otro 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);
?>

Aquí es un ejemplo en vivo: busca el segundo artículo (el que está justo debajo del dibujo amarillo con chozas). Se supone que la imagen del segundo y tercer artículo tiene el mismo ancho.

2
MagTun

Esto no responderá exactamente a su pregunta, en caso de que desee utilizar el tamaño original de las imágenes que inserte en sus artículos, recuerde que:

Siempre puedes manipular la parte visual de la página con CSS.

Algo como el css a continuación, en su archivo css (por ejemplo, template.css) debería funcionar y establecerá un ancho máximo para todas las imágenes que se muestran en la página de etiquetas:

CSS

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

Actualizar:

solo como una pequeña mejora, también puede agregar esta regla adicional: ancho: 100%! importante; - Entonces las imágenes también responderán a los diferentes tamaños de pantalla. * Actualicé el código CSS anterior. * En realidad, mi forma de hacerlo: para diseñar completamente y dar mi diseño deseado a la página, sería con CSS. Solo me importarían los tamaños html de las imágenes solo por consideraciones de rendimiento.

2
FFrewin

Su ejemplo tiene solo 1 imagen. Las imágenes deben mostrarse en su tamaño natural, a menos que especifique dimensiones en su html. No especifique tamaños en su html, cargue imágenes en el tamaño que desee. Eso es.

1
Seth Warburton