WordPress.org

Ready to get started?Download WordPress

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

fr:Using Image and File Attachments

Page d'accueil du Codex en français - Télécharger WordPress en français
Les utilisateurs francophones se retrouvent sur le site WordPress-Francophone, notamment sur son forum d'entraide.

This page is marked as incomplete. You can help Codex by expanding it.

In WordPress 2.5, media management has been vastly improved. You can manage your existing files, and upload new ones directly using buttons on the editor toolbar.

This is a guide to using Image and File Attachments, about which there is some confusion as to functionality in WordPress 2.5. It is intended to answer the following questions:

  1. How do image and file attachments work?
  2. How do I use the feature?
  3. What is the attachment.php template page all about?

Pré-requis pour l'upload des fichiers

In order to use all these tools, you have to change the chmod of wp-content folder to 777. If you have not changed permissions in order to write in wp-content folder, you will not be able to use the uploader. If you do not know how to change this value, please read Changing File Permissions.

Comment Fonctionnent les Images et Fichiers Joints dans les Articles de WordPress 2.5

In WordPress 2.5 the idea of a separate upload tab, which existed in previous versions, has been superseded by a system that is fully integrated in the editor toolbar. The "add media" section contains four buttons: add image, add video, add audio, add media. When you click on add image, you will see a panel come up where you can choose whether to upload an image, use an image from the gallery (images in the current article) or images from the media library (uploaded in any post or page).

There is also a new media library section, where you can view, edit and delete media files (but not add).

Comment Fonctionnent les Images et Fichiers Joints dans les Articles de WordPress 2.0

Many users have commented that they have uploaded images or files using the "Upload" tab when composing blog entries, but are mystified as to why these attachments do not then appear anywhere in their blog. Some things which blog authors should be aware of:

  1. The area beneath the post-editing window is essentially a file library, allowing you to Upload and Browse uploaded files and images. They do not become "attachments" until you actually Insert them into the post. Therefore, it is a misnomer to call them attachments; it may be more accurate to call them "embedded files."
  2. The options for inserting images and file links into your post are available by Clicking on the thumbnail in the "Browse" or "Browse All" tab (which function like browsable libraries of uploaded files). Once you click, a small popup "menu" should appear with toggles for what kind of hyperlink to wrap the image or file link in, and for actually inserting the library item.
  3. Depending on what options you select from the aforementioned popup "menu" (and we use this term loosely, because it doesn't function like a typical popup menu, as you will see below), the inserted item may or may not make use of your attachment.php template page. If the appropriate options are selected from the popup menu, as discussed below, then a visitor who clicks on the item in the blog post will be taken to the page styled by the attachment.php template file if such a file exists in the theme you are using.

Appliquer les Instructions d'Utilisation

These instructions assume you are in the Admin back end of your WordPress site.

1) To create a new blog entry, click "Write." To edit an existing post, click "Manage" and click "Edit" next to the desired post.

2) Beneath the text-editor window you should see a section with "Upload" as its heading. If the file/image you wish to attach to the blog entry has already been uploaded in a previous posting and you just wish to use it again, then you should see a tab next to "Upload" which is labelled "Browse All." Click this tab and then skip to step 10.

3) Click "Browse" and find the file on your local computer. Note It is recommended that you make your filename "server friendly" by making sure the filename has no spaces, apostrophes, slashes or other non-alphanumeric characters ($,%,&, etc.) and renaming the file before uploading if it does.

4) Select the file on your computer, just like you were navigating to and opening a file in a word-processing program, and click "Open." The dialog box will close and the filename will now be filled in next to "File."

5) Under Title type a short, plain-English descriptive title for the file.

6) Under Description type a slightly longer, more descriptive note about what the file is.

7) Click "Upload."

8) The "Browse" tab should now be visible and highlighted next to "Upload." You may click back to "Upload" and upload further files if you wish to. Once you are done, click back to "Browse."

9) Now whatever files/images you have uploaded are sitting there on the web server, waiting to be used. If you click "Browse" it will show all files which the program thinks are relevant to this post (whichever files you have uploaded

10) Now you insert the image or file into the post. For inserting images, see "Inserting Images" below. For files, see "Inserting Files."

Insertion d'Images

Click once on the image. A small popup menu appears. Most menu items are a toggle switch that allows you to select various options before actually adding the image to your post. For example, click "Using Thumbnail" and it will turn to "Using Original." Click "Using Original" and it will toggle back to "Using Thumbnail." Here are the explanations of the various options:

  1. Using Thumbnail will insert a thumbnail version of the image into your post.
  2. Using Original will insert the image at its original size. (Note that if the original image is very small, the thumbnail version may actually be bigger!). If you entered text in the Title box, then this text will appear as the alt text for the photo. Text in the Description field will not be used anywhere inside the code that makes the image appear.
  1. Not Linked means the image will simply appear in the post without any kind of hyperlink attached to it (if a visitor clicks on it, it will not take them to another page.)
  2. Linked to Image will put a hyperlink on the image so if a visitor clicks on it, they will be taken to a blank browser page containing JUST the original-sized image (even if you selected "Using Thumbnail," which only applies to the actual blog entry). This is particularly useful if you have an image which is very large, because then you can use a thumbnail in the posting but have it link to the full-sized image. If you entered text in the Title field, this text will be used to describe the link (the text that appears when you hover over a link in some browsers).
  3. Linked to Page will put a hyperlink on the image and if a visitor clicks on it, they will be taken to a nicely-laid out blog page which features the image. If you entered text in the Title field, this text will be used to describe the link (the text that appears when you hover over a link in some browsers). If you entered text in the Description field, this text will then appear in the body of the post, just like normal post content. Keep in mind that since this page will be laid out like other blog pages, if the image is very wide it may "break" the layout of some themes' pages by being too wide for them and so if you have a particularly wide image, consider using "Linked to Image" instead of "Linked to Page."
    (In this way, you can consider "Linked to Page" to be a shortened phrase meaning "Linked to a standalone, themable blog page which itself contains the link to the actual content." A little too long for a popup menu.)
    Also consider that if you use "Linked to Page" it will not only create a new little blog page for the image (using the Description field text, as mentioned above), it will also allow visitors to comment on it separately from the post. So you can solicit comments on an image this way.
  1. Send to Editor takes those options you selected and then inserts the image into the editor window wherever the cursor was.
  2. Delete will remove the file from the server entirely.
  3. Close Options closes the little popup menu. Unlike most popup menus it will NOT go away by itself, so click this when you're done inserting the image.

Notes pour les Versions 2.1.x

In this version and newer there is no "popup menu" anymore. Clicking on the images will display a list with radio button options similar to those described above.

Insérer des Fichiers

Click once on the file name. A small popup menu appears. The program attempts to deduce what kind of file it is; for example if you upload a .DOC file (Microsoft Word file) it will read that and say "File Type: application/msword" at the top, which is in this case a successful guess at what the file is.

Most menu items are a toggle switch that allows you to select various options before actually adding the image to your post. For example, click "Linked to File" and it will turn to "Linked to Page." Click "Linked to Page" and it will toggle back to "Linked to File." Here are the explanations of the various options:

  1. Linked to File means that when a visitor clicks on the link that you insert when you hit "Send to Editor," they will be taken directly to the file in question (and most likely prompted to download it, depending on the user's browser and system settings).
  2. Linked to Page means that when a visitor clicks on the link, they will be taken to a blog page featuring the filename and its title and description--basically adding an extra layer between the blog posting and the actual download of the file.
    (In this way, you can consider "Linked to Page" to be a shortened phrase meaning "Linked to a standalone, themable blog page which itself contains the link to the actual content." A little too long for a popup menu.)
    Also consider that if you use "Linked to Page" it will not only create a new little blog page for the file download, it will also allow visitors to comment on it separately from the post. So you can solicit comments on a file in this way.
  1. Using Title will use, for the text it inserts in the blog entry, the title you typed next to "Title" when uploading the file.
  2. Using Filename will use the actual filename. So if you uploaded a file named "thisdocument.pdf" and gave it a Title of "New Product Brochure" when uploading, then it will insert "New Product Brochure" into the blog entry if you pick "Using Title" and will insert "thisdocument.pdf" if you pick "Using Filename." No matter which you use (and Using Title is strongly recommended for readability) it will still link to the actual filename when clicked on.
  1. Send to Editor takes those options you selected and then inserts the hyperlinked text into the editor window wherever the cursor was. Thus, unlike with images, it simply creates a clickable hyperlink to the file.
  2. Delete will remove the file from the server entirely.
  3. Close Options closes the little popup menu. Unlike most popup menus it will NOT go away by itself, so click this when you're done inserting the image.

Once you have selected the options you want and clicked "Send to Editor," the image or file title should appear in the editor window! Be sure to click "Close Options" to close the little popup menu.

Utilisation dans Votre Site

You may now wish to go into the attachment.php"template file in your theme folder if you have this file in your theme (or create it if you don't), because you may want to have a custom-styled page for these so-called attachments. Of course, as covered in the instructions above, this will be irrelevant and unnecessary if you never use the Link to Page option when inserting the embedded library item.

Remember, if you insert items with the "Link to Page" option selected, then not only will the attachment.php template file be called, but on this page comments can be posted completely separately from the actual blog entry. These comments are linked to that attachment, so if you insert (for example) the exact same image into two different posts from the "Browse All" tab, using the "Link to Page" option both times, then people who click into it will get the same page of comments whether they clicked on it from the instance in the first blog entry or the second. (The downside of this is that the attachment still "thinks" it is the child of the original post, so in some attachment.php template files [including the one in the default WordPress theme] that show a breadcrumb trail, it will show the trail as "Post One > Attached Image" even if you clicked on it from "Post Two.")

This should serve to clear up some confusion, and revisions are welcome.

Notes Supplémentaires

  • If you are using Mozilla Firefox, you can also drag and drop the file into Post editor. This creates a thumbnail image only, however, and if your blog is NOT in the root folder of your site it may produce a broken link.
    • If the popup menu doesn't show up, check whether the extension "Adblock" (if installed) is the source for the problem. To do so, temporarily deactivate Adblock and recheck whether the popup menu shows up now. If this is the problem, add your blog to Adblock's white list.
  • You can use the white squares in every corner of image to resize your image in your post (however, resize will not change the original file size), or move inside the Post Editor to insert wherever you want it in your post
  • If you do not want to use the WYSIWYG editor, and/or you know some HTML; you can use the classic Post editor, letting you modify your HTML directly. If you are not using the WYSIWYG editor:
    1. Click over the file you want to use, and select "Send to Editor" option. The file will go to the Post editor.
    2. You will see the HTML code inserted into your post. You can cut and paste it wherever you want, and modify values such as width or height.

Voir aussi