{"id":3821,"date":"2008-11-01T15:37:41","date_gmt":"2008-11-01T14:37:41","guid":{"rendered":"https:\/\/www.dreamsworld.it\/emanuele\/?p=3821"},"modified":"2016-05-17T11:30:08","modified_gmt":"2016-05-17T09:30:08","slug":"background-random-via-css-e-php","status":"publish","type":"post","link":"https:\/\/www.dreamsworld.it\/emanuele\/2008-11-01\/background-random-via-css-e-php\/","title":{"rendered":"Background random via CSS e PHP."},"content":{"rendered":"

In questi giorni<\/span> queste notti<\/strong> ho lavorato per rifare il sito del mio gruppo scout. Sar\u00e0 online tra un paio di settimane ed ho deciso di sfruttare WordPress<\/a> per pubblicare le notizie.<\/p>\n

Una cosa carina che ho voluto realizzare \u00e8 un background fisso<\/strong> con alcune foto prese da attivit\u00e0 scout su cui la pagina scorre.<\/p>\n

In un CSS<\/a> per\u00f2, non \u00e8 possibile richiamare immagini random<\/strong>, cos\u00ec ho risolto con un piccolo ma semplicissimo hack.<\/p>\n

La classe body<\/em> \u00e8 diventata come segue:<\/p>\n

body {\r\n   background: url(images\/randimg.php) no-repeat 0 0 #fff;\r\n   background-attachment:fixed;\r\n   color: #000;\r\n   font-family: Arial, Verdana, sans-serif;\r\n   margin: 0;\r\n   padding: 0;\r\n}<\/pre>\n
In questo modo il background, richiama come immagine un piccolissimo script<\/strong> PHP<\/a> che ritorner\u00e0 una immagine random<\/strong>.<\/p>\n
Sul web esistono svariati script per richiamare file random da una directory, personalmente per\u00f2 non volevo appesantire il codice con routine inutili<\/strong> ed ho compresso tutto nella seguente riga:<\/p>\n
<?php header('Location: image00'.rand(1,7).'.jpg'); ?><\/pre>\n
Le immagini vanno salvate nella cartella images\/<\/em> numerandole nel formato image00*.jpg e sostituendo all’asterisco<\/strong> un numero incrementale. Personalmente avevo meno di 10 immagini da far ruotare, cos\u00ec ho scritto il codice adattandolo alle mie necessit\u00e0. Comunque, \u00e8 semplicissimo aumentare il numero di file che verranno presi in considerazione dallo script.<\/p>\n
Il comando rand(1,7)<\/em>, serve appunto a specificare tra quali valori dovr\u00e0 muoversi il numero casuale<\/em> generato.<\/p>\n
Infine, il file randimg.php<\/em> va salvato nella stessa directory<\/strong> in cui salveremo le immagini (nel mio caso dentro images\/<\/em>).<\/p>\n
Si potrebbe facilmente implementare il codice per far controllare il numero di file<\/strong> presenti nella directory automaticamente, ma se non cambia frequentemente \u00e8 bene evitarlo per alleggerire quanto pi\u00f9 possibile il codice da processare e rendere tutto il pi\u00f9 leggero e veloce possibile.<\/p>\n
Vi farei vedere il risultato se il sito fosse gi\u00e0 online…<\/em> \ud83d\ude42<\/p>\n
Emanuele<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
In questi giorni queste notti ho lavorato per rifare il sito del mio gruppo scout. Sar\u00e0 online tra un paio di settimane ed ho deciso di sfruttare WordPress per pubblicare le notizie. Una cosa carina che ho voluto realizzare \u00e8 … Leggi ancora →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_post_was_ever_published":false},"categories":[4],"tags":[1094,542,483,361,653,640,496,1095,1096,529,528],"class_list":["post-3821","post","type-post","status-publish","format-standard","hentry","category-internet","tag-background","tag-blog-design","tag-css","tag-foto","tag-guide","tag-how-to","tag-php","tag-random","tag-script","tag-siti-web","tag-web-design"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/3821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/comments?post=3821"}],"version-history":[{"count":0,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/3821\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/media?parent=3821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/categories?post=3821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/tags?post=3821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}