Les 9

Foto's op Drupalsite

Wat is een goede foto?

  1. Op DEZE website kan je een reeks tips vinden voor het gebruik van foto's op een website
  2. Sites die ik vaak gebruik:
  • PNGGuru --> een site vol gratis te gebruiken png-afbeeldingen
  • Pixabay --> download hier gratis rechtenvrije jpg-afbeeldingen
  • JPEG Verkleinen --> zware foto's kan je met deze site eenvoudig verkleinen

De GPDR

--> Op DEZE website lees je beknopt de essentie rond foto's en de GPDR

SEO

SEO-checklist

  1. Deze module is niet echt meer up te date wat de inhoud betreft, maar er zitten een aantal interessante links en tips in.

XML-sitemap

  1. Dit is eentje die ervoor zorgt dat jouw site 'leesbaar' is voor zoekmachines zoals Google. De sitemap bestaat uit een aantal links. Deze moet even worden ingesteld:
  2. Bij de instellingen ga je naar de sitemap entities
  3. Vink content aan
  4. Vink alle inhoudstypes aan die je wil opnemen in de sitemap
  5. Sla eerst op
  6. Kies nu bij elk inhoudstype Instellingen
  7. Kies Included

included

  1. Herhaal de stappen voor alle andere inhoudstypen
  2. Ga naar Rebuild
  3. Kies Instellingen opslaan om de map opnieuw op te bouwen
  4. Controleer op de sitemap werkt door in een nieuw tabblad te surfen naar www.website.be/sitemap.xml

Sitemap toevoegen aan Bing en Google en robots.txt

Via de SEO checklist kan je nodige linken vinden voor het aanmelden bij Google en Bing. Je hebt hiervoor respectievelijk een google-account nodig en een microsoft-account

xml

-- Google:--

  1. Ga naar de google search console
  2. Maak een nieuwe property

d

  1. Bewijs dat de site van jouw is door het bestandje te downloaden in up te loaden naar public_html

f

f

e

  1. Voeg de sitemap toe

s

  1. De sitemap zal nog niet meteen succesvol zijn, bekijk deze pagina binnen 24h opnieuw ter controle

-- Bing: --

  1. Open de Bing Webmaster Tool
  2. Voeg jouw site toe

s

  1. Vul meteen de sitemap aan in het volgende formulier
  2. Bewijs het eigendom door het verificatiebestand up te loaden in public_html

u

u

-- Robots.txt: --

  1. Om ook alle andere zoekmachines jouw sitemap te laten doorzoeken kan je deze toevoegen aan robots.txt
  2. Bewerk het betreffende bestand via Cpanel
  3. Plaats deze onderaan het document:
sitemap: https://www.website.be/sitemap.xml

r

  1. Ter controle kan je altijd eens surfen naar het bestand en je zal de wijziging zien staan

dr

Google Analytics

Blijkbaar wordt de module niet meer actief bijgewerkt. Een goede tracking zal het niet zijn. De module Googalytics-Google Analytics doet de job wel goed.

  1. Deïnstalleer de module Google Analytics
  2. Installeer het alternatief op de traditionele wijze
  3. Vul het trackingID opnieuw in.

ga

Google my business / Google Maps

Heb je een bedrijfje of maak je een site voor het bedrijf van een klant, dan is het fijn om die zaak ook te zien met een label op Google Maps

  1. Surf naar de site
  2. Meld jouw site aan
  3. Om het adres te verifiëren zal je per post (!) een verificatiecode ontvangen die je vervolgens invoert op jouw bedrijfs-account
  4. Het resultaat is een zoekresultaat rechts en een label op Maps

g

label

Apple Kaarten

Surf naar mapsconnect.apple.com om ook op de Kaarten van Apple een label te laten verschijnen.

k

Flip effect (Dirk Bernaert)

Een leuke tutorial van Dirk Bernaert die ik getest heb. Goed om mee af te sluiten

  1. Maak een afbeeldingsstijl aan:

flip

  1. Maak een nieuw overzicht aan die de werkmaterialen weergeeft.
    1. Onopgemaakte lijst van velden
    2. Pagina maken
    3. Menulink leggen
    4. Geen paginering
    5. Alle items weergeven
  2. De velden:

velden

  1. Download deze code en plak in een nieuwe JS-regel. (JS-REGEL 1)

JS1

  1. Download deze code en plak in een nieuwe JS-regel. (JS-REGEL 2)

JS2

  1. Kopieer DEZE CSS-code en plak in een nieuwe CSS-regel

CSS

  1. Maak een nieuwe blok aan, volledige HTML en switch naar broncode. Onderstaande code plak je hierin. Dit blok geven we nu een plaats op de pagina van ons overzicht, in de content bijvoorbeeld. Dit blok is nodig om te bepalen of we moeten klikken of hoveren om de image te flippen.
<script>
$(function(){
    $(".flip-horizontaal").flip({
        trigger: 'click',
     });
});
$(function(){
    $(".flip-verticaal").flip({
        trigger: 'click',
        axis: 'x'
    });
});
</script>

flip blok

  1. Ga naar jouw View. Herschrijf het veld van de afbeelding met deze code. Controleer of je dezelfde tokens hanteert. Hieronder heb je ook de keuze om horizontaal of vertikaal te flippen. Je kiest maar.
<div class="flip-horizontaal"> 
    <div class="front"> 
        {{ field_image2 }}
    </div> 
    <div class="back">
        <h3 class="fliptitel">{{ title }}</h3><h4>{{ title }} </h4><h5>{{ field_brand }}</h5>{{ field_categorie }}</br>
    </div> 
</div>

OF

<div class="flip-verticaal"> 
    <div class="front"> 
        {{ field_image2 }}
    </div> 
    <div class="back">
        <h3 class="fliptitel">{{ title }}</h3><h4>{{ title }} </h4><h5>{{ field_brand }}</h5>{{ field_categorie }}</br>
    </div> 
</div>
  1. Test de View uit

res