Fork me on GitHub

Chronique d'alain01 : Tutoriel "Ajout d'un cadre de photo"

201305
Juillet
  alain01 Divers 4099
Divers

La chronique d'alain01 revient enfin, tout juste avant les vacances d'été pour vous présenter un nouveau tutoriel, qui je l'espère, vous plaira.


Il s'agit d'ajouter un air beaucoup plus moderne, + design, + pro, Ă  vos photos, notamment dans vos articles.


Et cela tombe plutĂ´t bien, avec les photos de vacances que vous aller bientĂ´t publier, non ?

En fait, nous allons nous donner la possibilité d'ajouter un cadre blanc avec un effet d'ombre sur les photos (et images).

Open in new windowOpen in new windowVoici le résultat : photo + cadre photo blanc + ombre portée en bas à droite
Avant ======> Après !

Allez, c'est parti pour ce tutorial :

1) Ajout d'un éléments dans le fichier css

Récuperez votre fichier style.css de votre thème,
généralement situé sous : /themes/montheme/css ou /themes/montheme
Editez donc le fichier style.css
et ajoutez Ă  la fin du fichier, ce code :

img.img-cadre {
/* Couleur ombre de la photo */
    
box-shadow5px 5px 20px #404040; 
/*    Effet cadre vielli, pour photo noir et blanc style ancien */
/*    border-color: #f5eac7; */
    
border-color#ffffff;
    
border-stylesolid;
    
border-width20px;
    
displayblock;
    
margin-l;
    
margin-leftauto;
    
margin-rightauto;
    
margin-top10px;
    
margin-bottom10px;
}

puis replacez-le sur votre site, au bon endroit.
Vous avez fait le plus compliqué. Et oui !!!


2) Vidage du cache de votre navigateur
Important, si vous ne le faîtes pas, vous ne verrez pas cette classe dans la liste des classes disponibles.
A faire uniquement la toute première fois.


3) Utilisation de cette nouvelle classe lors d'un ajout de photo

3a) Editeur Simple (Textarea)
Voir 3b)

3b)Editeur XOOPS (DHTMLTextarea)

En bbcode, cela ne fonctionnera pas. On ne peut pas ajouter de classe ne bbcde.
Si c'est un bloc personnalisé, vous pouvez choisir pour le "Type de contenu" dans la liste le "Code HTML".
Ensuite vous insérer votre image :
<img src="http://www.monsite.fr/mon_image.png" class="img-cadre" />

3c) TinyMCE (v3)
- Cliquez sur le bouton "insérer une image",
- Renseignez les champs "URL de l'image", "Description de l'image" et "Titre",
- Allez dans l'onglet nommé "Apparence" et choisissez pour le champs "classe", dans la longue liste déroulante la valeur "img-cadre" puis validez

3d) TinyMCE v4 (Bientôt, peut-être car en phase d'intégration, actuellement...)
- Cliquez sur le bouton "insérer une image",
- Renseignez les champs sources et "Description de l'image",
- Allez dans l'onglet Avancé et et choisissez pour le champs "classe", dans la longue liste déroulante la valeur "img-cadre" puis validez

Ne fonctionne pas...

Alors, facile, non ?
N'hésitez pas à tester de votre côté !!!

Pour allez plus loin :

- On peut modifier la couleur du cadre (ici blanc), par une couleur "jaunâtre" qui fait style vieille photo
- On peut modifier la couleur de l'ombre
- On peut orienter l'ombre dans une autre direction que bas + droite
- On peut jouer sur l'Ă©paisseur de l'ombre
- Enfin, on peut ajouter des effets dynamiques (zoom agrandissant par exemple) mais attention de ne pas dénaturer votre site web avec un peu trop de fioritures !

Si vous avez aimé ce tutoriel, faîtes-le nous savoir !

Note: 7.00 (4 votes) - Noter cet article -

Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article Ă  un ami
Les commentaires appartiennent Ă  leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Xoops accro
Inscrit le: 27/07/2005
De: France
Contributions: 2970
tatane PostĂ© le: 05/07/2013 16:11  Mis Ă  jour: 05/07/2013 16:11
 Re: Chronique d'alain01 : Tutoriel "Ajout d...
Merci Alain pour ce tuto :)
Admin Frxoops
Inscrit le: 16/05/2003
De: Rhone-Alpes
Contributions: 3503
alain01 PostĂ© le: 05/07/2013 16:17  Mis Ă  jour: 05/07/2013 16:17
 Re: Chronique d'alain01 : Tutoriel "Ajout d...
Fayooooot !!! ^^
Admin Frxoops
Inscrit le: 05/03/2005
De: Vaucluse
Contributions: 959
slider84 PostĂ© le: 05/07/2013 17:28  Mis Ă  jour: 05/07/2013 17:28
 Re: Chronique d'alain01 : Tutoriel "Ajout d...
Alain, le roi du tuto
Admin Frxoops
Inscrit le: 16/03/2009
De: Tende (06)
Contributions: 3129
Cesagonchu PostĂ© le: 05/07/2013 18:43  Mis Ă  jour: 05/07/2013 18:43
 Re: Chronique d'alain01 : Tutoriel "Ajout d
Merci pour le tutoriel

Tiens, je mets une note, autant utiliser cette fonctionnalité
RĂ©gulier
Inscrit le: 13/03/2012
De: Belgique-La Louvière
Contributions: 140
hugo1207 PostĂ© le: 06/07/2013 08:46  Mis Ă  jour: 06/07/2013 08:46
 Re: Chronique d'alain01 : Tutoriel "Ajout d...
Super et c'est beau.
Supporter Xoops
Inscrit le: 09/01/2005
De: Breizh
Contributions: 16972
Kris PostĂ© le: 06/07/2013 13:19  Mis Ă  jour: 06/07/2013 13:19
 Re: Chronique d'alain01 : Tutoriel "Ajout d
Dans le fichier xoops.css, tu as un certain nombre de class génériques
Pour un tel effet sur une image, tu peux Ă©galement, par exemple, faire :
<img src="http://www.monsite.fr/mon_image.png" class="pad10 boxshadow" />
Admin Frxoops
Inscrit le: 16/05/2003
De: Rhone-Alpes
Contributions: 3503
alain01 PostĂ© le: 06/07/2013 13:48  Mis Ă  jour: 06/07/2013 13:48
 Re: Chronique d'alain01 : Tutoriel "Ajout d
Pas mal, Kris, je ne savais mĂŞme pas...
mais il manque un peu de largeur sur la bordure.
pad20 n'existe pas, dommage.
Team FrXoops
Inscrit le: 24/11/2008
De: Argenteuil
Contributions: 987
Franck0768 PostĂ© le: 07/07/2013 16:57  Mis Ă  jour: 07/07/2013 16:57
 Re: Chronique d'alain01 : Tutoriel "Ajout d
Salut Alain et Kris,

J'Ă©tais partie pour appliquer les modifications d'Alain Ă  la class "pad10 boxshadow" du xoops.css (en racine du site), cependant je ne trouve pas cette class!
Ne connaissant pas les arcanes de xoops, oĂą peut on modifier cette class?
Admin Frxoops
Inscrit le: 05/03/2005
De: Vaucluse
Contributions: 959
slider84 PostĂ© le: 07/07/2013 17:13  Mis Ă  jour: 07/07/2013 17:20
 Re: Chronique d'alain01 : Tutoriel "Ajout d
@Franck0768:
boxshadow: Lignes 570 et 575 dans xoops.css pour la 2.5.6
pad4: ligne 8, pad10 est à créer: .pad10 {padding: 10px;}
Ensuite tu crée ta class pour la div en cumulant les deux:
<div class="pad10 boxshadow">
Team FrXoops
Inscrit le: 24/11/2008
De: Argenteuil
Contributions: 987
Franck0768 PostĂ© le: 07/07/2013 23:51  Mis Ă  jour: 07/07/2013 23:51
 Re: Chronique d'alain01 : Tutoriel "Ajout d
Merci slider84,

Mon fichier xoops.css en local doit être corrompu car je n'ai que 95 lignes. J'ai téléchargé la version du site en production et c'est OK.
Merci à Alain pour cette superbe présentation d'image et à kris pour la découverte des class de présentation.
Team FrXoops
Inscrit le: 01/11/2004
De:
Contributions: 1823
patz PostĂ© le: 23/07/2013 22:12  Mis Ă  jour: 23/07/2013 22:12
 Re: Chronique d'alain01 : Tutoriel "Ajout d...
il m'a bien plut ton tuto et pas plutĂ´t que depuis tout Ă  l'heure je teste plein de combi

pour ceux qui connaissent : http://www.istu.co.uk/index.html#url un site avec plein didées d'effets téléchargeables qui s'intègrent en un tour de main dans un bloc html personnalisé
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

17 Personne(s) en ligne (1 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 0 | Invité(s): 17 | Plus ...