Immagine come link nel testo introduttivo

[tonicopi]

Da una richiesta nel forum spiego come rendere cliccabile una immagine introduttiva in un articolo su joomla 3.x (ma si può fare anche nella 2.5) in modo che si comporti come il leggi tutto ed apra l'articolo esteso.

Link all'articolo: http://www.joomla.it/articoli-community-3x-tab/7223-immagine-come-link-nel-testo-introduttivo.html

[webdesigneritalia]

Ciao Toni
ci dai il link per la cosa molto carina che hai fatto..?
Grazieeeeeeeeeeee...!!

[alexred]

Ciao webdesigneritalia,
articolo è ora pubblico e visibile a questo link: http://www.joomla.it/articoli-community-3x-tab/7223-immagine-come-link-nel-testo-introduttivo.html

[Milcon]

Ciao Tony bellissimo articolo, anche perchè a livello psicologico viene sempre da cliccare su un'immagine di un articolo e il fatto che si apra la pagina intera invoglia a leggere e a rimanere piu' a lungo sul sito

[skatercorpse]

Molto interessante, anche perchè stavo cercando proprio qualcosa di simile.


Come pagina home ho impostato Blog category.



Innanzi tutto tramite css ho anche reso l'immagine intro responsive e ridimensionata, semplicemente così:

.item-image {
max-width: 180px;
}
@media (max-width: 480px) {
.item-image {
max-width: 80px;
}
}


Forse a qualcuno può servire dato che ho visto in altri forum che altra gente cercava una soluzione al riguardo ma non trovavano risposte adeguate o complicazioni ulteriori.


Per me era interessante poter dare anche una classe all'immagine intro. Così da poter dare lo stile img-polaroid (gia presente in joomla 3.x nel template protostar) tramite CSS.


È stato fatto l'override del file
com_content/views/category/tmpl/blog_item.php


creando il file
templates/mytemplate/html/com_content/category/blog_item.php


Ora a causa di totale ignoranza in php, non so come procedere.

Il codice da modificare penso sia il seguente:
<?php echo JLayoutHelper::render ('joomla.content.intro_image', $this->item) ; ?>


Ma come faccio ad aggiungere una classe all'immagine così da poter dargli lo stile preferito grazie al CSS?


Spero qualcuno possa aiutarmi!


Grazie mille! 

[tonicopi]

Ciao, sono al mare è mi è difficile aiutarti da qui.
Mi pare che subito sotto la stringa da te citata ci sia il codice che richiama l'immagine, che è quello che devi racchiudere  per trasformare l'imagine in link:

Codice: [Seleziona]

<img
        <?php if ($images->image_intro_caption):
            echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
        endif; ?>Vedo che il tag img ha l'istruzione condizionale in php per assegnarli la classe nel caso venga inserita una descrizione della stessa. Prova ad aggiungere una classe anche tu prima:

Codice: [Seleziona]

<img class="polaroid"
        <?php if ($images->image_intro_caption):
            echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
        endif; ?>

[skatercorpse]

Ciao Toni, grazie mille per la risposta!


Purtroppo nel file blog_item.php non c'è proprio il codice da te citato.
E non c'è nessun tag <img>, altrimenti avrei provato subito dei tentativi ad applicare una classe.


L'unica riga presenta, e che richiama l'immagine di intro, è il codice che ho messo io. Avevo fatto dei tentativi e modificandola o togliendola del tutto (non ricordo) l'immagine spariva (quando non dava un qualche errore la pagina..).


Quella riga di php genera il seguente codice in html: <img src="/images/xy.jpg" alt="">

Intanto grazie e goditi il mare!

[tonicopi]

Stai forse guardando un file che  è già un override di quello originale?
Prova a farlo con il file e il codice indicato nel mio articolo e vedi se funziona.

[skatercorpse]

mmmh bella domanda!
il template è il protostar cmq...


fatto sta che ho provato ad aggiungere la classe nel file da te citato, e non mi cambia nulla.


Però ho risolto


Ho copiato le proprietà di stile della classe img-polaroid dal css e ho aggiunto le stesse proprietà alla classe .item-image !! Non so perchè non ci ho pensato prima!


E ho aggiunto lo stesso codice del tuo articolo però nel file blog_itemp.php, e ho racchiuso la linea di codice che ho postato prima

Codice: [Seleziona]

<?php echo JLayoutHelper::render ('joomla.content.intro_image', $this->item) ; ?>

Funziona tutto. Ora ho l'immagine di intro che ha la cornice ed è un link all'articolo!

Quindi il codice nel file override blog_item.php è il seguente:

Codice: [Seleziona]

<?php  $link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));  ?>
  <a class="intro" href="<?php echo $link; ?>">
<?php echo JLayoutHelper::render ('joomla.content.intro_image', $this->item) ; ?>
</a>
Mentre nel foglio di stile:

Codice: [Seleziona]

.item-image {
max-width: 180px;
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
@media (max-width: 480px) {
.item-image {
max-width: 80px;
}
}
.intro {
display: inline !important;
}
Grazie mille

[tonicopi]

Ottimo!

[agrafoi]

Salve a tutti. Anzitutto mi presento essendo il primo post.
Mi chiamo Giovanni, vivo nel Salento, a Specchia.
Sono un grafico dtp e da un anno mi cimento ad usare joomla per i miei siti.


Ho seguito con interesse l'articolo e la discussione del topic, ho eseguito con successo l'override usando il template protostar (joomla 3.1.5) ma non riesco a risolvere alcuni problemi.
Premetto di non essere esperto con php; il mio problema e che voglio usare l'immagine come link non nella home del sito usando "articoli in evidenza di tutte le categorie" ma su una pagina interna scegliendo "categoria blog". Nell'articolo si fa riferimento ad un modo per scegliere comunque una sola categoria, che io non riesco a trovare.


Qual'è quindi il modo di usare l'immagine introduzione come link visualizzando una sola categoria e che funzioni con tutte le categorie?
Posso risolvere usando dei moduli tipo image_over (citato da qualche parte sempre a proposito del problema) o altro?


Spero di essere stato chiaro nella richiesta e di non essere pretenzioso sostenendo che per completezza della tecnica citata queste informazioni saranno utilissime a tutta la comunità.


so long!

[tonicopi]

Ciao agrafoi e benvenuto nel forum 
Subito di fianco alla tab Dettagli, nelle impostazioni delle voce di menu, trovi la tab Opzioni avanzate. La clicchi e subito ti apprirà un box con dei pulsanti a mezzo dei qulai puoi decidere di pescare glia rticoli da tutte, da alcune, o anche da una sola categoria 

[agrafoi]

Grazie del benvenuto e della risposta. Sarò più stupido di quanto credessi o la mia installazione di joomla ha qualche problema; non riesco a trovare quanto mi dici.


Vado in menu/menu principale e ne creo uno nuovo, scelgo tipo di menu "Articoli in evidenza di tutte le categorie" ma nessun tab opzioni o avanzate mi permette di scegliere la categoria 



Ho letto pure quest'altro topic:
http://forum.joomla.it/index.php?topic=140968.0
e sembra una cosa facile ma giuro che ho girato in lungo e in largo senza risolvere.
Nel topic linkato si fa riferimento ad un plug-in che crea conflitto, nel mio joomla era disattivo di default e ho provato ad attivare/disattivare ma non ho risolto.
Aiuto!!!


Notizie utili:
hosting **** linux
database **** MySQL

5.0.92

joomla 3.1.5
php 5.3.27
web server Apache 2.4.4
 
edited by moderatore: rimosso  riferimento a servizio commerciale.

[ilbaro]

Scusate, ma è possibile estendere questa modifica a tutti gli articoli e non solo a quelli in evidenza?

[tonicopi]

Si, fai così:
Cerca nel file /components/com_content/views/category/tmpl/blog_item.php
questo codice:

Codice: [Seleziona]

<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>


e cambialo  così:

Codice: [Seleziona]

<?php  $link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));  ?>

<a class="btn" href="<?php echo $link; ?>">

<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>

   [/url]sembra funzionare:
http://www.joomlacsszengarden.com/joomla35/index.php/article-category-blog
 

[tonico]

Ciao Tonicopi, avrei da sottoporti un ulteriore richiesta, è possibile utilizare la stessa tecnica con le immagini del testo introduttivo dei Links del componente Link Web?
Spero di essermi spiegato bene.

[tonicopi]

Si funziona nello stesso modo. Devi fare l'override del file:

components/com_weblinks/views/category/tmpl/default_items.php

cercare questo codice:

Codice: [Seleziona]

<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>"> <img
                            <?php if ($images->image_first_caption):
                                echo 'class="caption"'.' title="' .htmlspecialchars($images->image_first_caption) .'"';
                            endif; ?>
                            src="<?php echo htmlspecialchars($images->image_first); ?>" alt="<?php echo htmlspecialchars($images->image_first_alt); ?>"/> </div> e sostituirlo con questo:

Codice: [Seleziona]

<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>"> <a  href="<?php echo $link  ;?>"><img
                            <?php if ($images->image_first_caption):
                                echo 'class="caption"'.' title="' .htmlspecialchars($images->image_first_caption) .'"';
                            endif; ?>
                            src="<?php echo htmlspecialchars($images->image_first); ?>" alt="<?php echo htmlspecialchars($images->image_first_alt); ?>"/> </a></div>

[tonico]

Perfetto! Grazie mille 

[tonico]

Rieccomi  . Il link collegato all'immagine funziona perfettamente, l'unico problema è che in questo modo apre il link nella stessa pagina, bypassando il comportamento impostato nelle opzioni.

[tonicopi]

Se li vuoi far aprire in un'altra finestra cambia il codice con  questo:

Codice: [Seleziona]

<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>"> <a  href="<?php echo $link.' target="_blank" '  ;?>"><img
                            <?php if ($images->image_first_caption):
                                echo 'class="caption"'.' title="' .htmlspecialchars($images->image_first_caption) .'"';
                            endif; ?>
                            src="<?php echo htmlspecialchars($images->image_first); ?>" alt="<?php echo htmlspecialchars($images->image_first_alt); ?>"/> </a></div>