Ask Ana: Inserting images (relax, this is not NSFW)

Have a bloghop or other picture you’d like to use on your sidebar?  Never fear!  Ask Ana is here!

A picture?  On Ana’s blog?  Of…that?  What?  I know, I know.

Maybe everyone else is great with media and wordpress and I am the dinosaur, but after helping a friend with images I decided to share the information with anyone who is interested.  After this many months of blogging, it took quite a bit of searching to figure out how to use images on wordpress.  The tricky part is that all images have to be online (either within wordpress or at a separate URL) in order to be inserted in a post.

.

Before you start, you need to have a file (jpg is fine) of the image.  If you don’t have that already, right-click (or control-click if you are on a Mac) on the image and choose “Save image as”.  Label it whatever you like and save it to your computer.

Then you have to upload the picture file to WordPress (you can’t directly put it in your sidebar).

1.  Go to your dashboard and click on “Media”.  Choose “Add new.”  Then choose “Browse” and search for the image of your book cover.  (This is just like uploading any attachment.)  Click “Upload”.

If the uploading is successful, it will take you to your “Media Library” page.  Click on “view” next to the picture file you just uploaded.  Go to your browser bar and copy the URL.  It may be easier, at least the first time, to then paste it into an empty document for safekeeping.

Got it?  Great!  Now you need to put it in your sidebar.  This will sound familiar, but this time you’ll need to put in a different URL.

2.  Go back to your dashboard and click on “Widgets”.  Choose “Text” and drag-drop it to your sidebar. 

This is the code to insert an image.  You need to delete only the:

whateveryourfiletitlenameisthatyoucopiedfromthebrowserbar

and replace it with the URL of your uploaded picture (from #1).  No spaces, no extra letters, nothing.  Make sure that the quotation marks are before and after your URL.

Now go to your homepage and check that the image has appeared.  Don’t worry about adjusting size yet.  Baby steps.

Okay, ready to hyperlink?

 

3.  Go back to dashboard, go to your widgets, and open the text box again.  This time, you need to use this code:

a href=”http://whereveryouwantthelinktogo/“>

Again, you need to replace:

whereveryouwantthelinktogo

with your chosen URL.  Don’t change anything you’ve already put in; just add this new piece.  Be sure to leave in the quotation marks, and make sure that every punctuation mark is exact.

By this time, your text box widget should look like this (but with your unique URLs):

<a href=”http://whereveryouwantthelinktogo“><img src=”http://whateveryourfiletitlenameisthatyoucopiedfromthebrowserbar.jpg”/>

Click “Save”.  Go back to your homepage and hover over the image to make sure it is linked.  If it’s not working, go back to each step and make sure you did everything carefully.

If you want to adjust the size, add this code:

width=”153″ height=”224″

Those numbers will make your sidebar image the same as the “Spank or Treat” button.

So, for example, if you wanted to add the Spank or Treat button to your sidebar you would insert:

<a href=”https://governingana.wordpress.com/2012/10/06/spank-or-treat-2012-halloween-contest/“><img src=”https://governingana.files.wordpress.com/2012/10/spankortreat6.jpg” width=”153″ height=”224″/>

You know you want to!  Go ahead, I won’t tell.  😀

.

Yes, if you have the “image” widget” this can be done more simply, but now that you know the code widgets will be a snap!  Simply drag-and-drop the “image” widget to your sidebar and fill in the appropriate links for image URL, reference URL, and adjust the size as needed.  You can even add a caption.

.

To insert an image in your post, the way I did here, click the button next to “upload/insert” in the “new post” box.  It is just above the text editor.  Choose the image from your media library or type in the URL (you DID already upload the image if necessary, right?), and away you go!  Now you can enjoy cute pictures like this:

Advertisements

17 thoughts on “Ask Ana: Inserting images (relax, this is not NSFW)

  1. Lillie says:

    Thanks Ana – you little computer whiz! It took me a minute to NSFW – I was thinking National Skydivers For Whalewatching….no No Snorkeling for White (collar Criminals) or something like that……thanks, sweetie 😀

    Like

    • Ana says:

      An acronym to mean Not Safe For Work. Though technically this post *is* NSFW because of the pictures. The tech help is most definitely NSFW, though. Welcome!

      Like

  2. Minelle says:

    Okay Ana where did my comment go???? I guess I will need to repeat it.
    This is how my brain translated your lesson….bdrhjckj jkhhjkni1h c cdhjnj 828827?
    Just Kidding! Thanks!

    Like

Thank you so much for joining the discussion! Please play nicely or you may be asked to stand in the corner. ;)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s