DrawIt – the diagram creation tool for WordPress
Hello friends,
In this post I will present to you one solution that I am certain that you are going to fall in love with. Especially if your website aims to provide detailed graphical information about processes or services or something else.
Presenting: DrawIt – the diagram creation tool for WordPress.
What is DrawIt?
This is a WordPress plugin that you can download, install and activate for free. When you do this your visual and text editors will receive new functions that will allow you to create and insert beautiful diagrams in your posts and pages.
DrawIt utilizes the draw.io website. However (according to the plugin development team) it is not affiliated with them.
This WordPress plugin is an Open Source software.
How to work with DrawIt?
I have already presented the way of getting the plugin up and running on your website. Now you have to adjust some settings which are quite optional, but still – you should check them out.
In order to do this head to the WordPress admin panel. Choose Settings -> DrawIt (draw.io).
From there you can adjust the following:
- Whether or not to create, save and upload SVG images to your WordPress website:
Here the plugin will warn you that this file format is known for its negative security implications. This is especially true if you allow the upload of SVG files from untrusted sources. So by default this option is disabled. If you want to enable it, DrawIt recommends the installation of another WordPress plugin called Safe SVG. The latter will be able to “sanitize” the SVG files so that you can be sure that they cannot cause security issues with your WordPress website; - Default image type:
In case you decide not to enable the usage of SVG files the only default format will be PNG. - Enable the frontend-based editors;
- Override other plugins disabling the frontend buttons;
- Use insecure version for SVG images:
This will allow the links in SVG to be clickable, but introduces security holes. That is why it is recommended to leave this option disabled (in case you want to use SVG files in the first place). - Choose the default temporary directory:
It can be either the hosting OS temp location or the wp-content/uploads directory of your WordPress website. This folder stores images only during the process of their creation. The final image is moved to your WordPress library and can be accessed by the Media menu;
Now you can go ahead and create your first diagram directly into your WordPress visual editor. Create a new post or a page.
By clicking on the button in the toolbar you will be provided access to a new window which has all the necessary tools for the diagram creation. When you are done with your work simply click on Save and the image will be stored in the WordPress library and automatically inserted into the post or a page that you are creating.
In case you want to insert a previously created diagram you can do this from the Add Media button and proceed like you do with regular images stored in the library. However in the Media Library you will notice a new link that provides access to the diagram editor and you can create a new diagram and insert it automatically when done.
If you are a fan of the WordPress Text editor you can click on the DrawIt button and the editor will show once again.
Simple as that!
So what do you think? Will you use DrawIt for your WordPress websites? Share any thoughts and questions in the comment section below.
See you soon, friends!
*The screenshots in the post are from the WordPress.org page of the plugin.
Protect your WordPress images with Image Watermark
Hello friends,
Do you want to protect your uploaded images from theft? There are several ways to do this however one of the most popular ones is to add a watermark to them. This will not prohibit your visitors of downloading them, however the chances to use them on other websites will be highly reduced. The reason for this is because they will be popularizing your website by presenting your watermark and their visitors will know that the image is not genuine. So in other words they will have to be making free advertising for your own WordPress website on one hand and on the other – they will be confessing that they are using stolen images.
So in this post I will be presenting the plugin Image Watermark and its ability to protect your WordPress images.
What exactly is a watermark?
This is some text or image (or both) that is placed on another image. The idea is that the watermark will not prevent the users from seeing the content of the image it protects but it will make it almost impossible to steal it and modify it. The typical watermark is with reduced opacity or almost completely translucent. It is placed either in the center of the image and thus covering almost all of it or is situated in some of the image’s corners.
Another type of watermark is a non-translucent image which replaces some of the protected image’s content and is usually placed in the corners.
Bear in mind that the corner placement of the watermarks reduces the protection as the image can simply be cropped and it will no longer have a watermark. However this type of watermark protection ensures that your visitors will get a good-looking picture. So it’s up to you to decide.
How to use Image Watermark?
Download, install and activate the plugin. Then head to Settings in your WordPress admin panel. There you will get a new menu called Watermark. In it you have to adjust a few settings:
- Select the watermark image that you are going to use;
- Turn off the watermark protection if needed;
- Watermark preview – here you will see the watermark image that you have decided to use;
- Watermark size – define whether to use the original size of the watermark or some scaled or custom sizes. You have to define the latter in pixels for both width and height. The scaling of the watermark (should you choose to use this setting) needs to be defined in percentages;
- Watermark transparency / opacity – here you have to define how translucent will be your watermark. 0% means that it will be completely transparent and 100% means that it will have full opacity;
- Enable or disable watermark;
- Enable the watermark for a specific image size type or for all of them;
- Enable the watermark protection on selected post types only or everywhere on your WordPress website;
After you adjust these settings you have to save them.
Now you have to upload a new image to your WordPress media library. It will be protected with a watermark automatically! As for your previously uploaded images – simply head to the media library and manually apply the watermark to them.
Simple as that!
So what do you think, friends? Will you use Image Watermark for your WordPress websites? Share your thoughts in the comment section below.
See you soon, friends!
*The image above is embedded from the WordPress.org page of the plugin.
Responsive Lightbox by dFactory – [Review]
Hello friends,
In this post I will make a review on one plugin that will allow your website visitors to experience better image viewing on your posts and pages.
The plugin that will allow you to achieve this is called Responsive Lightbox by dFactory.
What does Responsive Lightbox by dFactory do?
It will simply add the beatiful lightbox (overlay) effect for your WordPress website. Thus your images will stand out when clicked upon. They will appear in a stylish window that will provide options for switching images and closing the current view. Also some info about the image will be presented as well.
What is so special about this plugin?
Responsive Lightbox by dFactory will not only present your images in style but it will also do this with consideration for the devices that your visitors are using to browse your WordPress website. This means that the lightbox effect will look great on any device due to its responsiveness. And let’s not forget that having an optimized responsive website is very important for SEO (especially for mobile optimization).
How to work with Responsive Lightbox by dFactory?
Begin by downloading the plugin (ether from WordPress.org or from the plugin installer system in your dashboard).
Then install and activate it. Next you need to set some settings in the admin panel of your WordPress website.
The General Settings are first.
There you need to decide what your default lightbox will look like. You can choose from SwipeBox, prettyPhoto, FancyBox, Nivo Lightbox, Image Lightbox, TosRUs, Featherlight.
Next you need to set up the rel selector that the effect will be applied to.
After this you have to decide whether or not to enable the effect for WordPress image links.
Next you can choose a single image title and then choose to display your images as a gallery or not. Speaking of galleries – Responsive Lightbox by dFactory can be enabled for them as well. You can even set the image size for them and the image title as well.
What is more important is that Responsive Lightbox by dFactory can be used to display embedded videos from YouTube and Vimeo in a stylish lightbox effect. You can read more on the topic of embedding videos from this post in our website.
Responsive Lightbox by dFactory can be enabled for widgets and comments. The plugin can be forced for different WordPress gallery replacements like Jetpack or Visual Composer galleries. Responsive Lightbox by dFactory can also replace the default product gallery lightbox from WooCommerce.
There are some other settings that you need to take care of before you go on to the next tab. Remember to save your changes.
The Lightbox tab is second.
Here you need to adjust stand-alone settings for each of the default lightbox effects. Simply select the one that you chose in the General tab and adjust its settings. The image below presents the options for SwipeBox:
Again you need to save your settings or progress will be lost. After you are done you can start enjoying your new lightbox effects.
This plugin also comes with its own *.pot file for translations.
A few words on the premium extensions for Responsive Lightbox by dFactory.
This plugin provides premium extensions that will enhance its functionality. For most website the free version will be enough but if you are aiming at providing premium experience for your visitors and you have the budget, you can consider bringing Responsive Lightbox by dFactory to another level by purchasing some (or all) of the extensions. The third tab in the plugin settings can provide more information as well as the official website of the plugin developers: dfactory.eu .
So what do you think friends? Will you give this plugin a try? Share any thoughts and questions in the comment section below.
See you soon, friends!
*The images are embedded from the WordPress.org page of the plugin
How to add animated GIF files to a WordPress post – tips & tricks
Hello friends,
In this post I will be speaking of the popular animated GIF files. You will find what are they and how can they be quite useful for your audience.
But the main thing that you are going to learn are some tips and tricks about how to add animated GIF files in your WordPress posts and pages the right way.
What are animated GIF files?
Animated GIF files are a set of slides (frames) that follow each other and thus create an animated effect. These media formats can end with a loop (i.e. start from the beginning automatically) or end when the final frame has passed. The animated GIFs can be used in various cases. I will share 3 of the most common ones:
- User avatars – quite useful especially if you are moderating a forum or a community website. Users will love to express themselves with animated avatars and GIF files are the best way of achieving this.
- Grab the users attention – animated GIFs can be used in your posts or pages as a means of grabbing your users’ attention. This can be useful only if the animation is relevant to the topic of the post.
- Demonstrations – it is said that an image is worth a 1000 words. Video is even more valuable. However making video presentations and demonstrations is not suitable for everyone who owns a website nor for every hosting. Thus the animated GIFs come to the scene. They can be used as video animations to demonstrate a specific activity (for example adding files to a WordPress post) and the can be created extremely easy by everyone. Also they can be managed as ordinary images and do not need a special hosting capabilities.
How to properly add animated GIF files to WordPress?
You can do this in several ways:
- Upload the animated GIF file as an ordinary multimedia file to the WordPress library.
- Upload the animated GIF file to a sub-domain, FTP server or some cloud storage solution and embed it in your WordPress posts and pages.
- Use the WordPress plugin Giphypress to easily search for suitable animated GIFs from Giphy and add them instantly to your posts and pages.
In case you want to go with the first option, you will have to bear in mind that WordPress will treat animated GIFs as ordinary GIF images. Therefore the different thumbnails that are going to be created will contain only the first frame of the file and it will not be animated at all.
So the solution here is to select ‘Full Size’ when adding the animated GIF file to your WordPress posts or pages as it will be the original one and it will contain all of its frames.
In case you decide to go with the second option you will have to find a reliable cloud solution or FTP server. Upload the files there or create a specified sub-domain for this purpose and use it as a storage for the GIF files. Then use the WordPress function to add multimedia from an external URL. Provide the link to the animated GIF file and add it to your post or page.
I need to inform you that the second option is my favorite one. It makes your website faster which is very important for SEO.
The third option is only suitable if you are using Giphy as a reliable source for great animated GIFs.
Simply download and install the plugin and then activate it. A new icon will appear in the visual WordPress editor that will allow you to search and add files from Giphy. Simple as that!
How to optimize animated GIFs for SEO?
An animated GIF is smaller than a video file but it still needs to be optimized. Even if you go with the second option you still need each file to be as small as possible. Try to find the most suitable combination between quality and file size when creating the GIF. Remember that smaller files result in quality loss. In case the software or the tool that you are using to create the animated GIF cannot optimize it enough you can try using this great online tool called Ezgif. It is an animated GIF editor and image editor. You will be able to create and optimize animated GIFs with ease! Remember that you still need to download the optimized file as it will soon be deleted from the Ezgif server.
When you are done simply upload it either to your WordPress website or to the external solution and you are done! Simple as that and you will have animated GIFs in your posts and pages.
That’s all folks! If you have any questions please share them in the comment section below. Don’t forget to share this post in social media as well.
See you soon!
How to optimize your images [Tips]
Hello friends,
In this post I will present to you several tips for image optimization. This is very important for better SEO and better ranking. That is why you should take into serious consideration how and when you will optimize the images on your website. The tips that I am going to share with you are both for WordPress websites and any other websites as well.
So, let’s not waste any more precious time and begin with the tips on how to optimize your images!
Tip #1 – Choose carefully your file format
As you know images come in the shape of files and each file has a unique format. The most commonly used formats that are also considered to be SEO friendly are:
- JPEG – suitable for pictures and other images that contain millions of colors. Provides you with high-quality compression which results in smaller file size. However the compression is “lossy” and this will result in information loss (the main reason for the smaller file size). JPEG file types are not suitable for images that contain mainly text, solid colors or graphics;
- PNG – suitable for almost any image types except pictures as some older devices might not display them correctly. This file format was created as a substitute for GIF and the quality of its compression is superior to the GIF itself. The PNG file also supports transparency which makes it ideal for background purposes as well;
- GIF – suitable for images with small, fixed number of colors. It is reduced to no more than 256 unique colors. The GIF file format provides great compression which is not that complex as the one that the JPEG file is equipped with. However this format is not suitable for pictures and other images with gradient colors due to the small number of supported colors. On the other hand the file size of a GIF file might be quite small and handy. Also the animated GIF types are gaining more and more popularity (especially for tutorial purposes) and you may consider using them in your posts;
Tip #2 – Choose a suitable resolution and DPI for your images
Now that you know which file formats you may use without any problems, you need to consider where the images will be placed and what will be their purpose. The different locations on your website might require an image with bigger or smaller resolution and DPI.
Most of you will be using either Photoshop or GIMP to create a suitable image. So here are some tips for these two softwares:
- In Photoshop you’d like to use a DPI with about 72 pixels. Always consider using the “Save for web” command (quite useful for PNG images) or as an alternative the regular “Save as” command with settings for medium quality (suitable for JPEG images);
- For GIMP – please read the official documentation on how to prepare your images for the Web;
In case you decide to use an online image editing solution or other offline software – you can take into consideration the tips for DPI that I have provided for Photoshop.
Tip #3 – Image file name
The file name should contain suitable keywords or phrases for your content. So you need to take into consideration using them as this may also improve your SEO.
Tip #4 – Image file size
By now you should have created an image with a suitable file format, resolution and DPI and file name. However this file might still be bigger than it is needed for SEO purposes. So let’s see how we can compress it a little more. You may be asking “Why is this needed?”. And the answer is – for optimal speed! The smaller the file size, the faster it will load on any device.
So here is how you can add additional compression for your images:
- You can use two command-line programs for Windows and Linux in order to compress JPEG and PNG files. These solutions are called Jpegtran (for JPEG’s) and Optipng (for PNG’s);
- You may also use various online solutions like Compressor.io or TinyPNG;
Tip #5 – If possible upload the images to another server or use a CDN provider
This will reduce the burden to your hosting even more and will result in a better speed and performance.
Tip #6 – Add alternate text, captions (if applicable) and image descriptions
So the time has finally come to use the image on your website. Before you insert it to your content, please consider using the above texts as they are extremely important for SEO purposes. You need to use unique variants for each of them and you should pay special attention to the alternate text. Use suitable keywords and phrases that may connect the image to the text content of the current page of your website. This will ensure that you get traffic from image searches as well and your content will also rank better.
Tip #7 – WordPress users might also want to use the following solutions for better image optimization:
- Jetpack – there is a free CDN service included in this suite;
- YoastSEO – this plugin will ease the creation and adding of the texts in Tip #6;
- WP Smush or ShortPixel – for additional compression when uploading image files to the WordPress media library;
- Simple Image Sizes – for in-WordPress resizing and custom WordPress image sizes;
- Regenerate Thumbnails – for regenerating your WordPress thumbnails;
This concludes the tips on how to optimize your images. I hope that you can find them useful for your websites. If you have any questions or suggestions, please use the comment form below. Don’t forget to share this post in social media in order to help users like you to find out how to optimize their website images for better SEO.
Thank you friends and see you soon!
*Image source – Pexels.com
Free Image Resources for your Website
Getting the right image for your website is more than just an important step. As a matter of fact, it is extremely crucial especially if you want to create a website that stands out from the crowd. One of the biggest mistakes done by many bloggers and website owners is using free images from Google. They are unaware of the consequences that are bound to besiege them if they are not careful. For example, there is the possibility that the image may be copyrighted and using it without proper crediting could lead to lawsuit. Regardless the size of your website, you certainly want to avoid that at all cost! So, in this post, you are going to find the top 9 free image resources for your website.
If I am given a chance to choose, Gratisography is my go-to site for royalty free images for my website. Images on Gratisography are free for download and use on your personal and commercial projects. What makes it unique is that the pictures there are unique and more importantly, high resolution. At this point of writing, Gratisography is free to use (you don’t have to create an account), and new images are often uploaded either weekly or monthly basis.
You may have heard about this website. If you are not, this site (or project as they call it) is managed by Crew. Just like Gratisography, you are free to download images for use. The website’s disclaimer says that you can ‘do whatever you want’ with the photos and are not bound to any laws or restrictions. As for the update, Unsplash updates its gallery every ten days. You will get ten news images every ten days. If you want to be notified with new photos and images update, you can easily signup for their newsletters where you will receive updates delivered directly to your email. Unsplash is also free to use and what I love about it is the ‘nature-themed’ images.
Pexels calls themselves as “The best stock photos in one place.” All photos on Pexels are free for any personal and commercial purpose. Images on Pexels can be modified, copied and distributed indefinitely. At the same time, you do not need to provide credit or attributes to the source of the image (even though it is highly optional). Pexels allows you to download the free images, and even providing options such as voting it up (via like) or share it with your friends. Additionally, there are also information of the image at the middle/bottom of the download page for further reading.
According to Pixabay, there are over 830,000 free stock photos, vectors and art illustrations that you can choose from (and download) from its website. Images on Pixabay are free of copyrights under Creative Commons CC0 which means that you can download, modify, distribute and use these royalty free images for any purposes. If you are looking for images which are highly related to human (or human touch), you should check out Pixabay for more information. Besides that, Pixabay allows you to download the images with three different sizes:
- Small
- Medium
- Original
Do note that the sizes of each image may varies.
Are you looking for a large collection of free images for your website? If you are, then you need to check out what Pickupimage has to offer. Unlike other free image resources, pictures on Pickupimage are very much based on outdoor related scenes. This is critical because there isn’t many free image resources that offer excellent outdoor related scenes like what Pickupimage is offering. The best part about Pickupimage is that you do not need to register for an account to start downloading the images.
Do you know that Flickr can be an excellent source for pictures? I use Flickr a lot, and Compfight is a Flickr image search engine. It uses Flickr API to find and locate images based on your license needs. Compfight is kind of cool since you can search photos based on types of license and even through specific tags. Searching images through licenses is a good way, but it doesn’t provide a very accurate result. On the other hand, searching images using tags only can provide more precise results but results are often cluttered together.
If Compfight isn’t your ‘cup of tea’, then Image Finder is an excellent alternative to finding images on Flickr. This tool allows you to search for images or photos based on Creative Commons. Of course, there are many other categories to help you filter out specific results such as:
- Commercial Use
- Non-Commercial Use
- Relevance
- Interestingness
I recently came across StockPhoto.io and surprisingly, it is a Creative Commons-licensed (free and professional) stock photo sharing community. Currently, it has a huge 25,000 images in its database, and the figures are just increasing by the day. StockPhotos.io is unique as all its photos are displayed via Pinterest style. If you are using StockPhoto.io for commercial purposes, it is important to remember that you would need to provide proper credits to the authors (or owners).
Do you know that Canva is also a great source of free image resources for your website? Canva allows you to search for the best pictures or graphics based on your specific needs. It is very powerful, and you can create a new design directly from it. At the same time, there are also many sample images and designs that you can choose from inside the Canva tool. You can either use it to create better pictures or simply as an idea to create your own, stunning images from scratch! Summary If you search for “free image resources for your website” on Google, you will be overwhelmed with hundreds of different options. While there is no image resource that ‘one size fits all,’ you should take the time to try each platform before finally making a decision. For me, my top favorite would be Gratisography, followed by Unsplash and Canva. What’s your favorite free image resource for websites?