0

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?

  • It would be a much better idea to disable the link client-side, based on the device width. No user agent sniffing. No change in server-side logic. No dependency on device, but rather capability (i.e. viewport size). – TheDeadMedic Aug 25 '15 at 9:17
  • I'm happy to do that. I had assumed it would be best achieved using wp_is_mobile(). Would your suggestion be achieved using JS? – Connor Aug 26 '15 at 3:24
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 -->
0

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.

  • Yeah, I'm mostly fine with editing template files. I'm not sure which template file controls image links though (my understanding of image.php is that it's for the display of image attachment pages). If php is not the best solution though I'm happy to look into other methods to achieve this. – Connor Aug 26 '15 at 3:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.