Antonio Brunato developer http://www.antoniobrunato.eu Web developer Napoli Sat, 24 Jun 2017 15:47:26 +0000 it-IT hourly 1 https://wordpress.org/?v=4.8.4 Banner accettazione cookiehttp://www.antoniobrunato.eu/accettazione-cookies-privacy-banner.html http://www.antoniobrunato.eu/accettazione-cookies-privacy-banner.html#respond Wed, 03 Feb 2016 15:00:35 +0000 http://www.antoniobrunato.eu/?p=285 Per inserire sul proprio sito un banner accettazione cookie, vi propongo due soluzioni. La prima soluzione, è quella di mostrare una finestra di dialogo che appare sul vostro sito, prima che il visitatore inizi la navigazione. La seconda soluzione invece,...

L'articolo Banner accettazione cookie sembra essere il primo su Antonio Brunato developer.

]]>
Per inserire sul proprio sito un banner accettazione cookie, vi propongo due soluzioni.

La prima soluzione, è quella di mostrare una finestra di dialogo che appare sul vostro sito, prima che il visitatore inizi la navigazione.
La seconda soluzione invece, è quella di mostrare un banner nelle pagine in cui viene inserito lo script.

In entrambe le soluzioni quando l’utente decide di cliccare sul pulsante “Accetta” o “Chiudi”, verrà generato un cookie dalla durata di 12 mesi, in questo modo il visitatore per un anno non dovrà dare nuovamente il consenso.

Passiamo alla pratica:
La prima cosa da fare è quella di creare sul vostro sito una pagina dedicata alla cookie policy.

A prescindere dalla soluzione che avete scelto, avete bisogno di copiare sul server il file cookiechoices.js (che potete scaricare dal seguente link).
Download cookiechoices.js
Una volta scaricato dovete scompattare l’archivio e caricare il file sul server.

Se scegliete la prima soluzione e cioè visualizzare una finestra di dialogo col messaggio, vi basta inserire il seguente codice all’interno del tag <body> delle pagine del vostro sito.

<script src="/cookiechoices.js"></script>
<script>// <![CDATA[
document.addEventListener('DOMContentLoaded', function(event) { 
cookieChoices.showCookieConsentDialog('Il tuo messaggio.', 'Chiudi', 'Maggiori Informazioni', 'http://indirizzo_pagina_cookie_policy'); 
});
// ]]></script>

Controllate che il percorso del file sia quello indicato nella prima riga dello script.
Inoltre dovete modificare il link di destinazione inserendo l’indirizzo della pagina dedicata alla cookie policy presente sul vostro sito.

Se scegliete la soluzione del banner, lo script da inserire nel tag <body> delle pagine del sito, è il seguente.

<script src="/cookiechoices.js"></script>
<script>// <![CDATA[
document.addEventListener('DOMContentLoaded', function(event) { 
cookieChoices.showCookieConsentBar('Il tuo messaggio per i visitarori.', 'Chiudi', 'Maggiori Informazioni', 'http://indirizzo_pagina_cookie_policy'); 
});
// ]]></script>

Anche in questo caso, fate attenzione che il file sia stato caricato nella posizione indicata nello script e che l’indirizzo corretto della pagina sia quello riportato nello script.

A questo punto non dovete far altro che personalizzare il messaggio da mostrare ai vostri utenti.

L'articolo Banner accettazione cookie sembra essere il primo su Antonio Brunato developer.

]]>
http://www.antoniobrunato.eu/accettazione-cookies-privacy-banner.html/feed 0
Loading ajax jqueryhttp://www.antoniobrunato.eu/loading-ajax-jquery.html http://www.antoniobrunato.eu/loading-ajax-jquery.html#respond Thu, 12 Nov 2015 11:09:51 +0000 http://www.antoniobrunato.eu/?p=252 Chi utilizza jquery non può non aver utilizzato il metodo Ajax per effettuare una chiamata asincrona. Spesso quando si utilizza questo metodo possono passare alcuni secondi tra la chiamata e la risposta del server. In questo tempo di attesa, l’utente...

L'articolo Loading ajax jquery sembra essere il primo su Antonio Brunato developer.

]]>
Chi utilizza jquery non può non aver utilizzato il metodo Ajax per effettuare una chiamata asincrona.
Spesso quando si utilizza questo metodo possono passare alcuni secondi tra la chiamata e la risposta del server.

In questo tempo di attesa, l’utente può effettuare qualsiasi altra operazione, anche ripetere la chiamata che è in fase di elaborazione. Per questo motivo è meglio prevedere questa situazione, magari mostrando un loading mentre la chiamata ajax viene effettuata.

Per inserire un loading c’è bisogno prima di creare un div con un’immagine per il loading:

<div id="loading" style="display:none;"><img src="img/loading.gif" /></div>

Questo div inizialmente non verrà mostrato.

Al momento della chiamata ajax mostriamo il div con l’immagine e quando la chiamata ajax è terminata nascondiamo il div.
Per fare questo ci serviamo dei metod ajaxStart e ajaxComplete, entrambi appartenenti alla libreria jQuery.

$(document).ajaxStart(function () {
   $("#loading").show();
});

$(document).ajaxComplete(function(){
   $("#loading").hide();
});

L'articolo Loading ajax jquery sembra essere il primo su Antonio Brunato developer.

]]>
http://www.antoniobrunato.eu/loading-ajax-jquery.html/feed 0
Login admin Magento in localhosthttp://www.antoniobrunato.eu/login-admin-magento-in-localhost.html http://www.antoniobrunato.eu/login-admin-magento-in-localhost.html#respond Fri, 26 Jun 2015 14:17:50 +0000 http://www.antoniobrunato.eu/?p=244 Qualche giorno fa ho installato il CMS Magento sul server locale XAMPP. L’installazione è riuscita ed ho settato tutti i parametri per completare la configurazione dell’ecommerce. Al momento del login al pannello di amministrazione, ho provato ed eseguire l’accesso con...

L'articolo Login admin Magento in localhost sembra essere il primo su Antonio Brunato developer.

]]>
Qualche giorno fa ho installato il CMS Magento sul server locale XAMPP. L’installazione è riuscita ed ho settato tutti i parametri per completare la configurazione dell’ecommerce.
Al momento del login al pannello di amministrazione, ho provato ed eseguire l’accesso con i dati settati al momento della configurazione, ma non accadeva nulla. Non riuscivo ad accedere al pannello di controllo. La pagina ricaricava ma senza mostrarmi alcun errore.

Dopo varie ricerche sul web sono arrivato alla soluzione:

  • Eliminare tutto il contenuto della cartella var/cache di magento;
  • Sostituire localhost con http://127.0.0.1/ nell’URL del browser.

Fatto questo, basta aggiornare la pagina ed effettuare il login.

L'articolo Login admin Magento in localhost sembra essere il primo su Antonio Brunato developer.

]]>
http://www.antoniobrunato.eu/login-admin-magento-in-localhost.html/feed 0
Creare file word con phphttp://www.antoniobrunato.eu/creare-file-word-con-php.html http://www.antoniobrunato.eu/creare-file-word-con-php.html#respond Wed, 03 Jun 2015 18:22:34 +0000 http://www.antoniobrunato.eu/?p=233 E’ possibile creare un file word con php attraverso la funzione header. La funzione header() invia un’intestazione HTTP ad un client. E’ importante notare che header() deve essere chiamato prima di ogni output inviato. Come creare file word con php...

L'articolo Creare file word con php sembra essere il primo su Antonio Brunato developer.

]]>
E’ possibile creare un file word con php attraverso la funzione header.
La funzione header() invia un’intestazione HTTP ad un client.

E’ importante notare che header() deve essere chiamato prima di ogni output inviato.

Come creare file word con php

Vediamo adesso come creare un file word con php.
La sintassi è molto semplice e la trovate di seguito:

<?php
header("Content-type: application/vnd.ms-word");
header("Content-Disposition: attachment;Filename=document_name.doc");

echo "<html>";
echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows-1252\">";
echo "<body>";
echo "<b>My first document</b>";
echo "</body>";
echo "</html>";
?>

Il risultato di questo script sarà il download automatico di un file word che avrà il nome specificato per il parametro “Filename”.
A questo script si possono associare sia tag HTML che uno stile CSS ma senza alcun richiamo a file esterni, quindi dovrà essere tutto contenuto all’interno di questo file.

L'articolo Creare file word con php sembra essere il primo su Antonio Brunato developer.

]]>
http://www.antoniobrunato.eu/creare-file-word-con-php.html/feed 0
Media query retina displayhttp://www.antoniobrunato.eu/media-query-retina-display.html http://www.antoniobrunato.eu/media-query-retina-display.html#respond Sat, 23 May 2015 10:07:07 +0000 http://www.antoniobrunato.eu/?p=219 Con le media query è possibile includere delle regole css solo per i retina display. Includere delle regole per i retina display è semplicissimo. La sintassi corretta della media query è la seguente: @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-width: 1024px)...

L'articolo Media query retina display sembra essere il primo su Antonio Brunato developer.

]]>
Con le media query è possibile includere delle regole css solo per i retina display.
Includere delle regole per i retina display è semplicissimo.
La sintassi corretta della media query è la seguente:

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-width: 1024px) { 
    /* Regole specifiche per i display retina */
}

Questa appena mostrata è la corretta sintassi per applicare delle regole css ad un retina display.

Questo esempio imposta delle regole per un retina display su browser come chrome e safari (-webkit-min-device-pixel-ratio: 2) e (mozilla min–moz-device-pixel-ratio: 2) per una risoluzione minima di 1024px (min-width: 1024px).

L'articolo Media query retina display sembra essere il primo su Antonio Brunato developer.

]]>
http://www.antoniobrunato.eu/media-query-retina-display.html/feed 0
Carousel bootstrap con thumbnailhttp://www.antoniobrunato.eu/carousel-bootstrap-thumbnail.html http://www.antoniobrunato.eu/carousel-bootstrap-thumbnail.html#respond Thu, 21 May 2015 09:55:30 +0000 http://www.antoniobrunato.eu/?p=211 Dopo aver visto come creare un carousel verticale con bootstrap oggi vediamo con bootstrap come creare un carousel con thumbnail. Le thumbnail sono delle semplici miniature, che in questo caso ci serviranno come anteprima dell’immagine del carousel. Faremo in modo...

L'articolo Carousel bootstrap con thumbnail sembra essere il primo su Antonio Brunato developer.

]]>
Dopo aver visto come creare un carousel verticale con bootstrap oggi vediamo con bootstrap come creare un carousel con thumbnail.
Le thumbnail sono delle semplici miniature, che in questo caso ci serviranno come anteprima dell’immagine del carousel. Faremo in modo che cliccando su una miniatura, ci verrà mostrata direttamente nel carousel l’immagine che abbiamo cliccato, senza dover scorrere tutte le immagini del carousel.

Come già spiegato in qualche articolo precedente, la prima cosa da fare è quella di scaricare bootstrap dal proprio sito ufficiale. Includiamo adesso i file bootstrap.min.css, presente nella cartella css e il file bootstrap.min.js presente nella cartella js e come sempre la libreria js. Quindi nel tag head ci sarà:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Fatto questo non ci resta che creare il carousel bootstrap con thumbnail.

Iniziamo con il codice HTML:

<div class="container">
  	<!-- thumb navigation carousel -->
    <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">
        
            <!-- thumb navigation carousel items -->
          <ul class="list-inline">
          <li> <a id="carousel-selector-0" class="selected">
            <img src="img1.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-1">
            <img src="img2.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-2">
            <img src="img3.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-3">
            <img src="img4.jpg" class="img-responsive">
          </a></li>
                <li> <a id="carousel-selector-4">
            <img src="img5.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-5">
            <img src="img6.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-6">
            <img src="img7.jpg" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-7">
            <img src="img8.jpg" class="img-responsive">
          </a></li>
            </ul>
        
    </div>
  
    <!-- main slider carousel -->
    <div class="row">
        <div class="col-md-12" id="slider">
                <div class="col-md-12" id="carousel-bounding-box">
                    <div id="myCarousel" class="carousel slide">
                        <!-- main slider carousel items -->
                        <div class="carousel-inner">
                            <div class="active item" data-slide-number="0">
                                <img src="img-large1.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="1">
                              <img src="img-large2.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="2">
                                <img src="img-large3.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="3">
                                <img src="img-large4.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="4">
                                <img src="img-large5.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="5">
                                <img src="img-large6.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="6">
                                <img src="img-large7.jpg" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="7">
                                <img src="img-large8.jpg" class="img-responsive">
                            </div>
                        </div>
                        <!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>

                        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
                    </div>
                </div>

        </div>
    </div>
    <!--/main slider carousel-->

</div>

L’unico stile diverso che ho dato al carousel bootstrap con thumbnail rispetto a quello del carousel bootstrap di default è quello di dare un’opacità alla thumbnail selezionata. Di seguito la regola css:

.selected img {
	opacity:0.5;
}

Una volta associato anche lo stile, non ci resta che dare vita al nostro carousel bootstrap con thumbnail.

Di seguito trovate lo script js per il funzionamento del carousel.

$('#myCarousel').carousel({
    interval: 4000
});

// click su thumbnail
$('[id^=carousel-selector-]').click( function(){
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length -1);
  id = parseInt(id);
  $('#myCarousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});

// quando la slide cambia automaticamente
$('#myCarousel').on('slid', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
});

Con questo script, le slide del carousel cambiano ogni 4 secondi automaticamente, se volete disattivare questa opzione, vi basta mettere “false” al posto di “4000” al parametro “interval”.

L'articolo Carousel bootstrap con thumbnail sembra essere il primo su Antonio Brunato developer.

]]>
http://www.antoniobrunato.eu/carousel-bootstrap-thumbnail.html/feed 0
Carousel verticale bootstraphttp://www.antoniobrunato.eu/carousel-verticale-bootstrap.html http://www.antoniobrunato.eu/carousel-verticale-bootstrap.html#respond Mon, 30 Mar 2015 06:12:35 +0000 http://www.antoniobrunato.eu/?p=196 Qualche giorno fa mi si è presentata la necessità di creare un carousel verticale che sia anche responsive. La prima cosa a cui ho pensato, è stata quella di utilizzare bootstrap. Per chi non lo conoscesse, bootstrap è un framework...

L'articolo Carousel verticale bootstrap sembra essere il primo su Antonio Brunato developer.

]]>
Qualche giorno fa mi si è presentata la necessità di creare un carousel verticale che sia anche responsive. La prima cosa a cui ho pensato, è stata quella di utilizzare bootstrap. Per chi non lo conoscesse, bootstrap è un framework HTML, CSS e JS utilissimo per realizzare progetti web responsive.

Bootstrap mette a disposizione diversi esempi già pronti per l’utilizzo, come menù, pagina di login ed anche un carousel. Il carousel messo a disposizione da bootstrap è un classico carousel orizzontale, ma io avevo bisogno di un carousel verticale.

Il primo passo da fare per utilizzare bootstrap è quello di scaricarlo dal proprio sito (ho inserito il link nel primo paragrafo dell’articolo). Una volta scaricato, nel nostro sito dobbiamo includere i file bootstrap.min.css, presente nella cartella css e il file bootstrap.min.js presente nella cartella js e come sempre la libreria js. Quindi nel tag head del sito scriviamo:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Una volta inclusi i file, ho pensato di modificare il carousel di bootstrap per creare il mio carousel verticale.

Di seguito potete trovare il codice HTML.

<div class="container">
    <div class="row-fluid">
	<div class="span6 offset3">
		<div id="carousel_verticale" class="carousel slide vertical">
			<!-- Carousel items -->
			<div class="carousel-inner">
				<div class="active item">
					<img src="slide1.jpg">
				</div>
				<div class="item">
					<img src="slide2.jpg">
				</div>
				<div class="item">
					<img src="slide3.jpg">
				</div>
			</div>
			<!-- Carousel nav -->
			<a class="carousel-control left" href="#carousel_verticale" data-slide="prev">‹</a>
			<a class="carousel-control right" href="#carousel_verticale" data-slide="next">›</a>
		</div>
	</div>
     </div>
</div>

Una volta inserita la struttura del carousel verticale, inseriamo anche il file css per dargli lo stile.

.vertical .carousel-inner {
  height: 100%;
}
.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
  top: 0;
}
.carousel.vertical .next {
  top: 400px;
}
.carousel.vertical .prev {
  top: -400px;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
  top: 0;
}
.carousel.vertical .active.left {
  top: -400px;
}
.carousel.vertical .active.right {
  top: 400px;
}
.carousel.vertical .item {
    left: 0;
}

Ed infine lo script js, che non fa altro che associare la funzione carousel al nostro div con id carousel_verticale.

$('#carousel_verticale').carousel({
  interval: 3000
})

Tutto qui! Abbiamo creato un carousel verticale bootstrap

La funzione carousel di bootstrap accetta diversi parametri, io ho inserito solo interval settato a 3000, cioè che ogni 3 secondi deve passare alla slide successiva. Se non volete lo scorrimento automatico delle slide vi basta impostare a false il parametro interval. Qui c’è il link per visualizzare gli altri parametri che accetta la funzione carousel di bootstrap.

L'articolo Carousel verticale bootstrap sembra essere il primo su Antonio Brunato developer.

]]>
http://www.antoniobrunato.eu/carousel-verticale-bootstrap.html/feed 0
Bottone Torna in alto a comparsahttp://www.antoniobrunato.eu/bottone-torna-in-alto-a-comparsa.html http://www.antoniobrunato.eu/bottone-torna-in-alto-a-comparsa.html#respond Sat, 28 Mar 2015 12:40:25 +0000 http://www.antoniobrunato.eu/?p=173 In questo articolo vi mostro come mostrare il bottone torna in alto a comparsa con jquery, dopo aver scrollato la pagina. Passiamo al codice: <html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script> </head> <body> <h2>Esempio bottone torna in alto</h2> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br>...

L'articolo Bottone Torna in alto a comparsa sembra essere il primo su Antonio Brunato developer.

]]>
In questo articolo vi mostro come mostrare il bottone torna in alto a comparsa con jquery, dopo aver scrollato la pagina.

Passiamo al codice:

<html>
    <head>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    </head>
<body>
<h2>Esempio bottone torna in alto</h2>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

<div id="back_to_top"><img width="100" src="freccia-su.jpg"></div>

</body>
</html>

La prima cosa da fare è quella di includere la libreria jquery al nostro sito e di seguito i vari file esterni che ci servono per creare il bottone torna in alto.
All’interno del body abbiamo inserito dei semplici tag
per far si che la pagina sia un po’ più alta. Prima di chiudere il body inseriamo in un div l’immagine per tornare al top della pagina.

Adesso associamo uno stile al nostro bottone torna in alto, creando un file css:

#torna_in_alto{
display:none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    cursor: pointer;
}

Infine, vediamo lo script più interessante per creare il bottone torna in alto.

Creiamo il file js contenente lo script per il nostro bottone torna in alto.

$(document).ready(function()
{
    // scroll dello pagina
    $(window).scroll(function(){
       // mostro l'icona con effetto dissolvenza
        $("#torna_in_alto").fadeIn(500);

       // Se torno ad inizio pagina, nascondo l'icona con effetto dissolvenza
        if ($("body").scrollTop() == 0)
        {
            $("#torna_in_alto").fadeOut(500);
        }
    }); // fine scroll pagina

    // Al click sull'icona, torno ad inizio pagina
    $("#torna_in_alto").click(function(){
        $("html,body").animate({scrollTop: 0}, 500, function(){});
    });
});

Ora spieghiamo questo semplice script.
Quando scrollo la pagina, la prima istruzione che lo script esegue è quella di mostrare il bottone torna in alto con effetto fade. Se, sempre scrollando la pagina, torno al top, nascondo il bottone torna in alto, sempre con effetto fade.
Quando clicco sul bottone porto la pagina al top con la funzione animate.
Ovviamente l’immagine non rende, quindi potete vedere un vi segnalo il link per provare il bottone torna in alto.

L'articolo Bottone Torna in alto a comparsa sembra essere il primo su Antonio Brunato developer.

]]>
http://www.antoniobrunato.eu/bottone-torna-in-alto-a-comparsa.html/feed 0
Css in base alla larghezza dello schermohttp://www.antoniobrunato.eu/css-in-base-alla-larghezza-dello-schermo.html http://www.antoniobrunato.eu/css-in-base-alla-larghezza-dello-schermo.html#comments Tue, 24 Mar 2015 13:27:39 +0000 http://www.antoniobrunato.eu/?p=79 Per ottimizzare un sito per il mobile, spesso utilizziamo le media queries, ma oggi vi mostro un’alternativa. L’alternativa alle media queries che vi propongo è quella di creare dei fogli di stile, file css (Cascading Style Sheets), appositi in base...

L'articolo Css in base alla larghezza dello schermo sembra essere il primo su Antonio Brunato developer.

]]>
Per ottimizzare un sito per il mobile, spesso utilizziamo le media queries, ma oggi vi mostro un’alternativa.
L’alternativa alle media queries che vi propongo è quella di creare dei fogli di stile, file css (Cascading Style Sheets), appositi in base alla larghezza dello schermo.
E’ tutto molto semplice. Vi basta creare il file css e nell’head del vostro sito, inserire la seguente riga, che serve ad includere il file nel sito:

<link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 1024px)" href="100-1024.css" />

Come potete vedere è molto semplice, quello che specifichiamo è che se la larghezza dello schermo è compresa tra
320px e 1024px allora richiamo il file specificato nell’attributo href.

L'articolo Css in base alla larghezza dello schermo sembra essere il primo su Antonio Brunato developer.

]]>
http://www.antoniobrunato.eu/css-in-base-alla-larghezza-dello-schermo.html/feed 1
Stampare immagine in evidenza con didascaliahttp://www.antoniobrunato.eu/stampare-immagine-in-evidenza-con-didascalia.html http://www.antoniobrunato.eu/stampare-immagine-in-evidenza-con-didascalia.html#respond Wed, 18 Mar 2015 19:14:11 +0000 http://www.antoniobrunato.eu/?p=163 In precedenza ho pubblicato un articolo su come stampare l’immagine in evidenza di un post in wordpress. Oggi vi mostro come stampare la didascalia dell’immagine in evidenza che abbiamo inserito per un post La prima cosa da fare è quella...

L'articolo Stampare immagine in evidenza con didascalia sembra essere il primo su Antonio Brunato developer.

]]>
In precedenza ho pubblicato un articolo su come stampare l’immagine in evidenza di un post in wordpress.

Oggi vi mostro come stampare la didascalia dell’immagine in evidenza che abbiamo inserito per un post

La prima cosa da fare è quella di prelevare l’immagine in evidenza del post, quindi nella pagina del singolo articolo (in genere la pagina è single.php), inseriamo il seguente script.

<? /* STAMPO L'IMMAGINE IN EVIDENZA DELLA PAGINE E PRELEVO LA SUA DIDASCALIA */
if ( has_post_thumbnail()) {
    $array_immagine = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
    $link = $array_immagine[0];
    $thumb_caption = get_post(get_post_thumbnail_id())->post_excerpt;?>
    <div class="contenitore_banner">
	    <div class="testo_banner">
	    	<!-- DIDASCALIA IMMAGINE IN EVIDENZA -->
			<span><?=$thumb_caption;?></span>
		</div>
	    <div class="banner_pagina">
	    	<!-- STAMPO L'IMMAGINE IN EVIDENZA -->
			<img src="<?=$link?>" />
		</div>
	</div>
<? } ?>

Lo script è commentato, ma in ogni caso adesso vi spiego meglio come stampare la didascalia dell’immagine in evidenza.
Innanzitutto dobbiamo vedere se il post ha un’immagine in evidenza, quindi utilizziamo la funzione di wordpress has_post_thumbnail(). Una volta verificata l’esistenza dell’immagine la dobbiamo prelevare, quindi con l’aiuto della funzione wp_get_attachment_image_src() possiamo farlo tranquillamente, questa funzione accetta come parametro l’id dell’allegato, che otteniamo con la funzione get_post_thumbnail_id() e come secondo parametro, ma queso è opzionale, accetta la grandezza dell’immagine desiderata.

La funzione wp_get_attachment_image_src() restituisce un array contenente l’url, la larghezza e l’altezza dell’immagine in evidenza, proprio in questo ordine.
Detto questo, quindi, con la variabile $link identifichiamo l’url dell’immagine.

Adesso vediamo come prelevare la didascalia dell’immagine in evidenza.

Con la funzione get_post() preleviamo la didascalia dell’immagine in evidenza e la inseriamo nella variabile $thumb_caption.
Una volta fatto questo, non ci resta che stampare nel modo che preferiamo, le variabili che abbiamo ottenuto.

L'articolo Stampare immagine in evidenza con didascalia sembra essere il primo su Antonio Brunato developer.

]]>
http://www.antoniobrunato.eu/stampare-immagine-in-evidenza-con-didascalia.html/feed 0