La vie d’un blogueur est pleine d’obligations, il nous arrive ainsi parfois de devoir insérer dans nos articles des images de cul, violentes ou immorales. Cela présente le risque majeur de voir notre fidèle clientèle diminuer ses visites, du moment que celles-ci sont effectuées depuis le lieu de travail, aux yeux des collègues qui lorgnent vicieusement par dessus l’épaule.

Je vais aujourd’hui te montrer comment faire en sorte de masquer tes images les plus sensibles, avec possibilité pour le visiteur de faire apparaître l’original à ses risques et périls.

Et vu que rien ne vaut un bon exemple, voici une image de chaton censurée. Tu cliques dessus et tu saignes des yeux.

chaton_roux

Si tu veux essayer plusieurs fois il faut en revanche recharger la page, l’effet est volontairement à sens unique.

Cette transition est assurée en ajoutant simplement une classe « nsfw » aux images que tu désires masquer, un script jQuery va ensuite s’occuper de les parcourir, remplaçant pour chacune d’entre-elle l’image par une autre de ton choix. Dès que ton visiteur cliquera sur une de ces images alors toutes celles censurées apparaîtront.

Voici un exemple de code HTML permettant ce remplacement, tu constateras que cette image de chaton possède plusieurs classes, dont la fameuse « nsfw » qui permet ladite censure.

1
<img src="chaton_mort.jpg" class="noborder fullwidth nsfw" />

Bien entendu, pour que cela fonctionne il te faut ajouter un petit bout de code entre les balises « head » et « /head » de ta page HTML. Si tu utilises un blog sous WordPress tu devras aller faire cet ajout dans le fichier « header.php » qui se trouve dans le répertoire de ton thème.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script language="javascript" type="text/javascript">

// Script de censure NSFW par memepasmal.ch
// Version 1.0 (29.12.2012)
// http://www.memepasmal.ch/2012/12/29/nsfw/

// Dès que la page est chargée
$(document).ready(function() {

    // Boucler sur toutes les images avec la classe "nsfw"
    $("img.nsfw").each(function()  {

        // Memorisation de l'attribut "src" original
        $(this).attr("original-src", $(this).attr("src"));
       
        // Remplacement de l'image par le "NSFW"
        $(this).attr("src", "chemin/vers/ton/image/de/remplacement.jpg");

        // En cas de clic sur l'image
        $(this).click(function() {

            // Boucler sur toutes les images avec la classe "nsfw"
            $("img.nsfw").each(function()  {
       
                // Remise en place de l'attribut "src" mémorisé
                $(this).attr("src", $(this).attr("original-src"));
           
            });
           
        });

    });

});

</script>

Ce code est écrit en jQuery, tu devras donc intégrer la librairie adéquate (si ce n’est déjà fait) en la téléchargeant sur le site officiel, puis en l’insérant juste avant.

1
<script src="chemin/vers/le/script/jquery.min.js"></script>

Tu peux même utiliser mon image de remplacement, gracieusement mise à ta disposition, tu fais juste un clic droit puis tu choisis « Enregistrer l’image sous… ».

nsfw

, , ,    
Grâce à mes conseils technologiques de la veille tu pouvais faire tomber la magie enneigée de nouyelle sur ton blog, je vais aujourd’hui te montrer comment améliorer cette féerie ambiante.

Le problème du tutoriel d’hier est qu’il te faut modifier ton fichier « header.php » pour y inclure le code JavaScript chaque début décembre et le re-modifier à la fin de l’hiver pour retirer le script, au risque de voir tomber des flocons sur ton blog en plein mois d’août. On n’a pas tous la patience nécessaire de l’exercice, et demander des modifications à son webmaster trop souvent risque fort de finir par l’énerver profondément.

Voici donc un petit bout de code PHP fait maison qui permet de limiter magiquement automatiquement l’exécution du script des flocons entre décembre et janvier compris.

Dans ton fichier « header.php » tu remplaces donc la ligne que je t’ai suggérée hier.

1
<script type="text/javascript" src="/snowstorm.js"></script>


Par celles-ci.

1
2
3
4
5
6
<?php
    // Limite l'intégration du script de tempête de neige entre décembre et janvier compris
    if ((date("n") == 12) || (date("n") == 1)) {
        echo '<script type="text/javascript" src="/snowstorm.js"></script>';
    }
?>


Et ainsi, chaque année cette saleté de magie s’opérera toute seule.

J’en profite pour te souhaiter un noyeux Joël, que les jolis flocons et le cholestérol te soient propices en cette fin d’année!


, ,    
Les fêtes de fin d’année approchent à grand pas et tout blog chrétien digne de ce nom doit évoluer dans le respect de Jésus et du petit Papa Nouyelle.

Je te propose donc aujourd’hui d’enjoliver tes publications grâce à un magnifique script qui fera tomber de petits flocons sur ton blog WordPress. Ça fonctionne évidemment sur d’autres plateformes mais il te faudra juste adapter l’intégration du script.

Tout d’abord il te faut charger un fichier JavaScript magique (tout est magique à Noël), pour cela il te suffit de faire un clic droit ici, de choisir « Enregistrer la cible du lien sous… » puis d’envoyer ce fichier à la racine de ton site web grâce à ton client FTP favori. Si t’as rien compris à cette dernière phrase alors file te boire un verre de vin chaud et parle-en à ton webgod (on ne dit plus « webmaster » depuis peu, ça ne mettait pas assez en valeur la profession).

Ensuite, tu vas dans le répertoire de ton thème WordPress et tu ouvres le fichier « header.php » , entre les balises <head> et </head> tu vas ajouter le code magique suivant.

1
<script type="text/javascript" src="/snowstorm.js"></script>


Ho ho hoooo!

Ouais je sais, mais faire le Père Noyel en onomatopée c’est pas évident.

Tu peux paramétrer plein de trucs magiques, comme par exemple la couleur des flocons. Cherche la ligne magique suivante dans le fichier JavasScript et modifie selon tes envies (magiques elles aussi).

1
this.snowColor = '#fff';


Ah ouais, au passage, ce script est distribué sous la licence BSD que voici.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Software License Agreement (BSD License)

Copyright (c) 2003, Scott Schiller (schillmania.com)
All rights reserved.

Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this
  list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above copyright notice, this
  list of conditions and the following disclaimer in the documentation and/or
  other materials provided with the distribution.

* Neither the name of schillmania.com nor the names of its contributors may be
  used to endorse or promote products derived from this software without
  specific prior written permission from schillmania.com.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


Le script intégral ainsi qu’un mode d’emploi plus complet est disponible en anglais sur schillmania.com, le site original du créateur.


, ,