Charger une image dans le "filelist" (liste des fichiers) et insérer l'image dans un contenu web (bloc)

1/ Importez des images dans la Bibliothèque d’images
 

1. En premier lieu, allez dans « Filelist » en cliquant sur l’icône « Filelist » dans le menu gauche.

2. Ensuite, sélectionnez dans l’arborescence un dossier existant, ou créez un nouveau dossier associé aux images que vous souhaitez mettre en ligne à l’aide de l’icône « Nouveau »  .

3. Si vous utilisez un dossier déjà existant, passez à l'étape suivante.
Si vous créez un nouveau dossier, définissez-lui un nom puis finalisez votre dossier en cliquant sur « Create folders ».

4. Sélectionnez maintenant votre nouveau dossier dans l'arborescence. Uploadez vos images dans votre dossier :

> Soit en mode « glisser / déposer » vers votre dossier.

> Soit en faisant un clic droit sur votre dossier dans l’arborescence puis en cliquant sur « Upload Files »  .

> Soit à l'aide de l'icône « Upload Files » en haut de page.

À tout moment vous pouvez

>Mettre à jour votre contenu en faisant un upload  d’un contenu ayant le même nom

>Editer votre contenu 

>Modifier le nom de votre contenu

> Supprimer votre contenu

>Recadrer votre contenu

>Copier ou Couper votre contenu

2 / Insertion d'une image dans une page

1. Editez un bloc de contenu présent sur une page en cliquant sur l’icône « Edit »   .

2. Une fois dans votre bloc, accédez à la bibliothèque de visuels en vous positionnant dans le champ « Text ». Vous avez 2 possibilités pour le faire :

> Directement en cliquant sur l'icône « TYPO3 Image » .

> En cliquant sur « Insérer » puis sur « TYPO3 Image ».

3. Sélectionnez ensuite l'image de votre choix, en privilégiant le mode « Nouvelle Image Magic » : Votre image sera optimisée pour un affichage web.

> Sélectionnez le mode « Nouvelle Image Magic ».

> Sélectionnez votre image dans l’arborescence.

À savoir

Voici les différents modes d’insertion pour vos images :

>« Nouvelle Image Plain » : votre image d’origine sera insérée sans traitement.

>« Nouvelle Image Magic » : votre image sera optimisée pour un affichage web.

>« Glisser-Déposer » : glisser votre image depuis vos dossiers de l’ordinateur.

4. Votre image est à présent importée dans votre champ « Text ».

3 / Redimensionner une image
 

1. Si nécessaire, vous pouvez redimensionner votre image une fois importée dans le champ « Text ». Sélectionnez votre image à l’aide de votre souris puis cliquez sur les coins de votre image.

2. Modifiez votre contenu jusqu’à satisfaction.
Pour finir, enregistrez votre contenu. Voir Tuto «Enregistrer un contenu»

Vous avez la possibilité de personnaliser vos contenus avec différents types de visuels. Si nécessaire, vous pouvez : 

> Ajoutez une Image Summary (vignette) si vous souhaitez un visuel différent du champ « Images » sur les pages où votre contenu est listé.

Ci-dessous quelques exemples (encadrés rouges) :

> Ajoutez une Image Header si vous souhaitez un visuel différent pour le Header de la page, que le Header de base du contenu.

Ci-dessous un exemple d’un Header de base (encadré rouge) :

> Ajoutez une Image Mobile si vous souhaitez un visuel différent du champ « Images » sur la page du contenu, pour la version mobile de votre site.

Ci-dessous un exemple (encadré rouge) :

> Choisissez l’image Réseaux Sociaux si vous souhaitez un visuel différent du champ « Images » quand on partage le contenu sur les réseaux sociaux.

Ci-dessous un exemple sur Facebook (encadré rouge) :

1. Renaming

All pictures must have a title which clearly define their content.
This renaming allows users to find them easily in the CMS.

Example : Name_Surname_societegenerale.jpeg
Example : Event_Location_Date.jpeg

It is also important for Google to understand what pictures represent, that's why we recommend to fill the "Description" meta-description field in the CMS.

2. JPEG or PNG ?

We recommend to use .JPEG format for all pictures, excepting images and logos which include transparency aspect and require the .PNG format.

3. Size and resolution

Pictures have to be as lightweight as possible (around 500 ko).
With Photoshop, make sure to use the option "Save for the web" to save your picture. Otherwise, use the friendly website "TinyJPG" to compress your file. Pictures are usually needed in 680px x 900px (max).