How to use images in social media

1/ Import visuals in the visuals Library
 

1. First, go to "Filelist" by clicking on the "Filelist" button  in the left menu.

2. Then, select an existing folder from the navigation tree, or create a new folder associated to the visuals which you want to upload, using the "New" button  .

3. If you are using an existing folder, proceed to the next step.
If you are creating a new folder, name it to finalize your folder by clicking "Create Folders".

4. Now select your new folder in the navigation tree. Upload your visuals in your folder (3 ways) :

> In "drag and drop" mode towards your folder.

> By right clicking on your folder in the navigation tree and then clicking on "Upload Files"  .

> By using the "Upload Files"  button located at the top of the page.

At any time you can

>Update your content by uploading  a content with the same name

>Edit  your content 

>Modify the name  of your content

> Delete  your content

>Reframe  your content

>Copy  ou Cut  your content

2/ Inserting a visual into a page

1. Edit a block of content on a page by clicking on the "Edit" button .

2. Once in your block, access at the visual library by going in the "Text" field. You have 2 ways to do it :

> Directly by clicking on the "TYPO3 Image" button  .

> By clicking on "Insert" (Insérer) and then on "TYPO3 Image".

3. Then select the visual of your choice, giving priority to the "Nouvelle Image Magic" mode : Your visual will be optimized for a web display.

> Select the "Nouvelle Image Magic" mode.

> Select your visual in the navigation tree.

Important

Here are the different insertion modes for your visuals :

> "Nouvelle Image Plain" : your original visual will be inserted without treatment.

>"Nouvelle Image Magic" : your visual will be optimized for a web display.

>"Drag & Drop" : drag your visual from your computer folders.

4. Your visual is now imported in your "Text" field.

3 / Resize a visual
 

1. If needed, you can resize your visual once imported into the "Text" field. Select your visual with your mouse and click on the corners of your visual.

2. Edit your content until satisfied.
To finish, save your content. Watch Tuto "Save a content"

You can customize your content with different types of visuals. If necessary, you can : 

> Add an "Image Summary (thumbnail)" if you want a different visual than the field "Images" on the pages where your content is listed.

Below some examples (red frames) :

> Add an "Image Header" if you want a different visual for the Header of the page (different from the basic header of the content).

Below an example of a basic header (red frame):

> Add an "Image Mobile" if you want a different visual for the field "Images" on the content page (for the mobile version of your website).

Below an example (red frame) :

> Choose the "image Réseaux Sociaux" if you want a different visual for the field "Images" when you share the content on social networks.

Here is an example on Facebook (red frame) :

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).