Salve a tutti,

vi spiego subito quello che sto cercando di fare. Mi servirebbe attribuire ID e classe CSS ad un elemento immagine.



Io inserisco l'attributo ad esempio FRAME.

Ma quando vado a vedere il codice html l'attributo viene inserito non sul tag IMG ma sul DIV prevecente

html4strict:

<div class="ce_image frame block" id="frame">
 
<div class="image_container">
<img src="tl_files/website/immagine.jpg" width="100" height="100" alt="Immagine" />
</div>

Secondo voi come dovrei fare per attribuire ID e classe CSS solo al tag IMG.

Grazie.

visionecreativa:

Secondo voi come dovrei fare per attribuire ID e classe CSS solo al tag IMG.

Ciao,
se c'è una cosa che mi ha insegnato TL è l'uso dei CSS che in passato usavo in modo superficiale.
Mi stupisco ogni giorno per le soluzioni che si riesce a trovare

Di solito scrivo la regola in questo modo:

css:

.frame .image_container img { padding:8px;}

Grazie Paolo, questo lo avevo già fatto...

...ma siccome il

html4strict:

class="frame"

devo utilizzarlo in abbinata con uno script che sostituisce tutte le immagini con class="Frame".

Dunque questo metodo non mi funziona...

Capito...
allora la cosa è un poco più articolata, ma non difficile... occorre esserne coscienti delle modifiche che si fanno.

Se non lo sai ogni elemento di TL è gestibile tramite template.

In particolare gli elementi immagine hanno come template i file ce_image.tpl, ce_image_fullsize.tpl e ce_image_link.tpl a seconda di che tipo di immagine vai a gestire (normale, con ingrandimento, o come link)
Questi template sono contenuti in TL_root/system/modules/frontend/templates

Se tu apri il file ce_image.tpl avrai il seguente codice:

php:

 
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
 
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
 
<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
</div>
 

Riconoscerai la struttura dell'immagine con il container ecc.
In particolare nella prima riga abbiamo class="<?php echo $this->class; ?> che riporta la classe che vuoi dare all'elemento.
Ora se variamo questo template nel seguente modo:

php:

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
 
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
 
<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<img class="<?php echo $this->class; ?>" src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
 
</div>

Avremo aggiunto anche all'elemento img una la classe :-)

Ora il tuo problema dovrebbe essere risolto... ma...
al primo aggiornamento il template verrà sovrascritto...

qui entra in gioco una funzione MOLTO interessante di TL se non la conosci.
La cartella templates nella root di TL. bene se tu copi un qualsiasi template (mantenendo il nome in questo caso) in questa cartella, TL considererà prima questo file piuttosto che quello nella cartella originale.
In questo modo puoi crearti dei template personalizzati e tenerli in ordine in una sola cartella.

Spero di essere stato utile

Paolo hai fatto centro...

infatti questo era il metodo che stavo cercando... il tuo aiuto è stato utilissimo anche perché mi hai dato una dritta su come utilizzare le variabili di typolight e i templates.

Grazie ciao.
Maurizio