it-swarm.dev

Rimuovi tutti i tag <img> tranne il primo cambia dimensione immagine - Componente tag

Contesto: Nella pagina Tag (la pagina Tag di cui sto parlando è la pagina a cui accedo quando faccio clic su un tag appena sotto il titolo di un articolo), voglio visualizzare solo un'immagine per articolo, quindi:

  • se è presente un'immagine introduttiva, l'immagine nell'articolo viene rimossa
  • se non è presente alcuna immagine introduttiva, viene visualizzata solo la prima immagine dell'articolo

Il problema: Quando la pagina Tag appare sotto la dimensione dell'immagine dell'articolo appena sotto un articolo che contiene un'immagine introduttiva cambia (qui l'articolo 3 )

  • articolo 1: l'immagine è in HTML (introtext)
  • articolo 2: l'immagine è un'immagine introduttiva
  • articolo 3: l'immagine è in HTML (introtext)
  • articolo 4: l'immagine è in HTML (introtext)

La dimensione dell'immagine dovrebbe essere width="456" height="140" (impostazione predefinita) ma invece è width="624" height="340".

Ho bisogno di aiuto per: Sto cercando di trovare un modo per assicurarmi che la dimensione delle mie immagini non cambi.

Ecco il mio codice

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

Cosa ho fatto per risolvere il problema: Ho pensato che potesse essere collegato al fatto che l'altezza e la larghezza dell'immagine non sono impostate nella HTML, ma quando ho testato la parte in basso da sola, la dimensione delle mie immagini non cambia. Quindi sembra che il problema sia altrove.

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

Qui è un esempio dal vivo: cerca il secondo articolo (quello appena sotto il disegno giallo con le capanne). L'immagine del secondo e terzo articolo dovrebbe avere la stessa larghezza.

2
MagTun

Questo non risponderà esattamente alla tua domanda, nel caso in cui desideri utilizzare la dimensione originale delle immagini che inserisci nei tuoi articoli, tuttavia ricorda che:

Puoi sempre manipolare la parte visiva della pagina con CSS.

Qualcosa come il css qui sotto, nel tuo file css (ad esempio template.css) dovrebbe funzionare e imposterà una larghezza massima per tutte le immagini visualizzate nella pagina dei tag:

[~ ~ #] css [~ ~ #]

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

Aggiornare:

proprio come un piccolo miglioramento, puoi anche aggiungere questa regola aggiuntiva: larghezza: 100%! importante; - Quindi le immagini risponderanno anche alle varie dimensioni dello schermo. * Ho aggiornato il codice CSS sopra. * In realtà, il mio modo di farlo: per dare uno stile completo e dare il layout desiderato alla pagina, sarebbe con CSS. Mi interesserei solo le dimensioni html delle immagini solo per considerazioni sulle prestazioni.

2
FFrewin

Il tuo esempio ha solo 1 immagine. Le immagini dovrebbero essere visualizzate nella loro dimensione naturale, a meno che tu non specifichi le dimensioni nel tuo HTML. Non specificare le dimensioni nel tuo html, carica le immagini nella dimensione desiderata. Questo è tutto.

1
Seth Warburton