Joomla.it Forum
Forum traduzioni italiano => Le traduzioni e le informazioni della community => Articoli della community => : tonicopi 26 Aug 2013, 17:10:35
-
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
-
Ciao Toni
ci dai il link per la cosa molto carina che hai fatto..?
Grazieeeeeeeeeeee...!!
-
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
-
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 :)
-
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! :)
-
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:
<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:
<img class="polaroid"
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
-
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! :)
-
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.
-
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! :D
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
<?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:
<?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:
.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 :)
-
Ottimo! :)
-
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!
-
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 ;)
-
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 (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.
-
Scusate, ma è possibile estendere questa modifica a tutti gli articoli e non solo a quelli in evidenza?
-
Si, fai così:
Cerca nel file /components/com_content/views/category/tmpl/blog_item.php
questo codice:
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
e cambialo così:
<?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 (http://www.joomlacsszengarden.com/joomla35/index.php/article-category-blog)
;)
-
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.
-
Si funziona nello stesso modo. Devi fare l'override del file:
components/com_weblinks/views/category/tmpl/default_items.php
cercare questo codice:
<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:
<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>
-
Perfetto! Grazie mille :)
-
Rieccomi :P . 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.
-
Se li vuoi far aprire in un'altra finestra cambia il codice con questo:
<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>
-
Certo, ma se invece volessi che il comportamento venisse gestito dalle impostazioni del componente?
-
peccato che non si posa applicare ai templates che usano GANTRY ! Magari sarebbe ora che l'opzione diventasse standard !
Saluti a tutti
Alberto
-
Salve riprendo questa discussione perchè anche io nel mio sito ho fatto la modifica link immagine ...la cosa strana è che dopo l'aggiornamento all'ultima versione 2.5 di joomla, precisamente la 2.5.28, e dopo aver rifatto tutto il procedimento override della cartella com_content e default.itm.php, la cosa non funziona più...volevo chiedere se è un problema mio o la cosa è successa ad altri...
:o :o grazie in anticipo
-
Ciao! Il metodo funziona perfettamente ma... solo a me succede che nella home, dove sono listati tutti gli articoli in evidenza, intorno all'immagine cliccabile compare un bordo colorato (stesso colore dei link), mentre se clicco sulle categorie del menu, le foto sono sempre correttamente cliccabili, ma senza questo antiestetico bordo...
Qualche idea su come eliminarlo?
Grazie!
-
Se metti un link lal problema vediamo...
Ciao! Il metodo funziona perfettamente ma... solo a me succede che nella home, dove sono listati tutti gli articoli in evidenza, intorno all'immagine cliccabile compare un bordo colorato (stesso colore dei link), mentre se clicco sulle categorie del menu, le foto sono sempre correttamente cliccabili, ma senza questo antiestetico bordo...
Qualche idea su come eliminarlo?
Grazie!
-
Ho risolto con un metodo un pò artigianale, ho creato una categoria chiamata "home" vi ho inserito dentro quelle che precedentemente erano le categorie, come sottocategorie in questo modo l'effetto visivo è risolto.
Mi rimane la curiosità sul perchè succeda, magari è qualche configurazione del template...
-
Quasi certamente è una regola css del template, certo...
-
scusate se riesumo questo post ma vorrei chiedere una cosa attinente: io ho sempre inserito le immagini dall'editor senza usare la funzione immagini di joomla (introduttiva e articolo)
Ora con un template che le adatta meglio se utilizzo il metodo di joomla (immagini e link) le sto inserendo così, solo che non capisco come potrei fare ad applicare successivamente una classe all'immagine o a fare altre modifiche via codice, visto che le immagini non vengono comprese nello stesso quando lo attivo dall'editor. Come si può fare?
grazie