How to Automatically Link Featured Images to Posts in WordPress

Recently one of our readers asked if it was possible to automatically link featured images to blog posts in WordPress. Most WordPress themes link featured images to posts by default, but some themes may not do that. In this article, we will show you how to automatically link featured images to posts in WordPress.

Why Link Featured Images to Posts in WordPress?

Images are more engaging than text. Using featured images can boost user engagement on your site.

Usually, featured images are large and take more space than text. They are more colorful, hence more noticeable. They are also easier to click on smaller devices like mobile phones and tablets.

However, if your post thumbnails aren’t clickable, then it makes it harder for users to view your post.

Most WordPress themes link featured images to the posts by default. Some themes may not use that approach, which makes it difficult for you to properly utilize featured images.

Having said that, let’s see how you can automatically link featured images to posts in WordPress.

Automatically Link Featured Images to Posts in WordPress

This method required you to add code into your WordPress files. See our beginner’s guide on pasting snippets from web into WordPress.

Simply add this code to your theme’s functions.php file or a site-specific plugin.

function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );

This code simply adds a link around the code generated to display featured images or post thumbnails on your website.

This code will also add a link around featured images on single post pages. If you don’t want to link featured images on single post to the same post, then use this code.

function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {

If (! is_singular()) { 
	
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;

} else { 

return $html;

}

}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );

We hope this article helped you learn how to automatically link featured images to posts in WordPress. You may also want to see our list of 14 best featured image plugins and tutorials for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Automatically Link Featured Images to Posts in WordPress appeared first on WPBeginner.

How to Automatically Add Watermark to Images in WordPress

Do you want to add watermark to your images in WordPress? Many photographers and artists use watermark to prevent misuse of their images. In this article, we will show you how to automatically add watermark to images in WordPress.

Method 1: Adding Watermark to Images in WordPress Using Envira Gallery

Envira Gallery is the best WordPress gallery plugin in the market. It allows you to create beautiful and mobile friendly image galleries into your WordPress site.

Envira comes with a watermarking addon that makes it easy to add watermark to your WordPress images.

WPBeginner readers can use the Envira Gallery coupon code: WPB25 to get 25% Off on their purchase.

First thing you need to do is install and activate the Envira Gallery plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Envira Gallery » Settings page to enter your license key.

You can get this key from your account dashboard on Envira Gallery website.

After verifying your license key, you can head over to Envira Gallery » Addons page. Scroll down or search to locate the Watermarking Addon, and then install and activate it.

You are now ready to add your images into responsive galleries with watermark. Simply go to Envira Gallery » Add New to create your first image gallery.

Scroll down on the page and you will notice the watermarking tab. Clicking on it will show you settings for watermarking.

You need to click on the checkbox next to ‘Enabled’ to see more options.

After that click on ‘Choose Watermark’ button and upload an image that you want to use as watermark. You can also change position and margin of the watermark image.

After adding a watermark image, you can now move on to adding images into this gallery. Scroll up, and then click on ‘Select files from computer’ or ‘Select files from other sources’ button.

For detailed instructions, see our guide on how to easily create responsive WordPress image galleries with Envira.

After adding a few images to your gallery, you can publish it.

Now you can add this image gallery into any WordPress post or page. Simply edit a post or page and then click on the ‘Add Gallery’ button.

Clicking on the button will bring up a popup where you need to select the image gallery you just created and then click on the insert button.

You will notice the Envira Gallery shortcode appear in the post editor. You can now save or publish your post/page.

Go ahead and visit your website to see the watermarked image gallery in action.

Method 2: Adding Watermark to Images in WordPress Using Easy Watermark

First thing you need to do is install and activate the Easy Watermark plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to go to Settings » Easy Watermark page to configure plugin settings.

The settings page is divided into three tabs. The first option on the General settings tab is to automatically add watermark to all image uploads. You can also choose which image file types to auto watermark.

Next option is backup, you should check this if you want to save original uploads on your server too. You can also select which image sizes to add watermark to.

You also need to select watermark type. The plugin allows you to add text, image, or both to be used as watermark.

Review rest of the options on the page, and then click on save changes button to store your settings.

Now you can click on the Image tab on the plugin’s settings page. This is where you can upload the image you want to be used as watermark.

If you selected image+text or just the text as your watermark type, then you need to click on the text tab.

Here you can add the text you want to be displayed as watermark. You can select font, font size, watermark alignment, transparency, and color.

Don’t forget to click on the save changes button to store your settings.

You can now add watermark to images you add to your WordPress site.

Adding Watermark to Your Old Images in WordPress

To add watermark on the old images, you need to go to Media » Easy Watermark click on start button under Bulk Watermark section.

Important: Please note that this process is irreversible. We strongly urge you to backup your WordPress site particularly your media uploads directory.

If you selected the option to keep a backup of your original uploads, then you can also use the restore option on this page, which will remove watermark from all images that have them.

Adding Watermark to Images Manually

In case you don’t want to automatically add watermark to all uploaded images, Easy Watermark gives you the manual option as well.

First thing you need to do is to go to Settings » Easy Watermark and make sure that the checkbox next to Automatically add watermark to images is unchecked.

After that you can go to Media » Library. You will need to switch to the list view to see the Add Watermark option next to each image in the library.

We hope this article helped you add you add watermark to images in WordPress. If you come across any issues, don’t forget to check our guide on common WordPress image issues and how to fix them.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Automatically Add Watermark to Images in WordPress appeared first on WPBeginner.

How to Fix Upside Down or Flipped Images in WordPress

Recently, one of our readers asked if it’s possible to fix flipped images issue in WordPress. Apparently sometimes when you upload images from iPhone or other iOS devices, your images may appear flipped or turned upside down. In this article, we will show you how to fix upside down or flipped images in WordPress.

Why WordPress Shows Upside Down or Flipped Images

Some mobile operating systems, most notably iOS, do not transfer EXIF metadata required by other software to determine an image’s orientation.

It is also possible that this EXIF metadata may not transfer properly. It could also get stripped down by some other software on your device or your WordPress site.

Fixing this issue may require you to use some image editing program to flip the images. You can also do that inside WordPress. See our guide on how to how to rotate, scale, and flip images in WordPress.

However, this would become a chore if you regularly upload images from your phone. Let’s take a look at how to easily fix these flipped and upside down images problem in WordPress.

How to Fix Flipped or Upside Down Images Issue in WordPress?

First thing you need to do is install and activate the Image Rotation Fixer plugin. For more details, see our step by step guide on how to install a WordPress plugin.

The plugin works out of the box, and there are no settings for you to configure.

Upon activation, the plugin hooks itself up to WordPress media upload function. As soon as you upload a new image, it automatically fixes the Exif metadata to properly rotate the image.

If the first plugin doesn’t work for you, then this probably means that your web host does not have the PHP EXIF extension enabled. Don’t worry we have another plugin that would do the job for you.

You will need to install and activate the iOS Images Fixer plugin.

This plugin uses ImageMagik and GD extensions to fix the EXIF metadata for images.

Upon activation, you just need to visit Media » iOS Images Fixer page. The plugin will automatically attempt to find and fix the flipped images. If it doesn’t, then you need to click on ‘Fix All iOS-broken’ button to start fixing upside down images.

That’s all, we hope this article helped you lean how to fix upside down or flipped images in WordPress. You may also want to see our list of how to fix the most common image issues in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Fix Upside Down or Flipped Images in WordPress appeared first on WPBeginner.

How to Optimize Your Website Images

alt="How to Optimize Your Website Images" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/jpeg-mini-500x352_c.jpg" />

If you take a look on the Internet, it becomes quite clear that most pages contain attractive images. They can be illustrations, graphics, icons, or photographs. Focus on your images when you want to optimize your website’s content or the sites you are creating for customers. With a few simple adjustments, those pictures can boost your ranking and increase web traffic.

Exporting images using favourite graphics software is something many of us do regularly.

We fixate on the image’s preview, cautiously adjust the quality, and optimize the settings. We tweak until the file size and quality are as perfect as they can get. A lot of people use the “Save for Web” feature to export images. This specific tool can help users to produce excellent GIF, JPEG, or PNG format images. After being careful and meticulous throughout the entire process, you would think that every picture will be perfect. Unfortunately, that is not always the case.

We all know how frustrating it is when you have to wait for a website to show up after clicking on the URL. Why does it often take longer than it should? Browsers need to download a lot of data. It keeps users waiting. title="Improve site speeds" href="http://www.webhostingsecretrevealed.net/blog/seo/speed-up-your-website/">The longer it takes, the more frustrated they get. Eventually, they click away. You can prevent this by using a number of popular tools created specifically to optimize images to the fullest.

With such an abundance of choices, which graphics editing software should you use for your image optimization projects?

Image Optimization Solutions

Many of today’s image optimization tools can be used by professional web designers as well as Internet fans trying to enhance their personal site. Install at least one popular optimization tool, because one is better than none at all. The goal of using technology is to speed up the website, and keep visitors satisfied. Research your options, as quite often, some image quality is lost when shrinking the size and download time of GIF, JPEG, or PNG picture files. If the loss of quality is too noticeable and unacceptable to your work standards, move on to another tool. Collect recommendations from other designers.

Image Optimization Tools Recommendations

Always aim for the biggest gain, which can be achieved by selecting the right tools. Each image optimizer has its own set of techniques to deliver impressive illustrations. Combine several applications for the most amazing results. Check out the following tools:

ImageOptim

style="text-align: center;">class="aligncenter size-full wp-image-8284 border" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/image-optim.jpg" alt="image optim" width="750" height="491" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/image-optim.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/image-optim-300x196.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" />

Use ImageOptim when you want to load images faster and take up less disk space. This tool works by finding the best combination of compression parameters. You will not have to worry about colour profiles and unnecessary comments when publishing your enhanced images on the web. ImageOptim is also ideal for making iPhone/iPad and Mac applications smaller.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text-alt" style="color:inherit !important;">
Learn more, visit online: href="http://imageoptim.com/" target="_blank">http://imageoptim.com/

ImageAlpha

style="text-align: center;">class="aligncenter size-full wp-image-8281 border" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/image-alpha.jpg" alt="image alpha" width="750" height="400" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/image-alpha.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/image-alpha-300x160.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" />

Drag a true-colour PNG image into the main screen of the image minifier. Small images should be converted immediately. If an image is too large, the progress spinner should be visible for a few seconds, and complete the shrinking process. If the quality is not satisfactory, select between Median Cut and Posterizer compression, and try the Dithered mode. Reduce the number of colours if you still want the photo to be smaller. ImageAlpha stands apart because of its unique conversion method of PNG24 to PNG8. The savings are many times bigger than when utilizing other popular PNG optimizers, like TinyPNG and Smush.it. Another benefit of this tool is that the conversion continues to maintain alpha-transparency in all browsers.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text-alt" style="color:inherit !important;">
 Learn more, visit online: href="http://pngmini.com/" target="_blank">http://pngmini.com/

Advpng or AdvanceCOMP

Advpng has an excellent speed/compression ratio. The main purpose of this tool is to recompress png files to the smallest size possible. The strategies this utility uses include removing ancillary chunks, concentrating IDAT chunks, and using 7zip Deflate implementation. AdvanceCOMP is a collection of recompression utilities for .PNG snapshots, .ZIP archives, .GZ files, and. MNG video clips. It allows users to modify an already-compressed file, in order to reduce the file-size by optimizing the condensed image, in addition to recompressing snapshots, rom, and clip collections of emulated games.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text-alt" style="color:inherit !important;">
Learn more, visit online: href="http://advancemame.sourceforge.net/doc-advpng.html" target="_blank">http://advancemame.sourceforge.net/doc-advpng.html

JPEGmini

style="text-align: center;">class="aligncenter size-full wp-image-8282 border" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/jpeg-mini.jpg" alt="jpeg mini" width="750" height="528" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/jpeg-mini.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/01/jpeg-mini-300x211.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" />

JPEGmini photo optimization technology can reduce the file size of JPEG photos by up to 5 times, all while preserving the perceptual quality and resolution of the original images. The savings are remarkable as this image recompression technology allows you to maximize the storage of photographs on your computer’s hard drive and on online photo service accounts. It is also easier to email images and upload them faster to the Internet. The fact that JPEGmini files are in standard JPEG format is another great advantage. Images can be viewed and edited by any existing browser and photo software.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text-alt" style="color:inherit !important;">
 Learn more, visit online: href="http://www.jpegmini.com/" target="_blank">http://www.jpegmini.com/

PNG Quant

Are you looking for a new command-line utility tool with an image quantization library for converting quantize and dither 24/32-bit RGBA PNGs down to 8-bit RGBA-palette PNGs (or smaller)? PNGquant conversion can reduce file sizes up to 70 percent, all while preserving full alpha transparency. The adjusted images are still compatible with all of today’s key web browsers. Another advantage of this tool is that the pictures have a better fallback in IE6 than 24-bit PNGs. In conclusion, expect high-quality palette generation by combining vector quantization algorithms. The shell scripts, software, and GUIs are easy to integrate, and you have access to an exceptional adaptive dithering algorithm that limits image noise. Large amounts of images will be processed faster, even the color mapped ones.

class="meteor-icon" style="font-size:130% !important;">
class="icon-file-text-alt" style="color:inherit !important;">
 Learn more, visit online: href="http://pngquant.org/" target="_blank">http://pngquant.org/

10 Bonus Image Optimization Tips

Whether you maintain a personal website or are running an online store, you cannot ignore image optimization. Improving site increases traffics and conversion rate.

Consider the following tips:

1. Image names should be descriptive, yet in plain English.
2. Optimize Alt tags.
3. Strategize image dimensions.
4.  Reduce image file sizes to minimize download time.
5. Determine if you should use JPEG, GIF, or PNG to achieve the best possible results.
6. Handle thumbnails proficiently.
7. Use image site maps.
8. Select images wisely.
9. Watch out when using content delivery networks.
10. Test images frequently.

Bottom Line

Image optimization is part of any designer’s workflow. It can be a lot simpler when utilizing the most efficient technology for your projects. Nobody can tell you which tools to choose, because everyone’s needs are different. Complete ample research, and try out a number of applications before making a final decision. Maybe, you need several optimization solutions to attain astonishing results.

Page 16 – Web Hosting Secret Revealed