Warning WARNING: THIS VIDEO REFERS TO OLDER VERSIONS OF WORDPRESS OR EXTERNAL WEBSITES. While the general principles demonstrated may remain the same, specific details may differ greatly from when this was recorded.

Summary

Inserting and Editing Images in Wordpress

Walkthrough

Insert & Edit Images in WordPress
  • From the Dashboard click the Pages option on the left sidebar
  • In our example we choose one of the Sample Product pages, and clicked Edit
  • You can choose something of relevance to yourself, or a Sample Page
  • At the top of the text box to the right you'll notice Visual or HTML as an editing option
  • Visual is What You See Is What You Get, ie highlight some text, click Bold and it goes Bold
  • Whereas if you view the HTML editor you'll see the word you bolded not bold
  • It will be in plain text but it will be surrounded by the html code for bold, "strong"
  • For now the visual editor's a good place to start, but the html editor will be relevant for actions later on
  • So, open a new tab or window and go to lipsum.com, which is a Lorum Ipsum generator
  • Low in the second column on the right, choose 3 paragraphs to generate
  • This will generate 3 paragraphs of sample text to copy
  • Loren Ipsum is used as a filler text by designers to allow a viewer to visualise the look of a site
  • But crucially without distracting the viewer from the design layout
  • So it's quite useful to use when you're mocking up pages before you have content ready
  • Go back to your Edit Page and paste in the Latin text in the text box and click Update on right
  • Click to view the page and you'll see you have a better feel of what text will look like on it
  • You can repeat these steps to add sample text to a second product page, as we did in the example
Adding an Image to a Page: Embed From Another Site [Video Time 3:08mins]
  • With many pages you may well want to add images to make them more interesting to viewers
  • Open a new tab, and google 'iStockphoto', click to go onto the site
  • It's a great place to get photos for commercial use, with different prices for different sizes
  • We use the example of a camera, so go the Search bar and type in Camera
  • Right Click on the image, and click Save Image Location
  • It will be watermarked with iStockphoto which is fine as it's only an example
  • Go back to your Edit window on your page and Click on the Add an Image button
  • Click the second tab at the top, From URL
  • Paste in the address in the space for the Image Url
  • The important thing to realise is the image is still on the iStockphoto website
  • Type in a title for the Image, in this example Digital Camera
  • Can make the alternative text the same, so make it Digital Camera
  • You can put in a caption if you wish to, but in our example we left it blank
  • You can change the alignment of the image in regards to the text, we set it to the Right
  • You can also make the image a clickable link, to bring visitors to another location on or off your site
  • Click Insert into Post and you can see instantly it's in the Edit window, click Update
  • Click to View Page and you should see that it's inserted and aligned to your specification
Adding an Image to a Page: Uploading the Image to Your Site [6:10mins]
  • For this example we picked another image from iStockphoto
  • Click on it, and then on the image page, right click and choose Save Image As
  • You can rename it to something shorter or more descriptive and hit Save
  • We simply called it Sample Product2 Image
  • Go to Pages and open Sample Product 2 Page to Edit
  • Click on Add an Image button/icon
  • Locate where you downloaded the sample image, click on it and click Open
  • You should see it upload in the window on the site
  • The same options are available as before, you can change the Title, Alternative Text
  • You can Add a Caption if you wish, or a description
  • In our example we put the Title and Alternative Title as Digital Camera 2
  • You can click none to make the Link Url blank as we did
  • We chose right aligned again and clicked Full Size, then click Insert into Post
  • You should see it appear in your post. Click Update on the right, then view page
  • The image location of the first image is still on the original iStockphoto website
  • Whereas the image of the uploaded second image is on our own site
  • You'll see the difference when you click on the image, the address bar will indicate it's location

Leave a Reply

Your email address will not be published. Required fields are marked *