Disable Media File Image Link On Mobile Devices

Question

I'm looking to disable the 'media file' image link on mobile devices, so that when viewing a site on mobile devices we simply have the image being displayed with no link to anything.

I am looking to achieve this because in a responsive design my images are at 100% width on mobile devices anyway. Clicking on the image simply opens an image that is the same size, or even smaller depending on the lightbox padding settings.

I use the shadowbox js plugin to open media file image links in a responsive lightbox. This plugin detects a media file image link and adds a rel="shadowbox" to open up the full size version in a lightbox.

I'm beginning here by trying to implement the described functionality within the native WordPress media file image link code, as I believe the plugin simply hooks into that.

I've researched this quite a bit, to no avail. One unsuccessful implementation I've attempted was from the following thread - Disable Linked Gallery Images If Mobile Browser

In doing so I added the following code to my functions.php file (I'd like to achieve this either via my functions.php file or a plugin), but it didn't work.

$image = wp_get_attachment_image( $id, $size, false );
// if it's set to not show the image link
if(isset($attr['link']) && ('none' == $attr['link']) && !is_mobile() ){
// then just show the image
echo $image;
} else {
// else show the image wrapped in a link
$link = wp_get_attachment_url($id);
echo "<a href=\"$link\">$image</a>";
}

Is it possible to disable the 'media file' image link on mobile devices?

Answer 1

You can easily do this using HTML and CSS. You can write 2 blocks of div for the same image and toogle display:none; properties in CSS using media queries as shown below. Note: I have remove the "a href" tag for mobile.

<!--HTML Start -->
 <div class="image-grid desktop">
 <a href="#"><img  src="#" /></a>
 <div>

   <!--For Mobile -->

 <div class="image-grid mobile">
 <img  src="#" />
 <div>

<!--HTML End -->

<!--CSS Start -->
.image-grid.mobile{display:none;}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 1) {

.image-grid.desktop{display:none;}
.image-grid.mobile{display:block;}

}


<!--CSS End -->

Answer 2

What you want to do isn't possible from functions.php or a plugin. The code you have posted would need to replace code in your template files for the page displaying your images.

If you can modify the template files, find where in your template generates your image HTML and then you can replace it with something similar to the code you have posted. It's very likely that you will need to modify the code you posted above in some way.

Also, unless you have added the is_mobile() function, you will need to replace is_mobile() with wp_is_mobile().

Finally I should add that this isn't a "responsive" solution. Ideally you should use HTML and/or CSS and/or JavaScript to solve your issue.