Editing an image in Wordpress

by CatherineMay

Posted: 14 years ago 18 replies

WEB DESIGN

Hi,

Maybe I can get some help here. I'm trying for the first time to use Wordpress, and am doing okay, although it's definitely a steep learning curve for me.

I have a clickable image uploaded from Amazon that is driving me crazy because I can't get it to move to the top of the page. (I'll say right here that I do NOT have experience with Photoshop or anything like that, so this is really all very new to me.) I got the image aligned to the right, which is what I wanted, but I want it all the way to the top of the page. It was at the bottom, and by clicking on the lines that show up (you know, the box...don't know what else to call it), I was able to move it part ways up, which moved the text over to the left, which is also what I wanted.

But I can't get it to go all the way up. Plus, there's still a line of text above it.

I changed themes, but this didn't make any difference.

Is this an issue with the WP editing, or with the image itself?

I sure hope somebody can give me some help this morning!

Catherine

#editing #image #wordpress

SudoDevelopment 14 years ago

It will most likely be the layout of blog. Can you provide a link to your blog so i can see were you are trying to put the image.
- Thanks
- 1 reply
{{ DiscussionBoard.errors[2075365].message }}
- CatherineMay 14 years ago
  
  My blog - in its earliest stages - is:
  
  Black Pearl Pendant
  
  I see now that the image is still down at the bottom.
  
  Catherine
  
  Thanks
  
  Signature
  
  {{ DiscussionBoard.errors[2075379].message }}
SudoDevelopment 14 years ago

Ok, so you want it situated at the top right corner just above navigation links and just below the "Black Pearl Pendant" logo?

If that is the way you want it, you will have to do some editing to the blog's code which I guess you will not know how to do? I am sorry if offended you.

Ryan.
- Thanks
- 1 reply
{{ DiscussionBoard.errors[2075408].message }}
- CatherineMay 14 years ago
  
  Yes, I want it straight up so the the top of the image will be level with the top line of text that ends "a woman can own."
  
  So, you're saying that I need to go the template of the page and do some editing there?
  
  Catherine
  
  Thanks
  
  1 reply
  
  Signature
  
  {{ DiscussionBoard.errors[2075420].message }}
  
  erbuc 14 years ago
  
  Hi Catherine.
  
  Go into the post to edit it from wp-admin. Once the post is open, click on the HTML tab in the upper right hand corner of the editor. You will see the text of your post still but this will also have some HTML code.
  
  Scroll down in your post to the tag that starts with
  
  Code:
  
  <a href="http://www.amazon.
  
  and ends with
  
  Code:
  
  ... height="377" /></a>
  
  Highlight and copy everything between that tag including the brackets and move it. You will want to move it to the very beginning of the post that starts "A black pearl ..." like so:
  
  Code:
  
  <p><a href="http://www.amazon.com/gp/product/B000MFDWVM?ie=UTF8&tag=paniattaandot-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000MFDWVM"><img class="alignright" style="border: 0pt none;" src="http://ecx.images-amazon.com/images/I/212UFbKVOOL._SL500_AA300_.jpg" border="0" alt="" width="323" height="377" /></a>A black pearl...
  
  Make sure you delete the old copy of the tag, save it and then click Preview Post to see how that affects the positioning of the image.
  
  E.
  
  Thanks
  
  {{ DiscussionBoard.errors[2075470].message }}
SudoDevelopment 14 years ago

At first thoughts I thought you may have had to edit the Blog's code but since you said you wanted positioned to the right of the text you could do it using the editor that WordPress Provides.

First you have to select the image and align it right (which it already is) and then go into HTML mode of the post (at the top-right of the box).

In HTML mode select the text that starts with this "<a href="http" and ends with this "width="300" height="85" /></a>" (your text may differ to mine). Once you have select the text, cut it and paste it on the top line of the post.

That should fix it. Let me know how you get on.

Ryan.
- Thanks
- 1 reply
{{ DiscussionBoard.errors[2075447].message }}
- CatherineMay 14 years ago
  
  Okay, I tried that and it didn't work. Essentially what I did was I copied that code and pasted at the beginning of the post, then deleted it where it were it was originally.
  
  Is this what you meant?
  
  Thanks
  
  Signature
  
  {{ DiscussionBoard.errors[2075469].message }}
SudoDevelopment 14 years ago

That should have worked Catherine, I was testing it on my own WordPress blog and the post above is basically telling you to do what I just said. I did see the change on your website, although it move it up it did not move it to the top
- Thanks
{{ DiscussionBoard.errors[2075476].message }}
SudoDevelopment 14 years ago

If you would like me to log into your blog control panel and see if I can get it to work I would gladly do so. If your unsure about giving me access I understand if you don't. Please send me an email via my website in my sig if you have any questions.

Ryan.
- Thanks
- 2 replies
{{ DiscussionBoard.errors[2075497].message }}
- erbuc 14 years ago
  
  I see that you are playing around with it. You need to move it up one more paragraph. I would also suggest that you use the following values for the size of the image.
  
  Code:
  
  width="200" height="234"
  
  Let me know how you get on.
  
  E.
  
  Thanks
  
  {{ DiscussionBoard.errors[2075523].message }}
- CatherineMay 14 years ago
  
  I have followed the above directions (thanks so much!) and still wish the image were higher. But the text looks a lot better, so overall the page is more like I want it.
  
  But it still too much white space.
  
  Any other suggestions?
  
  Catherine
  
  Thanks
  
  1 reply
  
  Signature
  
  {{ DiscussionBoard.errors[2075570].message }}
  
  erbuc 14 years ago
  
  I have trimmed a lot of the white space out of the image and posted it on my site here:
  
  http://www.siamcomm.com/images/black_pearl_pendant.jpg
  
  Open that link and right-click on the image and select "Save image as..." to save it to your computer. The upload it to you file server. If you do not know how to do that, you are welcome to just change the code in your page.
  
  Change the location to the link above.
  
  If you have trouble let me know.
  
  Cheers,
  E.
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[2075595].message }}
  
  CatherineMay 14 years ago
  
  I still would like this image to be higher. Is there anything else I can do?
  
  I did change the size. Erbuc, thanks for creating another image for me, but this image is connected to my Amazon ID, and I'm afraid of loosing that. Would that happen if I use your image? And, anyway, I would love to know exactly how to get rid of white space, because I'm sure this issue will arise again. This is my first WP site, but I don't plan on it being my last. This is the one I'm cutting my teeth on, so I need to learn as much as possible.
  
  Although I appreciate the offers to do this for me, I'm really determined to learn how all of this works, even if I pull out all my hair in the process!
  
  Catherine
  
  Thanks
  
  Signature
  
  {{ DiscussionBoard.errors[2075665].message }}
SudoDevelopment 14 years ago

Just checked the site and it looks like you have it cracked. Well Done.
- Thanks
- 1 reply
{{ DiscussionBoard.errors[2075536].message }}
- erbuc 14 years ago
  
  You're getting there. The problem with that image is that it has a lot of white space in it. I can crop it down for you if you want and send it to you.
  
  Let me know.
  
  E.
  
  Thanks
  
  {{ DiscussionBoard.errors[2075545].message }}
SudoDevelopment 14 years ago

The whitespace is part of the image and you can crop the image using almost any image editing software such as Photoshop, even with Paint. There are many tutorials online that can be found using Google.

To use the new image provided, re-upload it to amazon and get the link from them again and then paste the code where the previous one was.
- Thanks
- 1 reply
{{ DiscussionBoard.errors[2075694].message }}
- erbuc 14 years ago
  
  I am not sure about the Amazon ID issue. But you are welcome to use the image I cropped.
  
  SudoDev is correct. The white space is part of the image. So the only way to get rid of the white space is to edit the image so it fits your design. This is what I did. I used Photoshop and cropped the white space down a bit.
  
  Copy the link to a text file for your existing link to the Amazon image. The paste in my link. If you don't like it, paste you Amazon link back in.
  
  I can give you the code if you want.
  
  E.
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[2075715].message }}
  
  CatherineMay 14 years ago
  
  Okay, guys, other responsibilities are now calling me away from the computer, (I have a seventeen year old daughter, it's the weekend, etc.) and I won't be back online for several hours.
  
  Thanks so much for all your help. I'll have to continue this later.
  
  Catherine
  
  Thanks
  
  Signature
  
  {{ DiscussionBoard.errors[2075756].message }}

Editing an image in Wordpress

Trending Topics

A healthy fascination for Hollywood...

How did you turn it all around?

Any thoughts on golf's latest phenom...Scottie Scheffler??

best high quality crypto traffic.

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?