Jump to content

How and when do I use images?: Difference between revisions

How and when do I use images? (view source)

Revision as of 22:55, 11 November 2013

158 bytes removed ,  11 years ago
→‎How to use images
Line 3: Line 3:
===HTML===
===HTML===
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''':
'''Usage Examples''':
<li>Minimal Use Structure: <img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” /></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=”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>
*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><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://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%” />
</ul>
 


Note: 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.
Note: 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.


ALT means ''alternate text''.  If an image becomes unavailable, the text tells the viewer what the image would have been.  For vision impaired users, the alt text is used by the screen reader software to describe the image.
ALT means ''alternate text''.  If an image becomes unavailable, the text tells the viewer what the image would have been.  For vision impaired users, the alt text is used by the screen reader software to describe the image.
 
----
 
===WordPress===
===WordPress===
Images can be added through uploading or inserted from a URL, or directly added by manually adding an image via HTML inside the source editor text box.
Images can be added through uploading or inserted from a URL, or directly added by manually adding an image via HTML inside the source editor text box.


====Uploading====
====Uploading====
<ul>'''Multiple Files'''
'''Multiple Files'''
To upload several files at once.
To upload several files at once.
<li>On the left side of the control panel, click Media.  </li>
*On the left side of the control panel, click Media.   
<li>Under Media click Add New.  </li>
*Under Media click Add New.   
<li>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”.</li>
*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”.
</ul>
 
[[File:Wordpress-3.7.1-upload-multiple-files.png|394x218px]]
[[File:Wordpress-3.7.1-upload-multiple-files.png|394x218px]]




<ul>'''Browser Uploader'''
'''Browser Uploader'''
If the multi-file uploader is unavailable or exhibiting problems:  
If the multi-file uploader is unavailable or exhibiting problems:  
<li>Click the browser uploader link under the dashed box.  </li>
*Click the browser uploader link under the dashed box.   
<li>Click the Browse... button, select your file from your computer, and then click Upload.  Note the “Maximum upload file size”.</li>
*Click the Browse... button, select your file from your computer, and then click Upload.  Note the “Maximum upload file size”.
</ul>
 
[[File:Wordpress-3.7.1-upload-new-media.png|348x225px]]
[[File:Wordpress-3.7.1-upload-new-media.png|348x225px]]




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'''.  
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'''.  
<ul>'''Insert from URL'''
 
<li>Click the Insert from URL link on the left. </li>
*Click the Insert from URL link on the left.
<li>Type or paste the image's URL into the top box.  </li>
*Type or paste the image's URL into the top box.   
<li>Enter a caption under the image, and then the "Alt. Text".  </li>
*Enter a caption under the image, and then the "Alt. Text".   
<li>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.  </li>
*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.   
<li>Lastly, click the “Insert into Post” button at bottom right. </li>
*Lastly, click the “Insert into Post” button at bottom right.  
</ul>
 
[[File:Insert_from_URL_-_WordPress.png|400x154px]]
[[File:Insert_from_URL_-_WordPress.png|400x154px]]


Litwiki
twitter
217

edits

Retrieved from "https://litwiki.org/wiki/Special:MobileDiff/13722"