Widget articoli recenti con antemprima immagine

Visualizzazione Stampabile

09-11-2011, 17:40
Mscotti

Allegati: 1

Widget articoli recenti con antemprima immagine
Tempo fà chiesi come poter inserire un widget in homepage che permettesse di visualizzare gli aricoli recenti o blog ma con un'anteprima dell'immagine contenuta in essi.
Dopo molte ricerche e dopo averne trovato uno che facesse al caso mio... vorrei ulteriormente modificarlo, di seguito il codice:

Codice PHP:

// Set Your Section ID Here $section = '7,8'; // Set The Number of Articles To Display $limit = '3'; // Set The Height of The Thumbnail Image $height = '100'; // Set The Width of The Thumbnail Image $width = '100'; $articlegrab = vB::$db->query_read(" SELECT ".TABLE_PREFIX."cms_nodeinfo.nodeid , ".TABLE_PREFIX."cms_nodeinfo.title , ".TABLE_PREFIX."cms_article.previewimage , ".TABLE_PREFIX."cms_article.contentid , ".TABLE_PREFIX."cms_node.nodeid , ".TABLE_PREFIX."cms_node.parentnode , ".TABLE_PREFIX."cms_node.contentid , ".TABLE_PREFIX."cms_node.url , ".TABLE_PREFIX."cms_node.setpublish FROM ".TABLE_PREFIX."cms_article , ".TABLE_PREFIX."cms_nodeinfo , ".TABLE_PREFIX."cms_node WHERE (".TABLE_PREFIX."cms_nodeinfo.nodeid = ".TABLE_PREFIX."cms_node.nodeid) AND (".TABLE_PREFIX."cms_article.contentid = ".TABLE_PREFIX."cms_node.contentid) AND (".TABLE_PREFIX."cms_node.parentnode IN ($section)) AND (".TABLE_PREFIX."cms_node.setpublish != 0) ORDER BY ".TABLE_PREFIX."cms_node.publishdate DESC LIMIT $limit "); $output.="<table>"; while($articleinfo = vB::$db->fetch_array($articlegrab)) { $title = $articleinfo['title']; $image = $articleinfo['previewimage']; $nodeid = $articleinfo['nodeid']; $url = $articleinfo['url']; $fulltext = strip_bbcode($fulltext); $text = preg_replace('/\[ATTACH\=CONFIG\]\d\d\[\/ATTACH\]/', '', $text); $text = strip_bbcode($text); if($text == '') $text = substr($fulltext, 0,150); if($image != '') $output .= "<tr><td><img src='".$image."' width='".$width."px' align='left' height='75' HSPACE='5' VSPACE='3'/></td>"; $output .= "<td><b><a href='?".$nodeid."-".$url."' align='top'>".$title."</a><p>".$text." </b></p><br/></td></tr>"; } $output.="</table>";

Il risultato come potete vedere dall'immagine è questo:

Allegato 1334

Purtroppo sono piuttosto puntiglioso e cercavo qualcuno in grado di apporre modifiche o meglio...
1. Anteprima dell'immagine con bordatura di 1 pixel
2. Resize dell'anteprima in % e proporzionale, non come quello che potete vedere nell'immagine.
3. Anteprima di parte del testo dell'articolo, in aggiunta al titolo che ha adesso
Spero qualcuno possa aiutarmi.

PS: Il codice non l'ho fatto io...sia chiaro... :o

Per chi volesse provarlo deve semplicemente creare un nuovo widget scegliendo "Esecuzione diretta PHP", cancellare quello che vi trova all'interno ed inserire il codice sopra.
I parametri sono semplici e li trovate all'inizio del codice.

Arigrazie
11-11-2011, 12:22
y2ksw

Per l'immagine non c'è molto da fare ... però visto che te la cavi bene con la programmazione, prova a creare una thumbnail al volo ... una cartella che li contiene, verifica se esiste già, altrimenti lo crei.

Se hai installato la libreria GD, i comandi per creare immagini iniziano con "image". Con questo sistema di ridimensionamento hai una piccola attesa al momento della generazione, ma poi la visualizzi quasi istantanea e hai anche il vantaggio che non aggiunge carico notevole se viene linkato dall'esterno.

Considera però la divisione in cartelle tipo images/articoli/anteprima/2011/11/id_articolo_N.jpg, perché le immagini possono essere tante e se sono troppe non li accedi più neanche con FTP ;)
11-11-2011, 13:17
MirkoLoockz

Prova a costruire un div con la dichiarazione del bordo nel additional.css poi il div lo applichi al codice img.
dove ci sono le img fai cosi'

Codice:

<div id="thmb"><img src="#"></div>

e nel additional.css metti

Codice:

thmb { border: 1px solid; }

la cosa la puoi personalizzare anche per la posizione lo sfondo le ombre e tanto altro, consiglio anche di provare l'effetto radius sui bordi e i webkit per le ombre.

Spero di essere stato chiaro :)

Mirko B.
11-11-2011, 13:27
Mscotti

Citazione:

Originariamente Scritto da y2ksw

Per l'immagine non c'è molto da fare ... però visto che te la cavi bene con la programmazione

nononono non è roba mia! :o

Citazione:

Originariamente Scritto da MirkoLoockz

Prova a costruire un div con la dichiarazione del bordo nel additional.css poi il div lo applichi al codice img.
dove ci sono le img fai cosi'

Codice:

<div id="thmb"><img src="#"></div>

e nel additional.css metti
Mirko B.

uhmmm devo inserirlo così com'è? :confused:
11-11-2011, 16:23
MirkoLoockz

nel tuo codice ci sono dei codici img e to li applichi nella struttura div che hai creato nel additional css
11-11-2011, 17:12
Mscotti

spe spe spe... :D
Io sono veramente negato per queste cose... io nel additional.css non ho messo nulla per farlo funzionare (il mio codice intendo)...

detto questo... sapresti inserirmi nel mio codice la modifica per la bordatura?
e se possibile per avere sotto al titolo anche qualche parola dell'articolo stesso? ;)

Sarebbe fantastico... no?

Allegato 1334
11-11-2011, 19:39
MirkoLoockz

nel additional css ci metti i css ESTERNUI CHE TI SERVONO LE COSE AGGIUNTIVE DICIAMO, TU CI METTI QUESTO:
thmb {
border: 1px solid;
}

POI il tuo codice nel blocco sodebar "credo che lo hai messo la, lo metti cosi'"

Codice:

// Set Your Section ID Here $section = '7,8'; // Set The Number of Articles To Display $limit = '3'; // Set The Height of The Thumbnail Image $height = '100'; // Set The Width of The Thumbnail Image $width = '100'; $articlegrab = vB::$db->query_read(" SELECT ".TABLE_PREFIX."cms_nodeinfo.nodeid , ".TABLE_PREFIX."cms_nodeinfo.title , ".TABLE_PREFIX."cms_article.previewimage , ".TABLE_PREFIX."cms_article.contentid , ".TABLE_PREFIX."cms_node.nodeid , ".TABLE_PREFIX."cms_node.parentnode , ".TABLE_PREFIX."cms_node.contentid , ".TABLE_PREFIX."cms_node.url , ".TABLE_PREFIX."cms_node.setpublish FROM ".TABLE_PREFIX."cms_article , ".TABLE_PREFIX."cms_nodeinfo , ".TABLE_PREFIX."cms_node WHERE (".TABLE_PREFIX."cms_nodeinfo.nodeid = ".TABLE_PREFIX."cms_node.nodeid) AND (".TABLE_PREFIX."cms_article.contentid = ".TABLE_PREFIX."cms_node.contentid) AND (".TABLE_PREFIX."cms_node.parentnode IN ($section)) AND (".TABLE_PREFIX."cms_node.setpublish != 0) ORDER BY ".TABLE_PREFIX."cms_node.publishdate DESC LIMIT $limit "); $output.="<table>"; while($articleinfo = vB::$db->fetch_array($articlegrab)) { $title = $articleinfo['title']; $image = $articleinfo['previewimage']; $nodeid = $articleinfo['nodeid']; $url = $articleinfo['url']; $fulltext = strip_bbcode($fulltext); $text = preg_replace('/\[ATTACH\=CONFIG\]\d\d\[\/ATTACH\]/', '', $text); $text = strip_bbcode($text); if($text == '') $text = substr($fulltext, 0,150); if($image != '') $output .= "<tr><td><div="thmb"><img src='".$image."' width='".$width."px' align='left' height='75' HSPACE='5' VSPACE='3'/></fiv></td>"; $output .= "<td><b><a href='?".$nodeid."-".$url."' align='top'>".$title."</a><p>".$text." </b></p><br/></td></tr>"; } $output.="</table>";

e dorebbe andare
11-11-2011, 21:56
Mscotti

Non purtroppo non sembra cambiare nulla... :confused:
11-11-2011, 23:36
MirkoLoockz

Forse hai sbagliato qualche passaggio...
12-11-2011, 00:19
Mscotti

Faccio un riepilogo:
Creo un widget utilizzando quello predefinito (Esecuzione diretta Php), e ci metto il codice inserito da te:

Codice PHP:

// Set Your Section ID Here $section = '7,8'; // Set The Number of Articles To Display $limit = '3'; // Set The Height of The Thumbnail Image $height = '100'; // Set The Width of The Thumbnail Image $width = '100'; $articlegrab = vB::$db->query_read(" SELECT ".TABLE_PREFIX."cms_nodeinfo.nodeid , ".TABLE_PREFIX."cms_nodeinfo.title , ".TABLE_PREFIX."cms_article.previewimage , ".TABLE_PREFIX."cms_article.contentid , ".TABLE_PREFIX."cms_node.nodeid , ".TABLE_PREFIX."cms_node.parentnode , ".TABLE_PREFIX."cms_node.contentid , ".TABLE_PREFIX."cms_node.url , ".TABLE_PREFIX."cms_node.setpublish FROM ".TABLE_PREFIX."cms_article , ".TABLE_PREFIX."cms_nodeinfo , ".TABLE_PREFIX."cms_node WHERE (".TABLE_PREFIX."cms_nodeinfo.nodeid = ".TABLE_PREFIX."cms_node.nodeid) AND (".TABLE_PREFIX."cms_article.contentid = ".TABLE_PREFIX."cms_node.contentid) AND (".TABLE_PREFIX."cms_node.parentnode IN ($section)) AND (".TABLE_PREFIX."cms_node.setpublish != 0) ORDER BY ".TABLE_PREFIX."cms_node.publishdate DESC LIMIT $limit "); $output.="<table>"; while($articleinfo = vB::$db->fetch_array($articlegrab)) { $title = $articleinfo['title']; $image = $articleinfo['previewimage']; $nodeid = $articleinfo['nodeid']; $url = $articleinfo['url']; $fulltext = strip_bbcode($fulltext); $text = preg_replace('/\[ATTACH\=CONFIG\]\d\d\[\/ATTACH\]/', '', $text); $text = strip_bbcode($text); if($text == '') $text = substr($fulltext, 0,150); if($image != '') $output .= "<tr><td><div="thmb"><img src='".$image."' width='".$width."px' align='left' height='75' HSPACE='5' VSPACE='3'/></fiv></td>"; $output .= "<td><b><a href='?".$nodeid."-".$url."' align='top'>".$title."</a><p>".$text." </b></p><br/></td></tr>"; } $output.="</table>";

adesso apro additional.css e ci inserisco:

thmb {
border: 1px solid;
}

a questo punto inserisco il widget nel layout, ma nulla.
12-11-2011, 14:04
y2ksw

Gente ... </fiv> non c'è ... prova con </div> :p
12-11-2011, 18:31
Mscotti

Citazione:

Originariamente Scritto da y2ksw

Gente ... </fiv> non c'è ... prova con </div> :p

opsss... corretto ma non funziona comunque, mi falsa anche altre parti di template.
13-11-2011, 02:16
MirkoLoockz

:/ e' una cosa molto strana, prova semplicemente aggiungere al codice img un width, ecco esempio: <img src="#" width="10%">
13-11-2011, 02:25
y2ksw

Togli anche % ... width="50" :)
13-11-2011, 02:31
MirkoLoockz

Uso le "%" per le varie risoluzioni comunque ok.
13-11-2011, 11:32
Mscotti

indipendentemente dalla "%", mi falsa tutto il template, ma non del widget, del cms intero. :confused:

beh dai lasciando stare i bordi... :D
Pensate si possa aggiungere parte dell'anteprima dell'articolo?