PHP if statement if screen is below 767px show a static image instead

  • Hi,

    I need a php if statement that will display a static image rather than the one currently shown if the screen is below a certain px range.

    For example, something like this

    if ( below 767px) {
   echo '<img src="https://placehold.it/50x50">';
} else {

echo {
  the normal rotating image slider
}

    Sorry I can’t provide much more information, i hope someone can help me please.

    Much appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)

  • PHP, as a server-side programming language, is not aware of the resolution of the user’s monitor directly. You can use CSS to load different style sheets based on screen resolution, and there are ways you could use it for this, but I think for what you’re trying to do, using javascript and/or jQuery–which ships with WordPress–would be a better approach. Both javascript and jQuery, which is based on javascript, are client-side scripting languages so they are aware of the user’s screen resolution.

    The way I’d do it is add an ID attribute to a div (e.g., “sliderdiv”) where either the placeholder image or the slider would be, and then use something like this code within script tags in the header of the page where you want the code to run:

    $(document).ready(function() {
  if (window.innerWidth < 767) {
    jQuery('#sliderdiv').html('<img src="https://placehold.it/50x50">');
  } else {
    jQuery('#sliderdiv').html('The HTML for the slider goes here.');
  }
});

    For this to work, you have to make sure jQuery is being loaded by your theme, but that’s another question.

    Thread Starter RyanHipkiss

    (@ryanhipkiss)

    Cheers for the response, I’ve realised that the function wp_is_mobile() does exactly what I was looking for.

    Thanks anyway

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘PHP if statement if screen is below 767px show a static image instead’ is closed to new replies.

Tags