Difference between revisions of "Images in Wordpress"

From Help Wiki
m
 
(31 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
__NOTOC__
+
 
−
<div class="row-fluid"><div class="span8 ">
+
<div class="container-fluid">
 +
<div class="row">
 +
<div class="col-md-8">
 
<div class="lead">
 
<div class="lead">
−
[[Image:Blue-l.png|left|75px]] Learn to insert images into your Posts or pages.
+
Learn to insert images into your Posts or Pages and add alt text for Accessibility.
 
</div>
 
</div>
−
<div class="gradientshadow"></div>
+
The following directions are for use with the "Classic Editor." See below the alt text section for guides about using the newer Gutenberg/block editor.
−
[[Image:imagemenu.png|thumb|250px|right|Figure 1]]
+
−
 
+
−
[[Image:wordpressimage.png|thumb|250px|right|Figure 2]]
+
−
 
+
−
[[Image:imagedetails.png|thumb|250px|right|Figure 3]]
+
  
 
===Storing Images in your WordPress Media Library===
 
===Storing Images in your WordPress Media Library===
−
====  Uploading Images To Wordpress ====
+
[[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.
 
#While editing your post or page, place the cursor in the page where you'd like the image inserted.
−
#Click on the'''Add Media''' icon (figure 1) and select an image from your computer (Select Files)
+
#Click on the '''Add Media''' button (figure 1) and select an image from your computer (Select Files)
 
#Customize the image size, alignment, caption
 
#Customize the image size, alignment, caption
 
#Click '''Insert into post'''
 
#Click '''Insert into post'''
  
−
==== Edit image properties afterwards ====
 
−
You can customize how the image looks once you upload it.
 
−
# Clicking on the image once in your page or post then click the edit image icon.  This will bring up the dialog box you saw when you first uploaded the image (figure 3). 
 
−
# From here you can realign, resize and add a caption.
 
  
−
====File storage space====
+
[[Image:wordpressimage.png|thumb|250px|right|Figure 2]]
−
By default all sites have a 100MB upload limit. You can request an increase from Academic Computing or consider using a cloud-based image storage solution.
+
  
  
 +
====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
  
  
  
−
----
+
=== Guides for using the Gutenberg, or "block" editor ===
 +
* [https://wordpress.org/gutenberg/ Welcome to the Gutenberg editor]
 +
* [https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/ How to Use the WordPress Block Editor (Gutenberg Tutorial)]
  
  
−
[[File:Flickr-Photo-Sharing.png|250px|thumb|right|Flickr share option]]
+
<!-- end col-md-8 -->
−
===Cloud-based Image Hosting===
+
−
====Embed an image from Flickr.com====
+
−
#Create a flickr account and uploaded images
+
−
#Navigate to the image you'd like to embed from your Flickr account
+
−
#Click the '''Share''' button
+
−
#Copy the URL to your image (under the "Grab Link" option)
+
−
#Paste the URL to your image on its own line in your WordPress post or page
+
−
<!-- end span8 -->
+
 
</div>
 
</div>
−
<div class="span4 gradientbox">
+
<div class="col-md-1"></div>
 +
<div class="col-md-3 sidebar">
 +
{{WordPress Tutorial Header}}
 +
 
 +
{{WordPress AddingImagesAndMedia Sidebar}}
 +
 
 +
 
 +
----
 +
{{WordPress DesigningYourSite Sidebar}}
 +
----
 
{{WordPress Help Sidebar}}
 
{{WordPress Help Sidebar}}
  
−
<!-- end span4-->
+
<!-- end col-md-3-->
 
</div>
 
</div>
−
<!-- end row-fluid -->
+
<!-- end row-->
 
</div>
 
</div>
−
 
+
<!-- end container-->
−
 
+
</div>
−
 
+
<!-- Generator=Template:TwoColumn -->
−
 
+
__NOTOC__
−
 
+
__NOEDITSECTION__
−
 
+
[[category: Wordpress]]
−
 
+
[[Category:Wordpress Tutorial]]
−
 
+
−
[[category:Wordpress]]
+
−
[[category:Wordpress Tutorial]]
+

Latest revision as of 07:43, 23 September 2025

Learn to insert images into your Posts or Pages and add alt text for Accessibility.

The following directions are for use with the "Classic Editor." See below the alt text section for guides about using the newer Gutenberg/block editor.

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


Guides for using the Gutenberg, or "block" editor


Blue-l.png

WordPress Tutorial

Adding Images and Media


Designing Your Site

Still have WordPress questions?

Retrieved from "http://helpwiki.evergreen.edu/wiki/index.php?title=Images_in_Wordpress&oldid=47309"

The Evergreen State College