search

fomofoto / fomofoto.github.io

Italian portfolio of Antonio Trento
https://fomofoto.net
Other
1 stars 0 forks source link

Sidebar, creare una sidebar dinamica che modifica la call to action #15

Open antoniotrento opened 6 years ago

antoniotrento commented 6 years ago

Facendo una sidepad dinamica potrò modificare la call to action della stessa in base al tipo di post che viene visualizzato consentendomi di redirigere il traffico ad una pagina adatta al tipo di post scritto:

<aside class="commerce-blog-sidebar commerce-side-panel xs-hide sm-hide md-col-4 md-px4 md-pt6">
{{ if post.sidebar == null }}
    <h1 class="h5 md-pb2">{{ site.aside-title }}</h1>
    <amp-img src="{{ site.url }}{{ site.baseurl }}/assets/images/{{ site.aside-image }}" width="300" height="200" alt="Antonio Trento photographer"></amp-img>
    <p class="mb2">{{ site.aside-description }}</p>
    <a href="{{ site.aside-button-link }}" class="commerce-blog-link inline-block h7 md-mb4">
        {{ site.aside-button-text }}
    </a>
{{ endif }}

{{ if post.sidebar == drone }}
    <h1 class="h5 md-pb2">{{ site.aside-title }}</h1>
    <amp-img src="{{ site.url }}{{ site.baseurl }}/assets/images/{{ site.aside-image }}" width="300" height="200" alt="Antonio Trento photographer"></amp-img>
    <p class="mb2">Descrizione fotografia drone con cal to action potente per fare in modo di attirare l'attenzione</p>
    <a href="{{ page.sidebar-button-link }}" class="commerce-blog-link inline-block h7 md-mb4">
        {{ page.sidebar-button-text }}
    </a>
{{ endif }}

{{ if page.sidebar == ritratto }}
    <h1 class="h5 md-pb2">{{ site.aside-title }}</h1>
    <amp-img src="{{ site.url }}{{ site.baseurl }}/assets/images/{{ site.aside-image }}" width="300" height="200" alt="Ritratto"></amp-img>
    <p class="mb2">Descrizione fotografia drone con cal to action potente per fare in modo di attirare l'attenzione</p>
    <a href="{{ page.sidebar-button-link }}" class="commerce-blog-link inline-block h7 md-mb4">
        {{ page.sidebar-button-text }}
    </a>
{{ endif }}

..............................

<h3 class="h7 block pt3">Seguimi</h3>
    <ul class="ampstart-social-follow list-reset flex justify-around items-center flex-wrap m0 mb4">
      <li>
          <a href="https://facebook.com/{{ site.author.facebook }}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23.6" viewbox="0 0 56 55"><title>Facebook</title><path d="M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43" class="ampstart-icon ampstart-icon-fb"></path></svg></a>
      </li>
      <li>
          <a href="https://instagram.com/{{ site.author.instagram }}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Instagram"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 54 54"><title>instagram</title><path d="M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z" class="ampstart-icon ampstart-icon-instagram"></path></svg></a>
      </li>
      <li>
          <a href="https://twitter.com/{{ site.author.twitter }}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="22.2" viewbox="0 0 53 49"><title>Twitter</title><path d="M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6" class="ampstart-icon ampstart-icon-twitter"></path></svg></a>
      </li>
    </ul>
</aside>
antoniotrento commented 6 years ago

Fatto per la maggior parte. ora in base alle nuove pagine di prodotti posso aggiungere altre sidebars