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

, , ,    

Si tu suis un peu l’actualité de ces derniers temps tu auras certainement remarqué que la presse adore parler des notes aléatoires données par les trois principales agences de notations financières que compte la planète. Du coup il ne se passe pas une seule journée sans qu’un pays ou une banque ne perde un précieux « A », comme si le commun des mortels en avait quelque chose à carrer.

Pour combattre cette morosité je te propose donc aujourd’hui de certifier ton blog « AAA+ », en ajoutant simplement une superbe bannière en haut à gauche.

L’image originale a été créée sous GIMP, si tu veux la modifier tu peux télécharger le fichier XCF en enregistrant la cible de ce lien.

La procédure à suivre sera expliquée pour un blog tournant sous WordPress, mais un débutant en création web devrait s’en sortir sans problème pour transposer ce tutoriel à n’importe quel site.

Note bien que l’ajout de la bannière est une opération qui nécessite une certaine maitrise dans le transfert par FTP ainsi qu’une vague connaissance des fichiers qui régissent ton thème WordPress, pour le reste ça devrait jouer avec les indications fournies.

, , , , ,