Disable Media File Image Link On Mobile Devices

admin管理员组

文章数量:1122846

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?

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?

• images
• links
• thumbnails
• mobile
• responsive

Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Aug 25, 2015 at 7:22 ConnorConnor 311 silver badge77 bronze badges 2

• 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 Commented Aug 25, 2015 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 Commented Aug 26, 2015 at 3:24

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 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 -->

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.

There are no default settings in WordPress for this but you can design listings using CSS or if your theme has any builder activated then the builder too has settings for individual pages where you can design according to different viewports.

本文标签： Disable Media File Image Link On Mobile Devices