New Images Blog Added Into Our Website

Log into WordPress and click “Add New Post.” After writing your blog post, click where you want to place your image and then click the “Add Media” button above the Write block in WordPress. You’ll get a popup box with several options. You’ll click the “Upload Files” option and follow these steps.

New Images Blog Added Into Our Website Site
New Images Blog Added Into Our Website Domain

Break up the text. In the same way people use paragraphs to separate points and make it easier for. Add your own opinion to the snippet, so that the vast majority of content on your blog is original and not duplicated. Avoid using copyrighted or commercial imagery to represent you or your blog (in your header, about me image or logo). Apart from resizing images to fit your post, avoid altering them. Images are very important to every blog or website, finding free images for your blog post or for your website can be hard if you don't know about the free stock images website. We hand pick the 5 amazing sites with breathtaking free stock Photos websites. The 5 websites which listed below can help you to get HD images for your blog post.

A picture is worth more than 1,000 words when presented within a blog post (or page). On the web, an image could break up text, which can part the sea of text making it all more readable. An image can also help illustrate a point, and provide SEO value.

An image could find its way into image search results on a search engine. It can also, with the inclusion of keywords in its meta tags, potentially help a post rank for more keywords. Not only that, the image can be auto-thumbnailed in search results and show up when shared in Facebook or other social sites.

A search engine result with an image will attract the eye more so than one without, in most cases.

Adding Images to WP Posts the Old School Way

I’m from the old school. When I add an image I, more often than not, edit the image to be the exact dimensions that I want to work with. I use free tools like Gimp. You can use Photoshop too (if you have it).

I then, using good old fashioned FTP, upload the image to the trusty “images” folder off the root.

I then hand code the image tag in “Text” view of my WordPress post/page edit screens.

The code might look like this:

<img src='https://example.com/images/pic.jpg' alt='picture of a bat' width='187' height='94' border='0' />

Let’s break it down shall we:

src: this represents the path to the image. I always use the full domain here so the image shows proper in RSS feeds, etc. In only one case when working for someone else they asked that I use only /images/pic.jpg without the domain in case they link-spam the domain with their SEO and need to switch domains. Doing it this way would save them the extra work later. Doing things ethically would prevent this from being a concern, but I digress.

width/height: the dimensions to the image, I always make sure they are the “real” dimensions, not just ones to force the size of the image.

alt: this is meant to be a textual representation for the image for the visually impaired, bandwidth savers, text browser users, and search engines.

title: usually, depending on the web browser, this phrase will be shown when hovering over the image. It is supposed to provide SEO value too but I think it is overkill and overoptimization personally, so I usually leave it out.

border: out of habit I always include this, which is a value in pixels that determines the size of the border around the image. It used to be that, when linking an image, if you didn’t explicitly tell all browsers NOT to include a border, then it would add a bad looking blue border. So, I got in the habit of using it. I use CSS for borders when I really want them, so I guess I’m not that old school.

style: it’s probably not best practice to include styles in this manner. It’s a bad habit I picked up. It is preferred to include styles within CSS sheets, and make reference to the style with a class name (or ID). WP does this elegantly when using the automated tools for including images which I will cover shortly.

The particular style I used in the above example pushes the image to the right and wraps text around it to the left. I specified that I do not want a margin at the top or right side (represented by the first two numbers), but that I wanted 5px on the bottom and 10px on the left to create some white space around the image so that it doesn’t touch the text. Why different amounts? I haven’t measured but it seems that there is always 5px below the image with margin space for some reason, so I just add 5 more and it always looks pretty even.

Image Sources

You have to be careful when using images on your site or blog. If they are either copyrighted or assumed copyrighted it is best to either a) not use them or b) get permission. And always cite the source of the image.

You could get images from stock photo sites (example: ShutterShock) that grant you rights to use them. morgueFile is another source, which offers a free photo archive. Be sure to read the terms.

You can always get your own images. Either download them from your digital camera or phone, or get some screenshots. There’s a free Chrome browser plugin by Google that makes it easy to take screenshots. Screenshots, at least, will provide you with unique images that you can probably use in your WordPress sites. Just be careful and always cite your sources. Get permission from the respective owner when not sure. Always show respect.

Inserting Images Into WordPress Posts or Pages

Using the Add Media within the add/edit post/page screens will give you access to the Media Library.

It will also allow you to upload images that will get auto-resized based on the set thumbnail values for the particular theme that you are working with.

You can set an image as “Featured” or insert it right within the post. When setting as Featured, the theme will have full control over placement and size, and the HTML that gets generated.

When “inserting into a post” you have a little more control. You can certainly decide where the image is placed, and you could choose from some set “classes” to decide on text wrapping, etc.

Step 1) Click the Add Media button.

Step 2) Click the Select Files button.

Step 3) Locate the image on your computer, and click Open.

You can see the progress meter in the image slot itself, plus in the right side in the Attachment Details window.

You can click the Edit Image text link for basic cropping, and image flipping options. You can choose to have the changes applied to all of the thumbnails that were created during the upload process.

Step 4) Give the image a Title, and preferably a Caption, and Alt Text as well, for some potential SEO value. Some themes, but not many, will incorporate the Description value somehow.

Step 5) Pick an alignment (center, left, right) or leave it as None.

Step 6) By default, the thumbnail image that gets inserted will link to the biggest version of itself (the originally uploaded file). That can be changed to link to an attachment page (some argue that will give the best chance at getting the image into Image search results, if it’s worthy of being there). You can also have a link to a custom URL, or nowhere at all.

Step 7) Finally, choose one of the pre-built sizes. Most often there will be a small square, and a couple sizes that are within aspect ratio of the original, and also a Full Size option. Medium is usually the default.

When using screenshots for tutorials such as this, Full Size should be used so there is no distortion.

Step 8) Click the Insert into post button.

New Images Blog Added Into Our Website Site

You will be presented with code similar to the following:

The id’s and classes may be defined by the theme which will dictate how the image will ultimately look within the blog post (or page) on the site.

Some unique classes will be displayed specific to the image. They will include the image id number, 57 in the example above, which allows you to give the particular image a custom style that will not be used on other images.

Adding Featured Images Into WordPress Posts or Pages

When adding a featured image, no HTML code will actually show up in the posts/pages content area. The theme will “check for” a featured image when the post is being shown and display it according to the theme’s style.

Step 1) Near the bottom of the right sidebar of the post/page add/edit screens you will see the Featured Image box. Click the Set featured image text link.

New Images Blog Added Into Our Website Domain

Step 2) You will be presented with the Media Library by default where you can select an image and click the Set featured image button.

You can also click Upload Files near the top if the image isn’t already in the library.

You can then follow the Upload steps from above, minus the “Attachment Display Settings” instructions. Then click the Set featured image button.

Uploading Other Media Files to WP

You could upload other media files like videos and audio to be included within your posts, using the Media Library functions described above.

It is often recommended however, in many cases, to have the audio and video hosted elsewhere and just embedded into your site. WordPress plugins like WP video lightbox can help you with that.

This saves on bandwidth and storage space, plus also allows you to take advantage of the in-built traffic, and the search engine love, that these media sharing sites have to offer.

YouTube and Vimeo are the top choices for video. And SoundCloud is the rising star for audio. As for images, some people will do a similar thing and upload to Flickr or Pinterest for example, then embed the content into their site.

I sometimes do that for general interest type of images (food for example), that have value on their own. Screenshots, in most cases, somehow don’t qualify.

About the Author: This post was written by Keith Lock who is an author of Tips and Tricks HQ.

This is the forth and final post in this bloggers guide to copyright series. We’ve covered what Copyright, Creative Commons, Fair Use and Copyright Infringement mean, talked about tips for protecting content, writing copyright notices, stating terms of use and how to contact someone who used your content without permission. Today I’ll be talking about how to protect you and your blog from being accused of copyright infringement and how to legally find images and use content without violating copyright law.

DISCLAIMER

I am not a lawyer, this post is based on personal experience and learnings. If you have questions about plagiarism, copyright laws, etc., be sure to consult a qualified legal professional.

Why it’s important?

Have you ever…
– Copied and pasted a full post from someones blog onto your blog without permission?
– Used someones photo/images without permission?
– Uploaded something to your site to sell or give away which was downloaded from elsewhere?
– Translated someones content on your blog without their permission?
– Copied someones code/design/template?

Even if you credit or link back to the author/creator it is not allowed without initial permission and you are violating copyright law. You can only use copyrighted material if you have explicit permission from the author to do so or if it is under Fair Use (for the purpose of commentary, criticism, reporting, etc). If your initial thought is that they will never know let me just tell you that it’s not difficult to find where your content has been duplicated. I have found my content on other sites numerous times without even looking for it. If you remove the copyrighted material that doesn’t actually remove the copyright infringement, they can still take legal action.

Republishing content from somewhere else regularly can result in your blog being marked for duplicate content and spam. This negatively affects your site and it’s search engine rankings. If your blog has too many marks against it could be penalised or removed from search engines results such as Google.

Avoid Copyright Infringement

If you want to use images or content that are not your original works, here are some guidelines to help avoid violating copyright.

Use works that are in the public domain, are royalty-free or have a Creative Commons license. Check the terms of use to see how you can use these.
Ask the content creator’s permission before using any of their work and check their terms of use policy. Credit the original source and provide a link to the post/page that it appears on.
If using images and you don’t know the original source, here’s a tutorial for finding it – how to find the source of any image online
Crediting the original owner and providing a link back to the source post/page is often enough to satisfy them (as they may get some traffic from you) as long as you don’t copy their content word for word or copy full posts multiple times.
Typically you can publish a quote or excerpt (small portion) using quotation marks to indicate that it’s from somewhere else with a link to the source. Add your own opinion to the snippet, so that the vast majority of content on your blog is original and not duplicated.
Avoid using copyrighted or commercial imagery to represent you or your blog (in your header, about me image or logo).
Apart from resizing images to fit your post, avoid altering them.
Be careful with making money from your blog if you do use work that you do not own copyright for.

Where to find images for your blog

There are a number of places to find images for your blog, some have different licenses so make sure to read the terms to find out how exactly you can use them.

Flickr Creative Commons
Death to the Stock Photo
Unsplash
Creative Commons Search
Public Domain Archive
Little Visuals

You can also use Google to search for certain licenses by clicking search tools > usage rights.

I have been putting together a list for bloggers with a number of different helpful tools and resources so will have more places to find images on that soon.