Wednesday, November 22, 2017

Properly Inserting The Featured Image Into Your Post

I thought I would do a quick post on how to insert an image into your WordPress post. I understand that this really belongs over at Blogging Extreme.com” and it will eventually be posted there. However, I’m not exactly sure how many of you take time to visit that site. So I’ll take the liberty of posting here and then moving it over to Blogging Extreme at a later time.

WordPress ……. I think, starting with 3.0 ( I may be in error on that as I don’t always upgrade with every release ) gives you the option of inserting the featured image directly into your post. Now, how cool is that? I was really jazzed about the ability of taking my image on the homepage and using it to insert into the post so that I no longer had to do the banners or write the code for that matter. While the banners look cool I get hit by Google for using large images …….. slows things down a bit much for Google I guess.

Surprise!

When I went to insert my first image right after I upgraded my Blog at the first of February, I was hit with disappointment. It looked like S$&T. All I needed was a little tweak here and there and I would be on my way. If I remember correctly, I worked on it for about 4 hours and never could get it to work right. I was pressed for time so I had to move on.

After Five Months

The other day I was working on a site build and came up with some code for styling that I decided to work with and the above image insertion is the result after I toyed with it for about an hour.

The Solution

First let’s take a look at how this looks when you have WordPress insert the image. Here is the link to a standard insertion.

Now part of the problem with the standard insertion is my choice of image size, which is 170 x 115. This is almost like a trademark size image for me and my Blogs. Most templates provide a size that is a little too square for me. I like more of a rectangular shape. Blog Hopping has shown me that most Bloggers use different sizes for their post images, so you might have to do some adjusting of the margins top setting to properly seat the image within the text, which as you will see in the code below is set to 8px.

Here is a copy of the standard code that WordPress automatically inserts:

Here is a copy of the standard code re-written:

All I did was add this line ( which took me forever it seems to define ):

Where I went wrong:

One of my problems was that I failed to add the two 0px's to my code at the end of my margin settings. Seeing as how the settings were zero I just failed to include them. This will work with a website, however I had to define these margin settings within my WordPress post to get the desired effect.

I wanted a border for my images and could never get it to work with standard padding definitions. Once I added the 1ex for my padding, the border looked really sharp.

A Final Word

When you go to use this code, the only part that you should have to monkey with if the first setting in the margin, which I have set to 8px in my example. If you set this from 2 to 20px you should be able to get any image to properly seat within your text. A last note; be careful of this margin setting, if you don't set it just right it will look very different in different browsers.

Comments

  1. Adrienne says:

    I don’t use the featured images for this very reason Jeffrey. They never turned out looking right so I just blew it off. I would spend hours but I’m nowhere near as techie as you are in order to figure it out. So I just said to hell with it and moved on.

    I do have a question for you about images. Not sure if you will know the answer but heck, I’m going to ask anyway. When I load images into my blog posts I just go to Images and upload it from my computer. Easy right! But when I post my link to my social media sites, the images won’t come up anymore. This started happening about a month or so ago before I even upgraded WordPress so nothing had changed, they just quit working. It really annoys me for some reason that I can’t get my images to show. Have any idea why this is? I know you are the master!

    Thanks Jeffrey, great information here. Now I know what to do should I decide to go back and start using the featured images now.

    Adrienne

    • Jeffrey says:

      Hi Adrienne,
      This may take a decade or two so hang with me here.

      I’m assuming that one of the problems lie with Facebook. I’m not sure if you are refering to the link to your post, and once that link is clicked the post comes up with no images or if you are providing the link directly to your images to your server.

      First remember that your images are held on your server, so your website or Blog will find them. If you venture outside of your server’s domain or your Blog and you call those images or that post, you will first have to provide the FULL URL .

      I’m going to go ahead and give you the standard media link to an image here at Bloggers Market.

      wp-content/uploads/2011/7/bm-170-033.jpg

      This will work just fine anywhere on your Blog. However, once you move off your Blog or your Server, you will have to add the TOTAL URL as seen below.

      http://bloggersmarket.com/wp-content/uploads/2011/7/bm-170-033.jpg

      Now if you call that image from your browser, you will see that .htaccess rules prevent you from obtaining the image from outside of my Blog.

      However if I wish no restriction on access to my images that I will place those images in my images file in my parent directory, as seen below.

      http://bloggersmarket.com/images/brandonbanner.gif

      Now if you call that image (just copy the code and paste into your browser URL) you will see a banner that I made for Brandon Connell this past Christmas.

      .htaccess rules do and will change without your interacting with them. I’m not sure of the dynamic, it might have to do with Apache rule changes or file permissions granted by your host or might even be related to your Mod Security Rules. I’ve seen seven kinds of hell if you are actively running “Tim Thumb” also. So it is always best to back-up your .htaccess file. Please note the dot before the word “htaccess” indicating that this is a hidden file, so you may have to tinker with your permissions in c-panel to get your hidden files to display themselves.

      I hope that provides you with some degree of useful information. If not please hit my contact button on the side of the Bloggers Market homepage and leave a detail E-Mail and then send me a tweet letting me know you have sent me mail.

      Get it ? Got it ? Good !!!

      • Adrienne says:

        What can I say, this is SO over my head. I do appreciate you taking the time to explain this to me though.

        I do put all images into a WordPress folder on my server. Like I did mention before, I never had a problem with this in the past. They came up with no problem and every time I grab someone else’s link and post it to my wall their photos come up just fine. Oh well, guess I’m just screwed.

        Thanks Jeffrey!

        • Jeffrey says:

          Ok try this:
          Remove the Hyper-text transfer protocol at the front of the image and corresponding tail.

          Example:
          Standard Insertion:

          http://www.adriennesmith.net/images/jeffreymorgan.jpg/

          Facebook Wall Insertion:

          adriennesmith.net/images/jeffreymorgan.jpg

          If this does not resolve the issue. And you have your RSS feed cached in “WP Super Cache“, then the only other resource you can try is this link here:

          http://developers.facebook.com/docs/opengraph/

          Or possibly jumping from the nearest bridge, which is what I felt like doing when I visited the above link. Look at it this way ….. it could be worse, it could be me that has this photo displaying issue.

          • Adrienne says:

            Okay, will give that a try. I think I can figure that one out and I do have that plug-in. Pray for me because I really don’t want to jump off hat bridge. At least not this week!

            Thanks Jeffrey!!! Appreciate your help.

  2. Nice post. But I am wondering why are you spending so much time and effort on just inserting images to your wordpress. After all, it should not be so time consuming exercise to deal with the images.

    • Jeffrey says:

      Hi Maninder,
      I could go on all night in answer to your question. You would really have to follow this Blog to gain an insight into what it is that I do here at Bloggers Market.

      As I stated in the post. This is something that should have been posted over at Blogging Extreme. As I do a lot of writing on things that I need on a daily basis, my own posts make a handy reference when I need it either working here or what tends to be the case, working on someone else’s website. I can’t possibly remember all of the thousands of code ideas that I come up with while building or working on someone else’s website or Blog. So I do a quick post for future reference. That way I kill two birds with one stone. I provide content for my Blog and am able to store ideas for my own future use.

      With this particular post. I was having trouble with inserting a quick image at the top of my post within this template. To me it just looked a little strange. As I make most of my personal income on website and Blog design. I need to have things looking good.

      I know, I know …… more information than you needed ……. sorry, but you did ask ……. :roll:

  3. Hi
    I run a event photography company and often make posts with lots of images. I am not really up on coding etc as fairly new to blogging, but use it for SEO purposes as well. My images from my blog feature well in google searches. Are there any benefits in following your coding for SEO?
    Event Photographer recently posted..Event photography

    • Jeffrey says:

      Hi Grantly, thanks for coming by today. I’m afraid whenever Google is involved the answers to SEO questions are never simple.

      Google not only rewards for content added to your Blog, but will reward you for removing old or irrelevant content from your Blog as well. Few know this little secret.

      When it comes to images, well ……… it’s just as confusing.

      First Google loves images. Don’t bother to restrict your images from use by others at it is more trouble than its worth. If it is that valuable to you; place those images inside a membership site. Let the major body of your work float around the web to increase your exposer Online.

      If your site does not load in 3.3745 quintillionth of a second, you’re on the shit list. Mine takes a couple of seconds. What is the bid deal? Well, when you have a bazillion websites to index like Google has to index you get just a little pissey when a site takes a second to load.

      So, you have to reach a happy medium here. First you have to make the image as small as possible and then enlarge them through a hover-box ( Please see this website I built for examples). Second you have to have a Blog or Website that is actually geared to what it is that you do.

      In other words Grantly, you ….. personally …… have to start over my friend. What you need to do is pay me $500.00 to re-build your site. You or rather “Event Photographer London” is in need of a good SEOed Portfolio Template.

      As far as the code goes ………. the cleaner the code the better Google likes it and the easier it is to get indexed in the images section of Google as well as the general index.

  4. Thanks Jeffrey
    I have heard about the page loading speed before. Let me take stock as I need to review what I am doing after this- thanks Grant
    Event Photographer recently posted..Event photography

  5. Would it be possible to speed up the images on my current blog? I have spent lots of time building the site and it would be a pity to lose all the work. Or could it all be transferred to another site?
    Corporate Photographer recently posted..Corporate headshots

    • Jeffrey says:

      Hi Grantly, glad to see you back!

      There are several coding ideas that I use to actually speed-up the loading of images. Remember that the cleaner the code the better. The code has to be easy for Goolge’s bots to crawl.

      The real power in speed comes with how the images are presented to the end-user. They have to be as small as possible when loaded and then given the ability to expand when the end-user wishes to view them. Now do not miss understand me here, please. Don’t start replacing your images on “Event Photographer London” with a bunch of small thumbnails like my red sports car above, that would be disastrous.

      See Grantly, that’s why I mentioned the Portfolio Template above. These guys who build these templates are top pros at what they do. I’ve looked at enough under-lying code to be floored at what I see from these guys.

      I understand the work that you have involved with the building of your site. I’m in that trench with you mate. However, it is time for you to take that next step ( if you can afford it ). Remember that you are a business Onlne and that business’s have expenses.

      If you purchase a premium portfolio theme you can transfer all of your work over to the new template from the old template. I’m thinking that the database would come over untouched (thank goodness).

      Once you’re there you need to take your time acclimating to your new home. So total time to do this work would probably take about a weeks work time. You always have those moments where you come to a location within your new theme and find issues. The purchasing of a premium theme will help with these issues as the designer will usually have pretty good support forums. This is Uber Critical!!!

      One last word of catuion; Grantly I don’t know you level of tech-skills, but if this is something that you have little knowledge of DON’T GET INVOLVED WITH IT YOURSELF. You will be mad at the both of us.

      Please just focus on finding a premium WordPress portfolio theme that you can easily see how your work would look, and let a pro do the move and construction of your site for you.

Speak Your Mind

*

CommentLuv badge