Add info page into the head

[pixeline]

Voici comment le faire en f3.
Commences par définir un tableau contenant les différents métatags par défaut (pour la home). Par exemple:

define('WWWROOT', '//'.$_SERVER["HTTP_HOST"]);
define('LOCALROOT', '//'.$_SERVER["DOCUMENT_ROOT"]);
$metatags = array(
    'title'=>"Visionary: daltonisme et interfaces",
    'description'=>'Comprendre le daltonisme, solutions pour daltoniens, guide de bonnes pratiques pour développeurs',
    'site_name'=>'Visionary',
    'image'=>WWWROOT.'/ui/img/og-image-default.jpg',
    'image:width'=>800,
    'image:height'=>574,
    'url' => WWWROOT);

ensuite dans index.php (le "router") tu modifies les clefs en fonction de ce que tu veux changer pour chaque url. Par exemple:

$f3->route('GET /guide', function($f3) { 
    // autre code
    // metatags

        $metatags['title'] = "Guide des bonnes pratiques";
        $metatags['description'] = "le contenu de la meta description";
        $metatags['image'] = 'ui/assets/img/opengraph-image-guide.jpg';
        if( is_file( LOCALROOT . '/'. $metatags['image']) ){
            $size = getimagesize( LOCALROOT . '/'. $metatags['image'] );
            $metatags['image:width'] = $size[0];
            $metatags['image:height'] = $size[1];
            $metatags['image']=  WWWROOT . '/'. $metatags['image']
        }

        $f3->set('metatags', $metatags);

    // suite du code ...
}

Et donc, dans la template, grâce à la ligne 15 ci-dessus, tu as accès au tableau $metatags contenant le contenu des balises meta:

        <meta charset="utf-8">
        <title><?php echo strip_tags(html_entity_decode($metatags['title'])); ?></title>
        <meta name="description" content="<?php echo(strip_tags(html_entity_decode($metatags['description'])); ?>">
        <meta property="og:title" content="<?php echo(strip_tags(html_entity_decode($metatags['title'])); ?>">
        <meta property="og:site_name" content="<?php echo(strip_tags(html_entity_decode($metatags['site_name'])); ?>">
        <meta property="og:image" content="<?php echo $metatags['image']; ?>">
        <meta property="og:image:width" content="<?php echo $metatags['image:width']; ?>">
        <meta property="og:image:height" content="<?php echo $metatags['image:height']; ?>">
        <meta property="og:url" content="<?php echo $metatags['url']; ?>">
        <meta property="fb:app_id" content="1111111111">
        <meta property="og:description" content="<?php echo strip_tags(html_entity_decode($metatags['description'])); ?>">
        <meta property="og:type" content="article">
        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="<?php echo strip_tags(html_entity_decode($metatags['site_name'])); ?>">
        <meta name="twitter:description" content="<?php echo strip_tags(html_entity_decode($metatags['description'])); ?>">
        <meta name="twitter:image" content="<?php echo $metatags['image']; ?>">
        <meta name="google-site-verification" content="11111111">
        <meta name="msvalidate.01" content="1111111">
        <base href="<?php echo WWWROOT; ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1">

Voilà!

[exibit]

OK, j'ai testé, merci.

Deux questions :

1. Où déclares-tu ton tableau ? Au début de index.php ?
2. Je ne comprends pas l'intérêt du tableau puisque chaque variable est ensuite redéclarée pour chaque page.

[pixeline]

1. effectivement, avant le routing, pour qu'il soit disponible à customisation.
2. à chacun sa manière de coder mais pour moi l'intérêt du tableau est d'abord sa lisibilité: de $metatags['title']je peux facilement déduire qu'il s'agit du contenu html concernant le metatag "title". Ensuite, comme on le définit en lui donnant des valeurs par défaut, tu ne dois modifier que ce dont tu as besoin. C'est sûr que niveau SEO c'est important que le title soit différent pour chaque URL, mais par exemple la meta og:image n"a pas beaucoup d'enjeu et on peut utiliser une meme image pour plusieurs pages. Donc dans ce cas, je peux choisir de ne pas la modifier d'une url à l'autre et de conserver la valeur par défaut.

[exibit]

1. OK, j'ai fait comme ça
2. OK pour l'aspect lisibilité je comprends, maintenant on ajoute 10 lignes en plus dans le code par rapport à ma solution initiale. D'autant que 'il ne prend pas la valeur par défaut si je ne redéclare pas la variable localement. J'imagine que ce n'est pas normal : https://github.com/pixeline/Visionary-website/blob/convert-uikit/src/index.php

[pixeline]

ah, tu dois sans doute déclarer global $metatags à l'intérieur de la function de callback du routeur. global $metatags; suffit, au début de la fonction, en tout cas avant de l'utiliser.

Après, comme je disais, c'est comment moi je ferais. si tu as mieux, shoot.

2017-05-31 10:27 GMT+02:00 Benoît Vrins notifications@github.com:

1. OK, j'ai fait comme ça
2. OK pour l'aspect lisibilité je comprends, maintenant on ajoute 10 lignes en plus dans le code par rapport à ma solution initiale. D'autant que 'il ne prend pas la valeur par défaut si je ne redéclare pas la variable localement. J'imagine que ce n'est pas normal : https://github.com/pixeline/Visionary-website/blob/ convert-uikit/src/index.php https://github.com/pixeline/Visionary-website/blob/convert-uikit/src/index.php

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/pixeline/Visionary-website/issues/19#issuecomment-305121726, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYAx0oK-UaIGGChYQDcy_q07BpRA0o3ks5r_SR4gaJpZM4NqDk0 .

[exibit]

global $metatags; fait planter la page :-( Parse error: parse error, expecting ','' or';'' in /Users/benoit/Projets/Visionary/dev/Visionary-website/build/index.php on line 43 Ligne 43 : https://github.com/pixeline/Visionary-website/blob/convert-uikit/src/index.php

[pixeline]

non tu dois, dans la fonction de callback, dire que tu veux la variable du scope global

global $metatags;

et puis seulement après modifier la clef:

$metatags['title']  = 'foo bar';

N'hésite pas à voir la doc de php

Attention aussi à mettre des accents autour de tes clefs

$metatags['url']

et non $metatags[url]

[exibit]

J'avais fait le test aussi et j'avais vu la doc. J'ai mis à jour le fichier comme j'ai compris que je devais le faire mais j'ai toujours une erreur de parsing. Celle-ci s'est juste déplacée en ligne 6 : https://github.com/pixeline/Visionary-website/blob/convert-uikit/src/index.php

[pixeline]

voilà, j'ai committé la correction sur ta branche. Tu y étais presque, il fallait simplement spécifier dans chaque fonction "controller" que $metatags renvoie à la variable globale via une ligne.

global $metatags;

Puis envoyer la variable dans le scope de la template, ce qui donne:

    function($f3) {
        global $metatags; // on signale que l'on veut utiliser la variable globale
        $metatags['title'] = 'Installer l\'extension pour Chrome'; // on overwrite une valeur
        $f3->set('current_url', 'download');
        $f3->set('title', $metatags['title']); // Autant profiter de la variable pour ne pas se répéter :)
        $f3->set('content', 'page.download.php');
        $f3->set('metatags', $metatags ); // création d'une variable $metatags accessible à la View
        echo View::instance()->render('layout.htm');
    }

J'ai aussi fais une mise à jour automatique de gulp, donc il vaut mieux que tu l'appliques aussi après avoir pullé.

• npm install --save-dev