How To Get Responsive Image HTML Code From Media Library

If you’ve been using WordPress for some time and know at least some HTML, you may have put an image tag some where on your site. That could be in a custom widget on your sidebar or footer.

If you put the img code the old way, your code may look like this:

<img src="path_to_image_file" title="" alt="" />

However, modern image code should have srcset attribute. This attribute helps you serve different images on different devices, thus save you some bandwidth and your visitors some waiting time. If your image code doesn’t have that attribute, you are not doing what is best for both you and your visitor.

How to get img code with srcset in WordPress

By default, WordPress images come with srcset. If you look at the images you added through add media button, you can confirm this. However, if you get the file straight from Media Library, all you have is the direct link to the image file.

Recently, I faced this problem and created a code snippet to solve the problem. I would recommend you put this code inside the functions.php file of your child theme. (Don’t know what a child theme is or how to create one? Check out my child theme tutorial here)

The code snippet

function bc_responsive_image_output( $form_fields, $post ) {
     //if the attachment is not an image, don't do anything
     if (!wp_attachment_is_image($post->ID))
             return $form_fields;
     $html_code = '';

     $html_code .= sprintf('<div><label>Thumbnail</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID ));
     $html_code .= sprintf('<div><label>Medium size</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID, 'medium'))    ;
     $html_code .= sprintf('<div><label>Large size</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID, 'large'));
     $html_code .= sprintf('<div><label>Full size</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID, 'full'));

     $html_code = '<div id="bc_image_codes">' .$html_code . '</div>';
     //generate image embed code
     $form_fields['location'] = array(
         'value' =>'',
         'label' => __( 'Responsive image HTML cod3' ),
         'helps' => __( 'Copy the code below ' ),
         'input' => 'html',
         'html' => '<style>#bc_image_codes label, #bc_image_codes textarea { display: block; }</style>' . $html_code

     );
     return $form_fields;
 }
 add_filter( 'attachment_fields_to_edit', 'bc_responsive_image_output', 10, 2 );

If you are interested, here is a brief explanation on how the code works. Literally, I added the image HTML code inside each attachment (if it is an image) in the media library when it is clicked.

How to get the responsive image HTML code inside Media Library

So, I assume that you have saved your functions.php file. Now, go to Media->Library. If you click on any image in your media library, you’ll see this:

responsive HTML image code in WordPress Media Library

As you can see that, there are different codes for different image sizes. If you want thumbnail size, copy the code in the thumbnail box, if you want full image size, get the code in the full size box and so on.

Conclusion

As you can see, the snippet is quite simple but it helps me get the responsive image HTML code on WordPress. Next time you find yourself enter image code manually, stop and use this code instead.

Why Your WordPress Site is not Responsive? Two Possible Culprits

Recently, I as fed up with my theme and I decided to make my own theme to optimize for page loading speed. And indeed, my performance score went from 70-ish to 100. However, after a few days, I received report from Google Search Console that some of my pages are not responsive.

I checked every items in my common responsive check list, including:

  1. Content must not be wider than its parent
  2. Max images’ width is 100%
  3. Columns collapse on to fit 100% width on small screen

After spending almost 3 hours in front of my screen, I figured out two culprits that made some of my post not responsive. This may not be applicable to you but it’s worth a try if you don’t know what’s the cause.

Figure element with a fixed width that caused page not responsive

The first problem I found is I have my image wrapped inside a figure tag. At first, I don’t understand why WordPress does this on some of my images and doesn’t on other. It turned out if your images have caption, they will be wrapped in a figure tag with a fixed width.

You can remove the width attribute of the figure element to fix the problem.

If your page is still not responsive, removing the caption solves the problem instantly.

Code highlighter could be problematic too

If you are using code highlighter like what I have on my site, you could be the next victim of long line of code. Normally, code highlighters have no problem with short string (variable, function name…). However, if you code contains long string such as long function name or long file path, your content could be much wider than it should be.

What’s the fix? Add this rule to Additional CSS (Under Appearance -> Customize)

article {
    word-break: break-word;
}

 

This code tells the browser to break long words in to multiple lines. Save the changes and check your site again (make sure to clear your cache).

If your site is responsive now, it’s great. If it isn’t, please let me know in the comment below. There maybe other factors that cause your problem.

Conclusion

By no mean this is an exhaustive list of fix for site not responsive. However, these are the new problems I have encountered. Hopefully, the tips in this post is useful to you.

How To Disable WordPress Theme, Plugin File Editing In One Minute

Being able to edit plugins and theme file is a real convenience, especially for people who know how to code. However, for people who don’t know how to code or don’t understand much about WordPress development, this is a possible risk.

By default, admin users in WordPress have file editing right. You can check if you have the edit right by hovering your cursor over Plugins or Appearance menu item in your dashboard (if you don’t see such options, chances are you don’t have the file editing right). If you see the last item in the sub menus say “plugin editor” or “theme editor”, you have the file editing right.

The need for disabling file editing right for admin users is even more urgent when you have other people working on the site. One missing semicolon may bring the whole site down.

So, how can you disable file editing completely on your site?

It’s easier than you might think.

How to disable file editing in the admin area

To accomplish this, you need to have access to your web server. Being an administrator on your site is not enough. You can either perform this task via FTP or ssh or cPanel. Please choose what suit you.

The only thing you need to do to disable file editing in the admin area is to put this line of code:

define('DISALLOW_FILE_EDIT', true);

right above the line:

/* That's all, stop editing! Happy publishing. */

in the file named wp-config.php

by default, this file is located at the root of  your website. It is at the same level with wp-content, wp-include, wp-admin.

Here is where the file on my site:

locate wp-config.php on server

After inserting the code, the content of my wp-config.php file would look like this:

inserting code to disable file editing in wordpress admin

Now, make sure you save the file and go back to your admin area. You should see the option to edit plugins and themes disappeared:

theme editor disabled

plugin edit disabled

Now, no one, even admins can accidentally edit plugins or themes files. This action alone has significantly improve your site’s security.

What if you want to insert code to your site?

Adding functionalities to your site by modifying the plugins’ or themes directly (except the case of child theme) is not recommended. If you want to insert Javascript or CSS code, you can easily achieve this task by using plugins like WP Coder. In case of editing .php file, the best method is via FTP or SSH. In the occasion that you make a mistake, you can quickly fix it and bring the site back online without suffering a white screen of death.

Conclusion

As a solo admin of my site and a developer, I’m quite confident editing files in my site’s dashboard. However, if your site is managed by other people (and they have admin rights), it’s best to disable the file editing ability in the admin area. It will prevent accidental edit of files that may bring your site down.

 

How To Prevent Other Sites From Using Your Images Without Permission

If you have a website that serves images, especially news site, there are chances that other people want to use your images. Polite people will ask for the right to display your images on their websites. Not so polite people may download the images to their computer and upload to their site. Worse, they can link directly to your images from their site. By doing so, they have images to show with you paying the bandwidth. This technique is called hotlinking.

You may wonder, is there any method to stop this?

Fortunately, the answer is yes. In this post, we are going to find out how to disable  hotlinking for both Apache and Nginx servers. Let’s get started.

First thing first, find out what server you are running

Finding what kind of server you are running is quite simple. Currently, nginx and apache are the most popular servers. This post cover settings for these two only.

Here are the steps to find out what server that your website is running on:

  1. Open your website on Chrome
  2. Right click anywhere on the website and select inspect and switch to the network tab.
  3. Reload your site and you’ll see something like this:

load site with network tab open

Let’s click on the line with your domain name. In my case, it’s www.binarycarpenter.com. There will be a new window opens on the right. Pay attention to the line start with the text “server”:

find the server technology that runs your site

As you can see, my site is running on an nginx server. You’d have no problem saying what kind of server you are running if the text is different.

How to prevent other sites from linking directly to your images on Apache

To disable hotlinking on Apache, you need to have access to your server, not WordPress admin since you are going to enter some code in a file called .htaccess. If you have no idea what the file .htaccess is, you may want to read a bit about it here.

Basically, it’s a file on your server that let you write directives for your web server to do various things such as URL rewrite, manage file access …

To understand how .htaccess work may take a long time. However, to disable image hotlinking takes only a few minutes.

Now, let’s copy the following code and paste to the end of your .htaccess file that located at the same level with files such as wp-config.php, wp-content… If you don’t have that file, simply create it.

<IfModule mod_rewrite.c>
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http(s)?://([^.]+\.)?your_site\.com [NC]
    RewriteRule \.(gif|jpe?g?|png)$ - [NC,F,L]
</IfModule>

Make sure you replace your_site with your domain name (without extension) and com with your domain’s extension.

For example, your site is greatsite.org, the code would be:

<IfModule mod_rewrite.c>
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http(s)?://([^.]+\.)?greatsite\.org [NC]
    RewriteRule \.(gif|jpe?g?|png)$ - [NC,F,L]
</IfModule>

After that, save the file and you restart your server. Now, try to link to your images from other site (you can try on your localhost) and you’ll see a 403 error.

 

How to prevent other sites from linking directly to your images on Nginx

Now it’s time to apply some configurations to your nginx server to disable hotlinking. To successfully achieve this, you need to identify your server block. In one nginx config file, there maybe many server blocks.

Here, within my server block (for this site), I put the following code:

location ~* \.(jpg|jpeg|png|gif|swf|webp)$ {
     valid_referers none blocked binarycarpenter.com *.binarycarpenter.com;
     if ($invalid_referer) {
         return   403;
     }

 }

Make sure you replace my domain name with your own domain name.

Now, save the file and restart nginx.

On my site, I still see my images loading properly. However, if I try to link from other places (not from my domain), I’ll get a 403 error on the image:

Prevent Other Sites From Using Your Images

Conclusion

As you can see, within a few minutes, you can prevent other from stealing your bandwidth. You may find this is difficult if you don’t know what .htaccess/apache/nginx are. If you need assistance, please leave a comment below.