SlideShare una empresa de Scribd logo
1 de 6
Descargar para leer sin conexión
Portfolio et image dans l’article sous SPIP




Nous	
  allons	
  voir	
  comment	
  insérer	
  
des	
  images	
  dans	
  le	
  por@olio	
  et	
  
leur	
  donner	
  une	
  vigneAe	
  au	
  
format	
  carré	
  pour	
  uniformiser	
  le	
  
rendu	
  et	
  voir	
  comment	
  insérer	
  
des	
  images	
  dans	
  le	
  texte,	
  les	
  
redimensionner	
  pour	
  que	
  cela	
  
apparaisse	
  correctement.	
  
	
  




                         Voyelle	
  -­‐	
  6	
  place	
  de	
  l'église	
  à	
  St	
  Jean	
  Sur	
  Vilaine	
  -­‐	
  contact@voyelle.fr	
     1	
  
Dans	
  la	
  parGe	
  administraGve	
  de	
  
l’arGcle,	
  sans	
  passer	
  par	
  le	
  mode	
  
modificaGon	
  où	
  vous	
  pouvez	
  
changer	
  le	
  texte,	
  vous	
  trouvez	
  en	
  
bas	
  du	
  contenu	
  le	
  por@olio.	
  
À	
  parGr	
  de	
  ceAe	
  espace	
  vous	
  
pouvez	
  ajouter,	
  supprimer,	
  
renseigner	
  vos	
  images	
  qui	
  seront	
  
incluses	
  dans	
  la	
  parGe	
  publique	
  au	
  
diaporama	
  d’images	
  en	
  bas	
  de	
  
l’arGcle.	
  



                                   Voyelle	
  -­‐	
  6	
  place	
  de	
  l'église	
  à	
  St	
  Jean	
  Sur	
  Vilaine	
  -­‐	
  
                                                                                                                                    2	
  
                                                              contact@voyelle.fr	
  
Pour	
  ajouter	
  une	
  vigneAe,	
  vous	
  
dépliez	
  le	
  cadre	
  de	
  la	
  
photographie	
  en	
  survolant	
  la	
  
flèche	
  grise	
  à	
  côté	
  du	
  nom	
  de	
  
l’image,	
  puis	
  vous	
  cliquez	
  sur	
  
«	
  parcourir	
  »	
  pour	
  aller	
  chercher	
  
la	
  vigneAe	
  du	
  document	
  que	
  vous	
  
aurez	
  préalablement	
  préparé	
  avec	
  
pixlr.com/editor	
  par	
  exemple.	
  
Pour	
  l’exemple,	
  la	
  vigneAe	
  est	
  un	
  
carré	
  de	
  600px	
  par	
  600px.	
  
                                        Le	
  rendu	
  sur	
  le	
  site	
  
                                        public	
  donne	
  bien	
  des	
  
                                        vigneAes	
  carrés	
  et	
  
                                        lorsque	
  vous	
  cliquez	
  sur	
  
                                        les	
  vigneAes	
  s’affiche	
  
                                        l’image	
  dans	
  les	
  
                                        dimensions	
  d’origine.	
  


                                  Voyelle	
  -­‐	
  6	
  place	
  de	
  l'église	
  à	
  St	
  Jean	
  Sur	
  Vilaine	
  -­‐	
  
                                                                                                                                   3	
  
                                                             contact@voyelle.fr	
  
Pour	
  ajouter	
  une	
  image	
  dans	
  le	
  
contenu	
  textuel	
  d’un	
  arGcle,	
  vous	
  
devez	
  aller	
  dans	
  le	
  mode	
  
«	
  Modifier	
  cet	
  arGcle	
  ».	
  
Vous	
  devez	
  ensuite	
  cliquez	
  à	
  
l’emplacement	
  où	
  devra	
  se	
  situer	
  
votre	
  image	
  puis	
  vous	
  cliquez	
  sur	
  
le	
  bouton	
  image	
  dans	
  la	
  barre	
  
d’ouGl	
  :	
  



S’ouvre	
  alors	
  une	
  fenêtre.	
  Vous	
  
allez	
  ensuite	
  dans	
  «	
  explorer	
  le	
  
serveur	
  »	
  pour	
  soit	
  chercher	
  une	
  
image	
  déjà	
  chargée,	
  soit	
  
télécharger	
  une	
  nouvelle	
  image.	
  
Pour	
  cet	
  exemple,	
  nous	
  allons	
  
télécharger	
  une	
  nouvelle	
  image.	
  
                                   Voyelle	
  -­‐	
  6	
  place	
  de	
  l'église	
  à	
  St	
  Jean	
  Sur	
  Vilaine	
  -­‐	
  
                                                                                                                                    4	
  
                                                              contact@voyelle.fr	
  
Vous	
  allez	
  chercher	
  votre	
  image	
  
avec	
  «	
  Parcourir	
  »	
  puis	
  vous	
  
télécharger.	
  Une	
  fois	
  téléchargée,	
  
vous	
  cliquez	
  sur	
  «	
  UGliser	
  le	
  
fichier	
  :	
  nomDeLImage.jpg	
  ».	
  
	
  
Une	
  nouvelle	
  fenêtre	
  apparaît	
  qui	
  
vous	
  permet	
  de	
  modifier	
  certains	
  
paramètres	
  de	
  l’image.	
  
	
  
Vous	
  pouvez	
  ainsi	
  ajouter	
  un	
  texte	
  
de	
  remplacement	
  (accessibilité).	
  Il	
  
est	
  normalement	
  obligatoire.	
  
	
  
Vous	
  pouvez	
  aussi	
  changer	
  la	
  taille	
  
de	
  l’image	
  en	
  gardant	
  ou	
  non	
  les	
  
proporGons	
  avec	
  le	
  cadenas.	
  
La	
  largeur	
  maximum	
  est	
  596px.	
  
                                     Voyelle	
  -­‐	
  6	
  place	
  de	
  l'église	
  à	
  St	
  Jean	
  Sur	
  Vilaine	
  -­‐	
  
                                                                                                                                      5	
  
                                                                contact@voyelle.fr	
  
Si	
  vous	
  insérez	
  une	
  image	
  qui	
  
dépasse	
  596px	
  de	
  large,	
  l’image	
  
dépassant	
  la	
  largeur	
  de	
  la	
  
colonne,	
  nous	
  avons	
  insérer	
  un	
  
redimensionnement	
  de	
  la	
  largeur.	
  
Cela	
  évite	
  de	
  briser	
  la	
  page.	
  
Cependant	
  ceAe	
  redimension	
  ne	
  
reprenant	
  que	
  la	
  largeur,	
  votre	
  
image	
  sera	
  déformée.	
  
	
  
Il	
  est	
  donc	
  préférable	
  de	
  meAre	
  
par	
  défaut	
  un	
  largeur	
  maximum	
  
de	
  596px.	
  




                                    Voyelle	
  -­‐	
  6	
  place	
  de	
  l'église	
  à	
  St	
  Jean	
  Sur	
  Vilaine	
  -­‐	
  
                                                                                                                                     6	
  
                                                               contact@voyelle.fr	
  

Más contenido relacionado

Destacado

Männernachtwallfahr09inWeiz
Männernachtwallfahr09inWeizMännernachtwallfahr09inWeiz
Männernachtwallfahr09inWeizniusek
 
ADETEM universite paris ouest
ADETEM universite paris ouest ADETEM universite paris ouest
ADETEM universite paris ouest ALCARAZ STEPHANE
 
Presentacion de filosofia
Presentacion de filosofiaPresentacion de filosofia
Presentacion de filosofiaDARIO PARRA
 
ADI (Eisner, 2010)
ADI (Eisner, 2010)ADI (Eisner, 2010)
ADI (Eisner, 2010)Josef Eisner
 
Marketing2null Workshop V2 2009 05 14
Marketing2null Workshop V2 2009 05 14Marketing2null Workshop V2 2009 05 14
Marketing2null Workshop V2 2009 05 14Klaus-M. Schremser
 
Staff launch slideshow (fre)
Staff launch slideshow (fre)Staff launch slideshow (fre)
Staff launch slideshow (fre)2011pc100
 
Subgrupo2
Subgrupo2Subgrupo2
Subgrupo2jeycoga
 
Viande.info Presentation au buffet débat questure assemblee nationale du 19 m...
Viande.info Presentation au buffet débat questure assemblee nationale du 19 m...Viande.info Presentation au buffet débat questure assemblee nationale du 19 m...
Viande.info Presentation au buffet débat questure assemblee nationale du 19 m...tiflopin
 
Subgrupo2
Subgrupo2Subgrupo2
Subgrupo2jeycoga
 
Medios de comuniacion
Medios de comuniacionMedios de comuniacion
Medios de comuniaciondanielaloca
 
Sx sanfilippo a (genetica medica 2014) by gaby mani
Sx sanfilippo a (genetica medica 2014) by gaby maniSx sanfilippo a (genetica medica 2014) by gaby mani
Sx sanfilippo a (genetica medica 2014) by gaby maniGaby Mani
 

Destacado (17)

Männernachtwallfahr09inWeiz
Männernachtwallfahr09inWeizMännernachtwallfahr09inWeiz
Männernachtwallfahr09inWeiz
 
ADETEM universite paris ouest
ADETEM universite paris ouest ADETEM universite paris ouest
ADETEM universite paris ouest
 
Presentacion de filosofia
Presentacion de filosofiaPresentacion de filosofia
Presentacion de filosofia
 
Proyectó de tecnología
Proyectó de tecnologíaProyectó de tecnología
Proyectó de tecnología
 
Comment 1
 Comment 1 Comment 1
Comment 1
 
ADI (Eisner, 2010)
ADI (Eisner, 2010)ADI (Eisner, 2010)
ADI (Eisner, 2010)
 
Marketing2null Workshop V2 2009 05 14
Marketing2null Workshop V2 2009 05 14Marketing2null Workshop V2 2009 05 14
Marketing2null Workshop V2 2009 05 14
 
Staff launch slideshow (fre)
Staff launch slideshow (fre)Staff launch slideshow (fre)
Staff launch slideshow (fre)
 
Cesar chavez
Cesar chavezCesar chavez
Cesar chavez
 
Subgrupo2
Subgrupo2Subgrupo2
Subgrupo2
 
Viande.info Presentation au buffet débat questure assemblee nationale du 19 m...
Viande.info Presentation au buffet débat questure assemblee nationale du 19 m...Viande.info Presentation au buffet débat questure assemblee nationale du 19 m...
Viande.info Presentation au buffet débat questure assemblee nationale du 19 m...
 
Management regional : quelques principes
Management regional : quelques principesManagement regional : quelques principes
Management regional : quelques principes
 
Le monde des enfants travailleurs
Le monde des enfants travailleursLe monde des enfants travailleurs
Le monde des enfants travailleurs
 
Subgrupo2
Subgrupo2Subgrupo2
Subgrupo2
 
Medios de comuniacion
Medios de comuniacionMedios de comuniacion
Medios de comuniacion
 
Dinamica °1 grupo 06 AYDSI seccion 02
Dinamica °1 grupo 06 AYDSI seccion 02Dinamica °1 grupo 06 AYDSI seccion 02
Dinamica °1 grupo 06 AYDSI seccion 02
 
Sx sanfilippo a (genetica medica 2014) by gaby mani
Sx sanfilippo a (genetica medica 2014) by gaby maniSx sanfilippo a (genetica medica 2014) by gaby mani
Sx sanfilippo a (genetica medica 2014) by gaby mani
 

Más de Voyelle Voyelle

Construire mon plan d'action webmarketing en 5 étapes
Construire mon plan d'action webmarketing en 5 étapesConstruire mon plan d'action webmarketing en 5 étapes
Construire mon plan d'action webmarketing en 5 étapesVoyelle Voyelle
 
Le digital pour se developper à l'international 2
Le digital pour se developper à l'international 2Le digital pour se developper à l'international 2
Le digital pour se developper à l'international 2Voyelle Voyelle
 
La publicité digital pour tester son marché à l'international
La publicité digital pour tester son marché à l'internationalLa publicité digital pour tester son marché à l'international
La publicité digital pour tester son marché à l'internationalVoyelle Voyelle
 
Etablir une stratégie réseaux sociaux à l’international
Etablir une stratégie réseaux sociaux à l’internationalEtablir une stratégie réseaux sociaux à l’international
Etablir une stratégie réseaux sociaux à l’internationalVoyelle Voyelle
 
Développer l’export en qualifiant vos prospects et en les convertissant avec...
Développer l’export en qualifiant vos prospects et en les convertissant avec...Développer l’export en qualifiant vos prospects et en les convertissant avec...
Développer l’export en qualifiant vos prospects et en les convertissant avec...Voyelle Voyelle
 
Essentiel medias et reseaux sociaux
Essentiel medias et reseaux sociauxEssentiel medias et reseaux sociaux
Essentiel medias et reseaux sociauxVoyelle Voyelle
 
Prezi community management par Pierre AVRIL
Prezi community management par Pierre AVRILPrezi community management par Pierre AVRIL
Prezi community management par Pierre AVRILVoyelle Voyelle
 
Edo2016 démarrer son activité les outils de communication c. guezou
Edo2016  démarrer son activité les outils de communication c. guezouEdo2016  démarrer son activité les outils de communication c. guezou
Edo2016 démarrer son activité les outils de communication c. guezouVoyelle Voyelle
 
Comment développer la visibilité de mon commerce sur le web ?
Comment développer la visibilité de mon commerce sur le web  ?Comment développer la visibilité de mon commerce sur le web  ?
Comment développer la visibilité de mon commerce sur le web ?Voyelle Voyelle
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour WordpressVoyelle Voyelle
 
Support de formation pour les pages Google+
Support de formation pour les pages Google+Support de formation pour les pages Google+
Support de formation pour les pages Google+Voyelle Voyelle
 
Conférence : Et si l’avenir de mon magasin passait par Internet ?
Conférence : Et si l’avenir de mon magasin passait par Internet ? Conférence : Et si l’avenir de mon magasin passait par Internet ?
Conférence : Et si l’avenir de mon magasin passait par Internet ? Voyelle Voyelle
 
Les outils pour animer votre site web
Les outils pour animer votre site webLes outils pour animer votre site web
Les outils pour animer votre site webVoyelle Voyelle
 
Présentation des modules de Yahoo! Pipes
Présentation des modules de Yahoo! PipesPrésentation des modules de Yahoo! Pipes
Présentation des modules de Yahoo! PipesVoyelle Voyelle
 

Más de Voyelle Voyelle (20)

Construire mon plan d'action webmarketing en 5 étapes
Construire mon plan d'action webmarketing en 5 étapesConstruire mon plan d'action webmarketing en 5 étapes
Construire mon plan d'action webmarketing en 5 étapes
 
Le digital pour se developper à l'international 2
Le digital pour se developper à l'international 2Le digital pour se developper à l'international 2
Le digital pour se developper à l'international 2
 
La publicité digital pour tester son marché à l'international
La publicité digital pour tester son marché à l'internationalLa publicité digital pour tester son marché à l'international
La publicité digital pour tester son marché à l'international
 
Etablir une stratégie réseaux sociaux à l’international
Etablir une stratégie réseaux sociaux à l’internationalEtablir une stratégie réseaux sociaux à l’international
Etablir une stratégie réseaux sociaux à l’international
 
Développer l’export en qualifiant vos prospects et en les convertissant avec...
Développer l’export en qualifiant vos prospects et en les convertissant avec...Développer l’export en qualifiant vos prospects et en les convertissant avec...
Développer l’export en qualifiant vos prospects et en les convertissant avec...
 
Essentiel medias et reseaux sociaux
Essentiel medias et reseaux sociauxEssentiel medias et reseaux sociaux
Essentiel medias et reseaux sociaux
 
Prezi community management par Pierre AVRIL
Prezi community management par Pierre AVRILPrezi community management par Pierre AVRIL
Prezi community management par Pierre AVRIL
 
Edo2016 facebook
Edo2016  facebookEdo2016  facebook
Edo2016 facebook
 
Edo2016 twitter
Edo2016  twitterEdo2016  twitter
Edo2016 twitter
 
Edo2016 démarrer son activité les outils de communication c. guezou
Edo2016  démarrer son activité les outils de communication c. guezouEdo2016  démarrer son activité les outils de communication c. guezou
Edo2016 démarrer son activité les outils de communication c. guezou
 
Comment développer la visibilité de mon commerce sur le web ?
Comment développer la visibilité de mon commerce sur le web  ?Comment développer la visibilité de mon commerce sur le web  ?
Comment développer la visibilité de mon commerce sur le web ?
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
 
Support de formation pour les pages Google+
Support de formation pour les pages Google+Support de formation pour les pages Google+
Support de formation pour les pages Google+
 
Conférence : Et si l’avenir de mon magasin passait par Internet ?
Conférence : Et si l’avenir de mon magasin passait par Internet ? Conférence : Et si l’avenir de mon magasin passait par Internet ?
Conférence : Et si l’avenir de mon magasin passait par Internet ?
 
Les outils pour animer votre site web
Les outils pour animer votre site webLes outils pour animer votre site web
Les outils pour animer votre site web
 
Google analytics
Google analyticsGoogle analytics
Google analytics
 
Présentation des modules de Yahoo! Pipes
Présentation des modules de Yahoo! PipesPrésentation des modules de Yahoo! Pipes
Présentation des modules de Yahoo! Pipes
 
Mailjet
MailjetMailjet
Mailjet
 
CSS et CSS3
CSS et CSS3CSS et CSS3
CSS et CSS3
 
Formation html5
Formation html5Formation html5
Formation html5
 

Portfolio SPIP

  • 1. Portfolio et image dans l’article sous SPIP Nous  allons  voir  comment  insérer   des  images  dans  le  por@olio  et   leur  donner  une  vigneAe  au   format  carré  pour  uniformiser  le   rendu  et  voir  comment  insérer   des  images  dans  le  texte,  les   redimensionner  pour  que  cela   apparaisse  correctement.     Voyelle  -­‐  6  place  de  l'église  à  St  Jean  Sur  Vilaine  -­‐  contact@voyelle.fr   1  
  • 2. Dans  la  parGe  administraGve  de   l’arGcle,  sans  passer  par  le  mode   modificaGon  où  vous  pouvez   changer  le  texte,  vous  trouvez  en   bas  du  contenu  le  por@olio.   À  parGr  de  ceAe  espace  vous   pouvez  ajouter,  supprimer,   renseigner  vos  images  qui  seront   incluses  dans  la  parGe  publique  au   diaporama  d’images  en  bas  de   l’arGcle.   Voyelle  -­‐  6  place  de  l'église  à  St  Jean  Sur  Vilaine  -­‐   2   contact@voyelle.fr  
  • 3. Pour  ajouter  une  vigneAe,  vous   dépliez  le  cadre  de  la   photographie  en  survolant  la   flèche  grise  à  côté  du  nom  de   l’image,  puis  vous  cliquez  sur   «  parcourir  »  pour  aller  chercher   la  vigneAe  du  document  que  vous   aurez  préalablement  préparé  avec   pixlr.com/editor  par  exemple.   Pour  l’exemple,  la  vigneAe  est  un   carré  de  600px  par  600px.   Le  rendu  sur  le  site   public  donne  bien  des   vigneAes  carrés  et   lorsque  vous  cliquez  sur   les  vigneAes  s’affiche   l’image  dans  les   dimensions  d’origine.   Voyelle  -­‐  6  place  de  l'église  à  St  Jean  Sur  Vilaine  -­‐   3   contact@voyelle.fr  
  • 4. Pour  ajouter  une  image  dans  le   contenu  textuel  d’un  arGcle,  vous   devez  aller  dans  le  mode   «  Modifier  cet  arGcle  ».   Vous  devez  ensuite  cliquez  à   l’emplacement  où  devra  se  situer   votre  image  puis  vous  cliquez  sur   le  bouton  image  dans  la  barre   d’ouGl  :   S’ouvre  alors  une  fenêtre.  Vous   allez  ensuite  dans  «  explorer  le   serveur  »  pour  soit  chercher  une   image  déjà  chargée,  soit   télécharger  une  nouvelle  image.   Pour  cet  exemple,  nous  allons   télécharger  une  nouvelle  image.   Voyelle  -­‐  6  place  de  l'église  à  St  Jean  Sur  Vilaine  -­‐   4   contact@voyelle.fr  
  • 5. Vous  allez  chercher  votre  image   avec  «  Parcourir  »  puis  vous   télécharger.  Une  fois  téléchargée,   vous  cliquez  sur  «  UGliser  le   fichier  :  nomDeLImage.jpg  ».     Une  nouvelle  fenêtre  apparaît  qui   vous  permet  de  modifier  certains   paramètres  de  l’image.     Vous  pouvez  ainsi  ajouter  un  texte   de  remplacement  (accessibilité).  Il   est  normalement  obligatoire.     Vous  pouvez  aussi  changer  la  taille   de  l’image  en  gardant  ou  non  les   proporGons  avec  le  cadenas.   La  largeur  maximum  est  596px.   Voyelle  -­‐  6  place  de  l'église  à  St  Jean  Sur  Vilaine  -­‐   5   contact@voyelle.fr  
  • 6. Si  vous  insérez  une  image  qui   dépasse  596px  de  large,  l’image   dépassant  la  largeur  de  la   colonne,  nous  avons  insérer  un   redimensionnement  de  la  largeur.   Cela  évite  de  briser  la  page.   Cependant  ceAe  redimension  ne   reprenant  que  la  largeur,  votre   image  sera  déformée.     Il  est  donc  préférable  de  meAre   par  défaut  un  largeur  maximum   de  596px.   Voyelle  -­‐  6  place  de  l'église  à  St  Jean  Sur  Vilaine  -­‐   6   contact@voyelle.fr