twitter
217
edits
How and when do I use images?: Difference between revisions
→How to use images
No edit summary |
|||
| Line 3: | Line 3: | ||
<h4>HTML</h4> | <h4>HTML</h4> | ||
HTML uses the <img> tag for marking up a document to include an image. Images are included through the use of the image's URL. | HTML uses the <img> tag for marking up a document to include an image. Images are included through the use of the image's URL. | ||
<ul>'''Usage Examples''': | |||
Minimal Use Structure: <img src= | <li>Minimal Use Structure: <img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” /></li> | ||
Typical Use Structure: <img src= | <li>Typical Use Structure: <img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” alt=”Dialog showing multiple file upload option.” align=”middle” width=”(# [pixels] or #%)” height=”(# [pixels] or #%)” /></li> | ||
<li><img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” alt=”Dialog showing multiple file upload option.” align=”middle” width=”348” height=”50%” /></li> | |||
<img src=”http:// | </ul> | ||
It is not recommended to use the width and height attributes. If the image is smaller than the coded dimensions, the image will be enlarged, possibly deformed. If the image is significantly larger then the full-sized image will be downloaded. A common mistake is to take a very large image and use the width and height attributes to make it appear smaller. | It is not recommended to use the width and height attributes. If the image is smaller than the coded dimensions, the image will be enlarged, possibly deformed. If the image is significantly larger then the full-sized image will be downloaded. A common mistake is to take a very large image and use the width and height attributes to make it appear smaller. | ||
| Line 18: | Line 18: | ||
On the left side of the control panel, click Media. Under Media click Add New. Drag & Drop one or more images from your computer to inside the dashed box. Or click the “Select Files” button in the center of the dashed box. Note that below the dashed box is a notification of “Maximum upload file size”. | On the left side of the control panel, click Media. Under Media click Add New. Drag & Drop one or more images from your computer to inside the dashed box. Or click the “Select Files” button in the center of the dashed box. Note that below the dashed box is a notification of “Maximum upload file size”. | ||
[[File:Wordpress-3.7.1-upload-multiple-files.png]] | |||
If the multi-file uploader is unavailable or exhibiting problems, click the browser uploader link under the dashed box. Then click the Browse... button, select your file from your computer, and then click Upload. Note the “Maximum upload file size”. | If the multi-file uploader is unavailable or exhibiting problems, click the browser uploader link under the dashed box. Then click the Browse... button, select your file from your computer, and then click Upload. Note the “Maximum upload file size”. | ||
[[File:http://litmuse.mga.edu/litwiki/images/4/41/Wordpress-3.7.1-upload-new-media.png]] | |||
You may add images while you are creating a new post. Click the “Add Media” button above the left top of the text box. You may upload files using the preceding methods or you may Insert from URL. To “Insert from URL” click the Insert from URL link on the left. Type or paste the image's URL into the top box. Enter a caption under the image, and then the Alt. Text. Choose your alignment, then choose what happens when the image is clicked: | You may add images while you are creating a new post. Click the “Add Media” button above the left top of the text box. You may upload files using the preceding methods or you may Insert from URL. To “Insert from URL” click the Insert from URL link on the left. Type or paste the image's URL into the top box. Enter a caption under the image, and then the Alt. Text. Choose your alignment, then choose what happens when the image is clicked: | ||
Go to the original image, go to a custom URL, or nothing. If you click custom URL, type or paste the custom URL into the box provided below it. Lastly, click the “Insert into Post” button at bottom right. | Go to the original image, go to a custom URL, or nothing. If you click custom URL, type or paste the custom URL into the box provided below it. Lastly, click the “Insert into Post” button at bottom right. | ||
[[File:http://litmuse.mga.edu/litwiki/images/3/39/Insert_from_URL_-_WordPress.png]] | |||
Note that you are able to manually add images via URL directly into the text box by using WordPress' markup language and HTML. | Note that you are able to manually add images via URL directly into the text box by using WordPress' markup language and HTML. | ||