Difference between revisions of "Images in Wordpress"

From Help Wiki
m
m (subst applied to Template:TwoColumn)
 
(57 intermediate revisions by 4 users not shown)
Line 1: Line 1:
*[http://learn.wordpress.com/get-flashy/ Add your own images]
 
*[http://wikis.evergreen.edu/computing/index.php/Attach_a_file_to_a_WordPress_post_or_page Linking to files]
 
*Link to files on Orca/programs to provide access to password protected files only accessible by your students
 
  
===obsolete===
+
<div class="container-fluid">
[[Image:Images0.jpg|thumb|250px|right|Figure 1]]
+
<div class="row">
[[Image:Images1.jpg|thumb|250px|right|Figure 2]]
+
<div class="col-md-8">
[[Image:Images2.jpg|thumb|250px|right|Figure 3]]
+
<div class="lead">
[[Image:Images3.jpg|thumb|250px|right|Figure 4]]
+
Learn to insert images into your Posts or Pages.
 +
</div>
  
 +
===Storing Images in your WordPress Media Library===
 +
[[Image:imagemenu.png|thumb|250px|right|Figure 1]]
 +
====  Uploading Images To WordPress ====
 +
#While editing your post or page, place the cursor in the page where you'd like the image inserted.
 +
#Click on the '''Add Media''' button (figure 1) and select an image from your computer (Select Files)
 +
#Customize the image size, alignment, caption
 +
#Click '''Insert into post'''
  
== Images - Wordpress ==
 
  
This tutorial will instruct you on the various methods to insert images into your wordpress blog.
 
  
=== Uploading Images To Wordpress ===
 
  
# Select the "Add an Image" box next to "Upload/Insert". [[:Image:Images0.jpg|Figure 1]]
 
# Be sure you are using the browser uploader [[:Image:Images1.jpg|Figure 2]], the flash uploader is known to not work very well. If you are using the flash uploader, simply click on browser uploader. [[:Image:Images2.jpg|Figure 3]]
 
# Simply fill in the required fields. [[:Image:Images3.jpg|Figure 4]] Click "Insert into post" to insert directly into your post, or "Save all changes" to insert it later.
 
  
=== Image Gallery ===
+
[[Image:wordpressimage.png|thumb|250px|right|Figure 2]]
  
See the [http://www2.evergreen.edu/wikis/computing/index.php?title=Image_Galleries_-_WordPress Image Gallery Tutorial] page.
 
  
  
  
[[category:Wordpress]]
+
 
[[category:Wordpress Tutorial]]
+
 
 +
 
 +
====Adding Alt Text to Images====
 +
 
 +
'''Alternative (Alt) Text provides a textual alternative to visual media. Alt text is accessible to screen readers and allows those who may not be able to view the image to understand the media presented in your page or post.'''
 +
 
 +
# In the Page or Post, click on the image once to highlight it.
 +
# From the pop-up mini-menu, click on the '''Edit''' (pencil icon) button.
 +
# At the '''Image Details''' page, enter a description of the image in the '''Alternative Text''' field. (Figure 3)
 +
# Click the blue '''Update''' button in the lower right corner to save.
 +
 
 +
[[File:Screen Shot 2017-01-27 at 1.00.15 PM.png|thumbnail|right|Figure 3]]
 +
 
 +
 
 +
 
 +
 
 +
====Accepted File Types====
 +
* .jpg
 +
* .jpeg
 +
* .png
 +
* .gif
 +
 
 +
 
 +
<!-- end col-md-8 -->
 +
</div>
 +
<div class="col-md-1"></div>
 +
<div class="col-md-3 sidebar">
 +
{{WordPress Tutorial Header}}
 +
 
 +
{{WordPress AddingImagesAndMedia Sidebar}}
 +
 
 +
 
 +
----
 +
{{WordPress DesigningYourSite Sidebar}}
 +
----
 +
{{WordPress Help Sidebar}}
 +
 
 +
<!-- end col-md-3-->
 +
</div>
 +
<!-- end row-->
 +
</div>
 +
<!-- end container-->
 +
</div>
 +
<!-- Generator=Template:TwoColumn -->
 +
__NOTOC__
 +
__NOEDITSECTION__
 +
[[category: Wordpress]]
 +
[[Category:Wordpress Tutorial]]

Latest revision as of 17:01, 14 August 2017

Learn to insert images into your Posts or Pages.

Storing Images in your WordPress Media Library

Figure 1

Uploading Images To WordPress

  1. While editing your post or page, place the cursor in the page where you'd like the image inserted.
  2. Click on the Add Media button (figure 1) and select an image from your computer (Select Files)
  3. Customize the image size, alignment, caption
  4. Click Insert into post



Figure 2




Adding Alt Text to Images

Alternative (Alt) Text provides a textual alternative to visual media. Alt text is accessible to screen readers and allows those who may not be able to view the image to understand the media presented in your page or post.

  1. In the Page or Post, click on the image once to highlight it.
  2. From the pop-up mini-menu, click on the Edit (pencil icon) button.
  3. At the Image Details page, enter a description of the image in the Alternative Text field. (Figure 3)
  4. Click the blue Update button in the lower right corner to save.
Figure 3



Accepted File Types

  • .jpg
  • .jpeg
  • .png
  • .gif