Collegamento blog nella home page

[Manipulus Mosca]

Questa è l'integrazione del codice php con quello della slideshow:

http://stesil.unofficialwsx5.com/evo9/blogdue/slider.php

Ha l'indubbio vantaggio, rispetto alla soluzione che hai trovato, che la slideshow si aggiorna automaticamente ogni volta che viene inserito un nuovo articolo nel blog, ma le immagini da utilizzare negli articoli del blog devono avere tutte le stesse dimensioni, altrimenti vengono visualizzate deformate.

Se a qualcuno dovesse interessare, scrivo anche le istruzioni.

Grazie Stesil.
Tra oggi e domani cercherò di provarlo. (se mi forniresti istruzioni complete e passo passo visto che sono alquanto digiuno sull'argomento)


Anche se più immediata e automatica la tua soluzione, spero che sia anche più veloce della mia soluzione empirica, che risulta essere lenta anche se più bella graficamente

[stesil]

La prova che ho fatto funziona a queste condizioni:
- la pagina in cui viene inserito il codice deve avere estensione php;
- ogni articolo del blog deve avere un'immagine (le dimensioni previste nell'esempio sono 400x250 per l'immagine ingrandita); è comunque possibile apportare una modifica al codice in modo che venga visualizzata un'immagine di default nel caso in cui l'articolo ne sia sprovvisto.

Questo il procedimento da seguire:
Dal sito che hai linkato:

Ho trovato una slideshow del genere che potrebbe andare bene

http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

scaricare il file zip.

Inserire nella pagina un oggetto html e copiare il seguente codice:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Nella scheda esperto --> Codice CSS dello stesso oggetto html inserire il codice css della slideshow:

Codice:

Only registered users can see contents. Please click here to Register or Login.
 ... che è lo stesso codice presente nel file style.css del progetto scaricato. In alternativa è possibile allegare il file style.css (file allegato al codice) spuntando l'opzione "collega il file alla pagina", ma occorre prima modificare il percorso delle immagini utilizzate come sfondo:

#featured li.ui-tabs-selected{ /*Selected tab style*/ 
        background:url('../images/selected-item.gif') top left no-repeat; 
    } 

#featured .ui-tabs-panel .info{ 
        position:absolute; 
        top:180px; left:0; 
        height:70px; width: 400px; 
        background: url('../images/transparent-bg.png'); 
    } 

Allegare queste immagini (sono nella cartella images del progetto scaricato), sempre attraverso la scheda esperto dell'oggetto html, indicando come percorso relativo sul server la cartella images.

La slideshow funziona grazie agli effetti grafici di jQueryUI; scaricare la libreria dal sito ufficiale ed allegarla con lo stesso procedimento degli altri file. Ricordarsi di spuntare "collega il file alla pagina".

Ed infine, in Creazione della mappa ---> Proprietà della pagina ---> Scheda "Esperto" ---> Codice personalizzato da inserire prima della sezione </HEAD>:

Codice:

Only registered users can see contents. Please click here to Register or Login.
... non è semplicissimo ... spero di non aver dimenticato niente!

[Manipulus Mosca]

Ho provato a fare come avevi detto ma il risultato è una finestra piena di scritte per me senza senso.


Procediamo con ordine:


1. Ho fatto divetare la home page una pagina php (cosa cambia visto che prima era una pagina html?)


2. Ho scaricato il file zip dal sito (ma poi non ci ho fatto nulla)


3. Ho inserito l'oggetto html nella home page e ho inserito il codice


4. Ho inserito nella scheda esperto dello stesso oggetto html l'altro codice


5. Poi non ho capito ciò che si diceva riguardo all'alternativa di allegare il file .css (suppongo quello che avevo scaricato nel file .zip) e modificare il percorso delle immagini
 
6. Ho scaricato la libreria jQueryUI (il file denominato "jquery-ui-1.8.18.custom") e ho allegato il file "jquery-ui-1.8.18.custom.min.js" all'oggetto html spuntanto l'opzione "collega alla pagina"


7. Ho inserito il codice nella home page prima della sezione "HEAD"




Però il risultato è sulla home page un'oggetto html com la scritta "[size=78%]$dati){                    $img=$dati['body'];                    $start=strpos($img,'[/size][size=78%]'))- $start));                    $srcstart= (strpos($img,'src'))+8;                                            $img=substr($img,  $srcstart,((strpos($img,'class'))- $srcstart - 2));                    echo "

".$dati['title']."".$dati['summary'].".%22\%22]
Continua a leggere .... ";                      }               ?>"


Dove ho sbagliato?[/size]

[stesil]

1. Ho fatto divetare la home page una pagina php (cosa cambia visto che prima era una pagina html?)

Il codice inserito è scritto in php. Perchè venga interpretato l'estensione del file che lo contiene deve essere .php. Se viene inserito in una pagina .html, viene visualizzato come codice.

2. Ho scaricato il file zip dal sito (ma poi non ci ho fatto nulla)

Oltre al file css, che puoi scegliere se allegare o copiare nella scheda css, nel file zip ci sono le immagini di sfondo dello slider. Anche quelle sono da allegare attraverso l'oggetto html.

5. Poi non ho capito ciò che si diceva riguardo all'alternativa di allegare il file .css (suppongo quello che avevo scaricato nel file .zip) e modificare il percorso delle immagini
 

E' un'alternativa all'inserimento del codice nella scheda css.

Però il risultato è sulla home page un'oggetto html com la scritta "$dati{img=$dati['body'];   
$start=strpos($img,'))- $start)); [ .....]"

Penso che tu stia visualizzando la pagina in anteprima. E, se è così, non può funzionare perchè in anteprima tutte le pagine, anche quelle con estensione php, vengono trasformate in file .html .... e il codice php non viene eseguito. Se vuoi vedere qualcosa puoi inserire il tutto in una pagina nascosta del sito ed esportare online.           

[Manipulus Mosca]

Ho creato la pagina "prova".

Adesso riesco a vedere in suddetta pagina la slideshow con le immagini degli ultimi articoli del blog, ma

1. Non riesco a ingrandire la cella HTML, anche se ne modifico l'altezza.

3. Devo riuscire a impostare meglio il tutto, compreso il link all'articolo del blog

Comunque il risultato è un buon inizio, sono sulla strada buona


http://www.manipulusmosca.com/prova.php

[stesil]

Per aumentare l'altezza non devi agire solo sull'oggetto html, ma anche sul codice css dello slider e sui valori di width e height delle immagini nel codice php.

Tutto lo slider è contenuto nel div con id featured (#featured nel css) per il quale è impostata, nell'esempio, un'altezza di 250px, pari all'altezza dell'immagine ingrandita. Le miniature con rispettivi link, che sono contenute in una lista (#featured ul.ui-tabs-nav ), hanno una distanza dal margine sinistro del contenitore principale pari a 400px, tanto quanto la larghezza dell'immagine ingrandita e hanno ciascuna un'altezza di 60px (#featured li.ui-tabs-nav-item a) ... 60 x 4 = 240px i 10px restanti sono distribuiti come valori di padding tra un elemento di lista e l'altro.

... e se si vogliono modificare le altezze sono questi i valori da modificare, rispettando le proporzioni complessive ...e ... è tutto da provare.

[Manipulus Mosca]

Farò molte prove e poi vi farò sapere.


Non esiste un modo più pratico per vedere i risultati delle prove piuttosto che ogni volta esportare?

Sto usando http://cssdesk.com/ ma vedo solo scritte e riesco a capire poco delle modifiche

Grazie

[Manipulus Mosca]

Purtroppo dopo una estenuante serata in cui ho fatto tantissime prove non sono riuscito a fare granchè.


Ecco il risultato: [size=78%]http://www.manipulusmosca.com/prova.php[/size]


Ecco il codice che ho usato
[/code]

Codice:

Only registered users can see contents. Please click here to Register or Login.

[stesil]

Ciao,

il mio esempio funziona bene perchè le immagini inserite negli articoli hanno tutte le stesse dimensioni. Se inserisci un'immagine con 200px di larghezza e 400px di altezza e, in un altro articolo, l'immagine ha proporzioni opposte, cioè è più larga che alta ... nello slider una delle due si vedrà deformata, perchè le dimensioni che si possono impostare sono uguali per tutte le immagini.

Detto questo, prova a modificare anche il codice php inserito nell'oggetto html in questi punti:

1. sostituisci alla parola 'class' la parola 'style', come nell'esempio sotto (devono essere fatte due sostituzioni, perchè questa riga di codice è presente due volte):

$img=substr($img,  $srcstart,((strpos($img,'style'))- $srcstart - 2));

Questa parte del codice serve per individuare il nome dell'immagine all'interno dei dati dell'articolo del blog. Le tue immagini negli articoli non hanno una classe, e quindi il codice precedente includeva nel nome dell'immagine qualcosa di troppo.

2. Prova a modificare le dimensioni delle immagini, sempre nel codice php, in modo che siano proporzionate a quelle reali e conformi alle nuove impostazioni di css che hai dato allo slider:

Questa è la riga di codice in cui si trovano le dimensioni delle miniature:

echo "<li class=\"ui-tabs-nav-item ui-tabs-selected\" id=\"nav-fragment-".$key."\"><a href=\"#fragment-".$key."\"><img src=\"".$img."\" width=\"80\" height=\"50\" alt=\"\"><span>".$dati['title']."</span></a></li>"

E in questa ci sono le dimensioni dell'immagine ingrandita:

echo "<div id=\"fragment-".$key."\" class=\"ui-tabs-panel\" style=\"\"><img src=\"".$img."\" width=\"400\" height=\"250\" alt=\"\"><div class=\"info\"><h2>".$dati['title']."</h2><p>".$dati['summary']."<a  href=\"blog/index.php?id=".$dati['id']."\"><br />Continua a leggere .... </a></p></div></div>"

Purtroppo dopo una estenuante serata in cui ho fatto tantissime prove non sono riuscito a fare granchè.

Se ti può consolare, quando si vuole provare qualcosa di personalizzato, e non di semplice attuazione, rispetto a quanto fa di suo il programma .... questa cosa succede molto spesso.

[Manipulus Mosca]

Innanzitutto devo ringraziarti per il prezioso aiuto.


Dopo le tue dritte ho continuato a fare prove e sono arrivato a questo punto: [size=78%]http://www.manipulusmosca.com/prova.php[/size]


Mi sembra un buon risultato.
Comunque avrei ancora un altro paio di questioni:


1. Vorrei cambiare lo sfondo dell'oggetto html, mettendoci una foto. come fare?
2. Vorrei dare a qualche parte dell'oggetto uno sfondo trasparente, tipo grigio trasparente così da permettermi di vedere cosa c'è sotto. Come fare?


Ecco il codice html  e poi quello CSS dell'oggetto:
[/code]

Codice:

Only registered users can see contents. Please click here to Register or Login.

Codice:

Only registered users can see contents. Please click here to Register or Login.

[stesil]

1. Vorrei cambiare lo sfondo dell'oggetto html, mettendoci una foto. come fare?

Da programma, impostando lo stile della cella dell'oggetto html.

2. Vorrei dare a qualche parte dell'oggetto uno sfondo trasparente, tipo grigio trasparente così da permettermi di vedere cosa c'è sotto. Come fare?

Con una png trasparente, con un codice css come quello utilizzato ad esempio per lo sfondo della didascalia dell'immagine ingrandita:
   
#featured .ui-tabs-panel .info {background: url("../images/transparent-bg.png")} 
   

[Manipulus Mosca]

Dopo gli inestimabili aiuti di Stesil forse ci siamo riusciti. 

Ecco il risultato quasi finale.

Adesso lo provo qui e poi tra un pò lo sposto nella home page
http://www.manipulusmosca.com/prova.php

Che problemi potrebbe darmi una home page che passa da html a php?

[Manipulus Mosca]

Dimenticavo,
sono sempre disponibile per successivi miglioramenti che mi consiglierete.


Ecco il codice CSS:
[/code]

Codice:

Only registered users can see contents. Please click here to Register or Login.

[stesil]

Che problemi potrebbe darmi una home page che passa da html a php?

Se ci sono link da altri siti che puntano alla pagina index.html non funzioneranno più.

Poi c'è da considerare, penso, anche l'indicizzazione della pagina ... ma qui mi fermo e lascio la parola a chi ne sa più di me.

[Manipulus Mosca]

Che problemi potrebbe darmi una home page che passa da html a php?

Se ci sono link da altri siti che puntano alla pagina index.html non funzioneranno più.

Poi c'è da considerare, penso, anche l'indicizzazione della pagina ... ma qui mi fermo e lascio la parola a chi ne sa più di me.

In effetti ho notato che quando digito www.manipulusmosca.com mi manda alla home page .html e non a quella nuova .php


Non sò se è una cosa momentanea oppure definitiva