I am looking for image rotation based on device. Example if website load on desktop it should load desktop.png and if same website load in mobile it should load mobile.png

My JS code :

<script type="text/javascript">
    if (screen.width <= 720) {
     document.write('<a href="http://example.com/mobile"><img src="mobile.png"></a>');
    } else {
     document.write('<a href="http://example.com/desktop"><img src="desktop.png"></a>');
    }
</script>

I have rewrite the JS code to PHP Code :

if (get($screen, "width") <= 720.0) {
  echo "<a href=\"http://example.com/mobile\"><img src=\"mobile.png\"></a>";
} else {
  echo "<a href=\"http://example.com/desktop\"><img src=\"desktop.png\"></a>";
}

The above JavaScript code is working fine but my PHP code is giving a error. Can anyone please help to fix it?

CodePudding user response：

The answer is NO. You cannot achieve an image rotation on the web using php, because php is a server side language and to create any effect on the web you need css (simple effect) or javascript (complex effects)

With a server side rendering (php), you can only use a kind of templating or binding variables to create the required javascript tag as string in the server and return it to the web browser. You cannot create or don't exist a kind of technology or framework in the server side that can replace the classic javascript at least in this generation.

ssr : server side rendering

PHP is a server language used to develop backend programs. From early days of web development, php and other languages (java, python, c#, ruby, etc) have been used to create web pages. In technique, the server side is the responsible to create the html, so when user enters to acme.com, the server side creates the html and return it with the content ready to display.

In these frameworks is classic use libraries that are capable top create html as if it was a simple string, using templates.

<? if ($condition): ?>
  <p>Content</p>
<? elseif ($other_condition): ?>
  <img src="other-content.png" alt=""/>
<? else: ?>
  <script type="text/javascript">
     document.write('<a><img src="$SOME_VAR.png"></a>');
  </script>
<? endif; ?>

As you can see, in the server (php), you just create html or javascript as simple strings. At the final, these contents will be evaluated by the web browser, and the web browser just understand html, javascript, css, fonts, etc. The browser doesn't care who create the html/javascript in the server (java, c#, php, python, ruby, etc).

csr : client side rendering

Basically is the opposite to the ssr. The content is created ad client side, more specifically the web browser. So when user enters to acme.com, the server just returns an minimal index.html and a big javascript file. This javascript file is responsible to render or create the entire webpage using javascript and ajax.

In this layer, the technology (javascript) is able to access to some device information or resources like screen dimension, camera, etc. You cannot get these values in the server side layer (php, java, c#, etc)

More details here

• https://stackoverflow.com/a/69511019/3957754

CodePudding user response：

PHP doesn't know anything about the screen size of a client. The best solution would JavaScript that changes the content based on the screen size.

With a <picture> element you can use Media Queries to determine what images to show based on a screen size.

In the example below the mobile.png will be shown for screens up to 720px in width, and the desktop.png image will be shown for all sizes above it.

<a id="dynamic-link" href="">
  <picture>
    <source srcset="mobile.png" media="(max-width: 720px)">
    <img src="desktop.png" alt=""/>
  </picture>
</a>

The anchor tag doesn't have this kind of functionality. But we can add it by using window.matchMedia() and use the same Media Query to change the href value of the anchor whenever the screen size changes.

// Select the link element.
const dynamicLink = document.getElementById('dynamic-link');

// If the link exists on the page, continue.
if (dynamicLink !== null) {
  // Observe a media query.
  const mediaQuery = window.matchMedia('(max-width: 720px)');
  mediaQuery.addEventListener('change', event => {
    // If the screen in 720px or less.
    if (event.matches) {
      dynamicLink.href = 'http://example.com/mobile';
    // All sizes above.
    } else {
      dynamicLink.href = 'http://example.com/desktop';
    }
  });
}