Hi I want to detect ipad orientation in php, i know i can detect the iPad but how do i detect the orientation, i need it in php and not css because i want to show x pictures in my gallery in portrait and x in landscape.
here is the code i am using to detect the php for iPad:
if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== FALSE) {
} else {
}
i have checked on this site and on google but was unable to find anything which could help
thankyou
iPad orientation can change when the user holds her iPad differently. Therefore, there's no point of registering it in php - by the time your response reaches the client, it might already be different.
If there needs to be any plumbing that can't be done in CSS (like loading different images or so), handle the orientationchanged event in JavaScript.
This is not orientation detection but USER AGENT detection. It only detects what kind of browser is browsing your page.
Are you trying to detect the device or what way the device is rotated?
I believe you would have an easier time detecting the orientation of a device either in Javascript or CSS, have you looked into these yet?
Javascript:
<button onclick="detectIPadOrientation();">What's my Orientation?</button>
<script type="text/javascript">
window.onorientationchange = detectIPadOrientation;
function detectIPadOrientation ()
{
if ( orientation == 0 ) {
alert ('Portrait Mode, Home Button bottom');
}
else if ( orientation == 90 ) {
alert ('Landscape Mode, Home Button right');
}
else if ( orientation == -90 ) {
alert ('Landscape Mode, Home Button left');
}
else if ( orientation == 180 ) {
alert ('Portrait Mode, Home Button top');
}
}
</script>
CSS
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
The device orientation is dynamic - the user can rotate the device after the page has been loaded. Therefore, it makes no sense to include it in the user agent string.
Instead, you should use HTML and JavaScript to change the layout when the orientation changes.
Everyone is suggesting you do it in Java Script which is completely correct but I'm guessing you don't see that as an option from your question.
You should load enough images (or all if not a stupid number, it is only a URL string after all) from PHP to fill the largest size in JSON (json_encode($array of image URL's to use)) format. Then use JavaScript to detect orientation and populate the page with the correct number/layout of images.
You'll have an array in JavaScript of Image URL's to pick from and load dynamically.
use this code may be use full to you
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
A brutal way would be to store the orientation change in a cookie through jQuery and access it with the $_COOKIE variable in php.
However, you would still need the javascript hooks to detect the orientation change and possibly a page reload.
Related
I have a small website using only PHP, HTML, and CSS and want to add Dark Mode on it. I've found a lot solutions, but all of them use JavaScript. Is that possible to add Dark Mode without JS?
One option could be to use a routing element in your URL that determines (using server side logic) which set of cascading style sheets gets loaded.
For example in http://foobar.com/dark/path/to/content the /dark/ part of the URL could make the server load your "dark" theme CSS files.
You already have all you need. Browser detection is done with CSS following the Media Queries Level 5 specification using a prefers-color-scheme media query for detection. If you're familiar with responsive web-design with CSS then you already have all the knowledge - the only difference is that responsive CSS is about geography (sizes, columns, padding, spacing, font-size, etc.) and prefers-color-scheme is about ... well ... color. Thomas Steiner (#DenverCoder9) has an awesome article "prefers-color-scheme: Hello darkness, my old friend" that covers this.
If you are asking about PHP specifically then you are out of luck - there is no dark mode detection methodology for server side-processing.
All efforts thus-far by the W3C (and its sponsors) has been focused on client-side / Jamstack.
There is a recommendation by Thomas Steiner (same guy) to implement a Proposed server-side client hint, but this has not been adopted (yet?) by the W3C or the browsers.
Either way - there is a significant drawback in server-side detection (both with Thomas' recommendation and my solution below) in that the server will only know about a state change (e.g. macOS "Auto" mode when night fall happens) on the next server request, or more visibly, the first load of the page.
My recommendation is to leverage CSS / client-side only on this - Thomas gives some practical guidance on two methods,
1x CSS with both color schemes supported, and
2x CSS, with one being light and the other dark. I've made a educative whitepaper applying some of these methods with the CSS framework Bootstrap at vinorodrigues/bootstrap-dark to show how easy that can be - without server-side processing.
Having said that - if you must insist on PHP or server-side detection there is no workaround - but one must use some JS. The most efficient way is to leverage the js-cookie/js-cookie project, and include the following code into your HTML pages:
<script src="https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js"></script>
<script>
// code to set the `color_scheme` cookie
var $color_scheme = Cookies.get("color_scheme");
function get_color_scheme() {
return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
}
function update_color_scheme() {
Cookies.set("color_scheme", get_color_scheme());
}
// read & compare cookie `color-scheme`
if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
update_color_scheme();
// detect changes and change the cookie
if (window.matchMedia)
window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
</script>
And then your PHP will detect this cookie like this:
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
if ($color_scheme === false) $color_scheme = 'light'; // fallback
Which you can use to load the CSS:
// Load the CSS for the correct color-scheme
if ($color_scheme == 'dark') {
?><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vinorodrigues/bootstrap-dark#0.0/dist/bootstrap-night.min.css"><?php
} else {
?><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0.css/bootstrap.css"><?php
}
Or, like this:
?>You are in <?= $color_scheme ?> mode.<?php
You can do a clone of the css and change the background-color, buttons... It's not really necessary really to use JavaScript
If you want to do just a button for change the css, i don't really know how to do it, but if you want to do another webpage but just for Dark Mode, just put the clone off the css that you created.
I'm having issues with adsense on responsive design. One solution I found is to not load them at all if window size is not big enough. So I thought I would create a separate php file with advertisement code, container etc... and than include it on a page. However, I can't figure out how to only include this file if, lets say, window width is 720px or above, else don't include this file.
Perhaps, javascript can be used some way, not sure how it will work with all the dom and php includes though.
You can try something like:
<script language=javascript>
if (screen.width >= 720 )
$('#place_holder_div').load('file_from_server.php');
</script>
Here #place_holder_div is a div in your html file. The syntax is Jquery but of course you can use plain javascript if you wish. The code looks at the screen width and if greater than 720 pixels, loads the php file file_from_server.php (which will contain your ad) into the placeholder div.
The only way to know what the window or screen size of a client is, is by using JavaScript.
window.innerHeight; // Available height of the browser for the document
window.innerWidth; // Available width of the browser for the document
window.outerHeight; // Browser height
window.outerWidth; // Browser width
window.screen.height; // Screen height
window.screen.width; // Screen width
After inspecting these, you could do a HTTP request for the relevant file. It is, however, probably not the best solution since the user can actually change any size mentioned above at any given time.
I have limited space in my server. So, I am looking for an alternative for hooking up image URLs to my site like a product image.
What I would like to do is input an URL then load an image without refreshing the whole page.
Here is my idea:
input "any url" then submit
if url is image and existing {
display the image
}
else if (url is a non-image) or (url is image but not existing) {
display a default image
}
I tried getimagesize but it was so heavy. curl is not functioning on my server, so I am trying to do is use jQuery or JavaScript or something.
At the moment I'm using something like this:
HTML
<img src="http://www.yoursite.com/img/someimage.jpg" onerror="NoImage(this);">
Javascript part:
<script type="text/javascript">
function NoImage(p){
p.src="http://www.yoursite.com/img/nopic.gif";
}
</script>
Hope it helps
use fopen to check if that image exists u dont have to read the full content
http://www.astro.keele.ac.uk/oldusers/rno/Computing/File_magic.html
( u should restrict that possible urls cause auf bandwidth stealing from other pages - and maybe some copyright problems caused by that images )
How can I detect if an iPhone has a retina display or not? Is there a reliable way? Either pure PHP or preferably Zend Framework way of doing this.
i figure it out by this
var retina = window.devicePixelRatio > 1;
if (retina)
{
// the user has a retina display
}
else
{
// the user has a non-retina display
}
You must consider the fact that you are trying to get client side information on the server side.
It would seem that you are unable to detect the display with pure PHP or Zend framework.
It furthermore seems like the UserAgent information from the client, that you might access from PHP is based upon the OS, not the hardware, and thusly does not help you.
You might be interested in reading the following article which much more eloquently and thoroughly explains the issues.
http://www.bdoran.co.uk/2010/07/19/detecting-the-iphone4-and-resolution-with-javascript-or-php/
Good luck!
Javascript: window.devicePixelRatio
I guess as simple thing as display width detection would be sufficient for such a task, retina display packs so many pixels in the width, that simple check will immediately tell you if its an ordinary display or retina display.
PHP does not have such a capability out of a box, but Javascript does.
Here is how :
<script language="Javascript">
<!--
document.write('<br>your resolution is' + screen.width + 'x' + screen.height)
//-->
</script>
Simple question with yes/no answer and if yes...then how?
Suppose you have an HTML page with an image on it without any sort of watermark.
Is it possible to place a watermark on that image if a user saves it to their computer?
I need a simple function that watermarks an image upon download or save...
I do understand that once the image loads in the browser, it is technically downloaded, so is there a way to display the image without a watermark on screen, and if the user opens browser cache, he/she finds a watermarked copy?
If anybody has done this using any platform (PHP, GD, jQuery, etc.), your contribution would be appreciated.
One trick might be to combine 2 images, so they become one.
I have image A:
Then I add image B (watermark version)
So when you display the image for the user you use one as background and the other one as image, so when user tries to download, they will get only one part. Of course as already mentioned, the user will be able to get all they can see on the screen, but most users won't be able to combine the images properly.
Please note that the image on top must be transparent.
I would recommend doing this server side and cache the modified images when you have cut out the watermark
Here you can read how to do it with PHP: http://www.sitepoint.com/watermark-images-php/
I personally don't think that it is possible with javascript, because as you already have said yourself, it is already downloaded.
But don't nail me on that.
On the server side it is for sure possible, as you can see in the above link.
A possible alternate solution is to contain the image inside an element with a hidden overflow.
For example:
Your image has a height of 200px, you add an extra 20px watermark (when uploading) at the bottom of the image (so it isn't actually on top of the image). So the total image now has a height of 220px; but you place it inside an element give that element a 200px height and a hidden overflow.
You can change the source of the image when a user right-clicks it. This way you can change the source to the watermarked version when the user tries to save the image.
Yes, the user will already have the non-watermarked version in their cache, but only advanced users are going to know how to get to those images.
$('img').on('mousedown', function (event) {
//check which mouse button was clicked, 1 == left, 2 == middle, 3 == right
if (event.which == 3) {
//update the source of this image
this.src = this.src.replace('.jpg', '_watermarked.jpg');
}
});
Here is a demo: http://jsfiddle.net/s6A9m/
Anything that the user can see they can take. There is no way to watermark ONLY if downloaded. When an image is displayed in the browser it has already downloaded.
There are several approaches you could take. I would recommend you use PHP to add the watermark to the image before it is displayed. This means that all protected images on the site will display a visible watermark. A second approach I have seen used is to display a low quality version that is not watermarked, but restrict the full quality version to only those who are supposed to see it.
Yes it is possible. All you have to do is,
Call the download function, in which we can implement the downloading of watermarked images.
I have used AngularJS, HTML, JQuery and watermarkJS which you find here(http://brianium.github.io/watermarkjs/)
HTML:
Download Sample
Javascript:
$scope.selectedWatermarkType = 'Text';
$scope.selectedPosition = 'Bottom-left';
$scope.text = 'Sample Watermark';
$scope.size = '45';
$scope.selectedFont = 'Arial';
$scope.ColorCodeGlobalObj.colorcode = 'ffff';
$scope.DownloadSample = function () {
if ($scope.selectedWatermarkType == 'Text') {
if ($scope.selectedPosition == 'Bottom-left') {
watermark(['/assets/js/node_modules/watermarkjs/examples/img/shepherd.jpg'])
.image(watermark.text.lowerRight($scope.text, $scope.size + 'px ' + $scope.selectedFont, '#' + $scope.ColorCodeGlobalObj.colorcode, 0.5))
.then(function (img) {
saveImageAs(img);
});
}
}
'img' is the watermarked image object which can be used to download the image.
function saveImageAs(imgOrURL) {
imgOrURL.src.replace('image/png', 'image/octet-stream');
if (typeof imgOrURL == 'object')
imgOrURL = imgOrURL.src;
var link = document.createElement("a");
link.setAttribute("href", imgOrURL);
link.setAttribute("download", 'watermarkSample.png');
link.click();
}
This code performs download of watermarked image. Still the unwatermarked image is available in the mentioned srcpath which can be appended to an 'img' tag and can be viewed.
Hope this helps !