Community Forums › Forums › Archived Forums › Design Tips and Tricks › Using Column Class and can't get my image to appear
Tagged: column classes, html
- This topic has 7 replies, 2 voices, and was last updated 9 years, 4 months ago by
Poor Potsherd.
-
AuthorPosts
-
September 29, 2015 at 3:03 pm #166971
Poor Potsherd
MemberI am using Whitespace Pro. I am making my first ever customizations to a website. I wanted to add a two-column widget to my Social Footer and have managed to get the two columns to work if I put text in the code (got the code from the Code Snippets for column classes). But when I put in an image, the image never appears. I can't figure out what I am doing wrong or if I have a typo I just am not seeing. Here is the website: poorpotsherd.com. Here is the code:
<div class="one-half first"><h3>What is a Poor Potsherd?</h3><p ">A potsherd, of course, is a piece of broken pottery and is used as a simile in the Bible a couple of times, notably in Psalm 22:15</p><p><i>My strength is dried up like a potsherd.</i></p><p> It is also a metaphor for human beings: We are created by the great Potter.</p></div>
<div class="one-half">
<img src="http://www.poorpotsherd.com/wp-content/uploads/2015/06/PoorPotsherdPacific1.png" alt="Link to Hopkins poem" style="width:240px;height= 338px"></div>Any ideas about where I should look for my error?
http://www.poorpotsherd.com/September 29, 2015 at 6:39 pm #166999Tom
ParticipantIt's in your HTML. See the boxed items in this screenshot below:
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]September 30, 2015 at 7:47 am #167042Poor Potsherd
MemberThanks for your reply, Tom. I see the error in the first box. But I have a question about the last two boxes: The code in the last box does not appear in the widget text box where I am editing the code. And also in the widget text box, the forward slashes appear in the URL for the image--if that is the issue you were noting in the second boxed error. Where would I correct the HTML for this if not in that widget text box? (And on a related note, why don't those items appear in the widget text box?)
September 30, 2015 at 10:55 am #167057Tom
ParticipantWhat happens after you correct the first error?
Please repost your HTML from the text widget - remember to format the code for the forum: paste it, select it, press the "code" button in the forum post editor to wrap it in backticks. Without this, code/quotemark is corrupted in the forum.
Try with this:
<div class="one-half first"> <h3>What is a Poor Potsherd?</h3> <p>A potsherd, of course, is a piece of broken pottery and is used as a simile in the Bible a couple of times, notably in Psalm 22:15</p> <p><i>My strength is dried up like a potsherd.</i></p> <p> It is also a metaphor for human beings: We are created by the great Potter.</p> </div> <div class="one-half"> <img src="http://www.poorpotsherd.com/wp-content/uploads/2015/06/PoorPotsherdPacific1.png" alt="Link to Hopkins poem" style="width:240px;height= 338px"> </div>
Also: You probably want to reconsider your design for this footer area: you're trying to squeeze an image that is 870x1167px and a whopping 1.72MB into one-half of a one-third footer. No one will be able to read the text on the image. Plus there is no hyperlink to the image or other text, even though this is described in the image alt text as "Link to Hopkins poem".
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]September 30, 2015 at 11:11 am #167059Poor Potsherd
MemberTom, Thanks for all of that. I appreciate the heads up about posting code here in the forum. (I will be one of those who learns by doing all the wrong things first.) And I am taking to heart your admonition about using that picture in the first place. I will go back to the drawing board (literally) on that (or rethink the whole idea) and then use your code to see if that works better. I did know the link was missing as I had removed it trying to simplify the code as I was trying to get it to work. I can Google this last question if you don't want to answer, but what do you use to manipulate your pictures (to size and to see the sizes)? I don't feel I am using the right tools as I thought that picture had been sized smaller already. And when do I close this as resolved? I think I will probably not pursue what I have been trying to do anymore.
September 30, 2015 at 11:25 am #167061Poor Potsherd
MemberTom, just one more thing. The reason I thought the image would work was because it looked ok here on my site. ( If you want to see, I just added back a widget above the columns where I was working that has the image in it. ) This widget ended up in my footer here when I changed to the Whitespace Pro theme from my previous WordPress theme. And I just took the info from that widget to try to move the image into the columns. I removed the widget when I started working on the columns. I thought the image was the size I indicated in the code. But apparently not. Or maybe the area I am moving it into is not the size I thought.
September 30, 2015 at 2:41 pm #167078Tom
Participantbut what do you use to manipulate your pictures (to size and to see the sizes)?
Mac: usually Photoscape X or Graphic Converter 9; ImageOptim to compress
PC: Faststone Image ViewerYou should be able to see the image file size in Explorer/Finder. In Chrome I use "Image Properties Context Menu" extension and the Element Inspector to poke around.
when do I close this as resolved?
Whenever you feel that you problem is resolved or your question answered.
it looked ok
That widget area appears to be larger than half a one-third footer, so the image will appear larger. It also doesn't have to compete with the text added when in the footer. It's not a 'bad' thing to do, your design is yours; the image will present at the size you code, but the original 1.72MB image loads every time.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]September 30, 2015 at 2:54 pm #167080Poor Potsherd
MemberTom, Good stuff to know and I really appreciate your taking the time to spell some of that out for me.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.