Wednesday, September 24, 2014

Hard Coding Your Blog

Shuttle Launch Warning

I started out a couple of weeks ago to do a quick lesson on coding and that post has taken on a life of its own. I’m kinda crossing over here in what I want to do as a Blogger …… which is to run Blogging Extreme.com while managing Bloggers Market. After all you can’t really “Learn How To Make Money Blogging” until you understand, well ……… how to Blog, call it a catch 22.

This week I’m going to share with you a little of what will be forthcoming in my new E-Book, “The Bloggers Market Guide To HTML For Bloggers”.

In this post I’m going to focus on the Bloggers post. When I started out I thought that providing images for my Blog would be a pretty good way to provide my readers with a little extra something. What I have come to find out is that the images that I post here at Bloggers Market get indexed within Google …… sometimes at the very top. Pretty cool ……. I can use all the help I can get.

As you no doubt have learned by now I actually provide an image for the homepage and an image for the inside of the post every time I post. For the first I just provide the path to the template and upload. For the image in the post I actually hard code that image into the post. As you have probably learned by now you can use the “Set featured image” in WordPress that will basically set the image you use on your homepage within your post. This option called “Insert into post” is not a very good one. The image is restricted in size …. somewhat, and the image will not nest properly within the post if inserted at the top. Best idea, hard code the thing. Here’s how, first don’t try to size an image for the inside of your post with your coding. Go ahead and put your image through your photo editor and size it there and then upload it to a folder titled “images” within your home directory. Why WordPress buries the images on the dark side of the moon I have no idea. What’s worse they want to sequence the folders by number instead of name.

When you size your images don’t try to squeeze the dimensions. Just get the width right and the height will take care of itself. My template size is 588px for my width. I like a full size image for my post. Below is the code I use: ( you can left click inside the box and copy the code if you so desire)

If you post three times a week you will have this down to memory in about three weeks as second nature. It is really pretty basic. The image attribute, the path to your image, the alt attribute and the title attribute if you need it. I forego the title attribute most of the time unless the image needs some explanation for the interest of the reader. The title attribute will display the text “Kitten Being A Kitten” when you mouse over the image with the code I have used above. Don’t forego the alt attribute as this will cause the code to fail validation. What that means is that Google will frown upon you. And don’t leave the alt attribute blank either as the code below displays. While the code will validate if you do this, it shows really poor form ( something we will get into next week) The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Most of you that read this will be totally dismayed with what you see here. I understand that. Some of the Newbies will find it useful but for the most part, most will wonder why I display code that a 5-year-old would know. That’s just the point! Simple code design!!! By the time we finish I’ll spin your head right off your shoulders. You will see some really complex HTML designs that I will re-write here that will leave you with a feeling of “how cool is that” when you see the finished code. For example: the code box that you see displayed twice above started out in three languages and 30 lines of code. I have re-written it in one language, (XHTML) and with just one line of code. It took about 5 hours to do it. But I got it down to nothing but the running gear. I’ve seen plenty of code boxes out there, but nothing like what I have. Looks pretty cool huh ? I’ll show you how ……… soon. By the time we finish you may not be a “Pro Blogger” but I can guarantee you will be a “Power Blogger. See you next week.

( EDITORS NOTE: Since writing this post I have completed an HTML solution for inserting your images with the “Media Library”. You can read a clear explanation on the issue by following the provided link above. Below you will see an example of the finished code as well as a small piece that I use to finish the styling.

CODE AS INSERTED BY WORDPRESS:

CODE USED TO FINISH THE STYLING:

COMPLETED CODE FOR THE PROPER INSERTION OF YOUR IMAGES:

Code Example for Angela:

Dog Fleas Life Cycle

Comments

  1. This is really interesting to note that the codes written in XHTML can help us modify the images in our articles because we all know that images talk more than the literature of the articles, and this one line code of XHTML which is a modified form of 30 lines code of HTML, if really helps in making the images of our post perfect in size and more appealing then what would be better than this for our posts having images provided for better understanding of our readers…
    Angela@dog fleas recently posted..Treatment For Dog Fleas

    • Jeffrey says:

      Hi Angela, Thanks for coming by today!
      The 30 lines of code referenced above were for the code-box that the code sits in not the image. Did I catch you skimming the post? I’m always afraid that I will get caught by my good friends skimming their posts when I am short on time. :lol: Anywho ….

      The following code is for your flea cycle image on the homepage of your Blog, while it may be perfect in every way, it’s just not really practical for you to remember and apply for everyday use. Looking at that mess makes my hair hurt!

      <div id="attachment_25" class="wp-caption alignright" style="width: 170px">
      <a href="http://www.dogfleas101.com/wp-content/uploads/2011/03/dogfleaslifecycle.jpg"
      rel="nofollow"><img class="size-full wp-image-25" title="Dog fleas life cycle" 
      src="http://www.dogfleas101.com/wp-content/uploads/2011/03/dogfleaslifecycle.jpg" 
      alt="Dog fleas life cycle" width="160" height="168" /></a>
      <p class="wp-caption-text">Dog fleas life cycle</p></div>

      Here is my version of the code that is much easier to work with and yes it will validate and Google will love you. The actual image appears in the post above, at the end of the post.

      <img src="http://www.dogfleas101.com/images/2011/fleacycle.jpg"
       alt="Dog Fleas Life Cycle" align=right />

      As you can see the code is much easier to work with. Note that the word “right” at the end of the code is not in quotes! For me that is the hardest part of the line of code to remember. I always want to put everything in quotes.

      Also remember that you would have to re-size the image to 160×168 before uploading it to your “images” folder on your server.

Speak Your Mind

*

CommentLuv badge