I found many questions about Retina Display, but none of the answers were on the server side.
I would like to deliver a different image according to the screen, ex (in PHP):
if( $is_retina)
$thumbnail = get_image( $item_photo, 'thumbnail_retina' ) ;
else
$thumbnail = get_image( $item_photo, 'thumbnail' ) ;
Can you see a way of dealing with this?
I can only imagine a test in JavaScript, setting a Cookie. However this requires an initial exchange to set it. Anyone have a better solution?
Cookie setting code:
(function(){
if( document.cookie.indexOf('device_pixel_ratio') == -1
&& 'devicePixelRatio' in window
&& window.devicePixelRatio == 2 ){
document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';';
window.location.reload();
}
})();
Alright since it seems there's no better way for the moment, here is my solution combining JS, PHP and Cookies.
I hope there will be better answers in the future
<?php
if( isset($_COOKIE["device_pixel_ratio"]) ){
$is_retina = ( $_COOKIE["device_pixel_ratio"] >= 2 );
if( $is_retina)
$thumbnail = get_image( $item_photo, 'thumbnail_retina' ) ;
else
$thumbnail = get_image( $item_photo, 'thumbnail' ) ;
}else{
?>
<script language="javascript">
(function(){
if( document.cookie.indexOf('device_pixel_ratio') == -1
&& 'devicePixelRatio' in window
&& window.devicePixelRatio == 2 ){
var date = new Date();
date.setTime( date.getTime() + 3600000 );
document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';' + ' expires=' + date.toUTCString() +'; path=/';
//if cookies are not blocked, reload the page
if(document.cookie.indexOf('device_pixel_ratio') != -1) {
window.location.reload();
}
}
})();
</script>
<?php } ?>
in function.php :
add_action( 'init', 'CJG_retina' );
function CJG_retina(){
global $is_retina;
$is_retina = isset( $_COOKIE["device_pixel_ratio"] ) AND $_COOKIE["device_pixel_ratio"] >= 2;
}
Then after I can use the following GLOBAL:
global $is_retina; or $GLOBALS['is_retina'];
As you do not specify for what exact use-case you are needing this and i do not really see a use-case for the server knowing what resolution the client wants it's images in (in my opinion the client should decide) here is my suggestion:
Use something like Retina.js or use the srcset attribute <img src="low-res.jpg" srcset="medium-res.jpg 1.5x, high-res.jpg 2x">
This way you could also leverage browser caching of the images. which you can't do if you have one url for two different image sizes. Even if its an automatically created/updated image caching works using last-modified or etag headers.
I'm not sure exactly how, but the pure PHP way of figuring this out would be using get_browser which returns the browser version and SOME capabilities. This may be able to tell you some information that MAY lead to whether its running on a retina.
http://php.net/manual/en/function.get-browser.php
Additionally, you can look at $_SERVER['HTTP_USER_AGENT'] which will tell you the things about the device. then you need a list of Devices that have retinas and do a comparison to get the answer.
Doing your retina detection in the JS is probably much easier and foolproof.
Related
I have a website(www.website.com) and a mobile site (m.website.com) and I'm trying to allow users to "View Full Site" if they want from mobile. Currently I am using some Javascript to check screen width on full site then redirecting to mobile.
if (screen.width <= 699) {
document.location = "http://m.website.com";
}
This works fine. On the mobile site there is a "View Full Site" button. When you click this it redirects you to my script "force_desktop.php" which sets a cookie and then sends you to the main site.
<?php
setcookie("force_desktop", "1");
header("Location: http://www.mywebsite.com");
?>
Now that we set a cookie and redirected to the main website we need to check for the cookie instead of just checking for the screen width.
Logic
If Cookie force_desktop is found
Then exit
Else
run screen size test
Here is the code I attempted to use but doesn't work. This code is placed in my head.php file which will be run on every page and is placed between the script opening and closing tags.
Attempt 1
if($_COOKIE['force_desktop'] == '1' {
exit;
} else if($_COOKIE['force_desktop'] != '1' {
if (screen.width <= 699) {
document.location = "http://m.website.com";
}
};
Attempt 2
if(isset ($_COOKIE["force_desktop"])){
exit;
else
if (screen.width <= 699) {
document.location = "http://m.mywebsite.com";
};
Alternative logic that could work
IF Cookie force_desktop is not found AND screen.width <= 699
Then redirect to m.myseite.com
Else
Exit
Note
I have run the following script to make sure a cookie is being placed, and it is.
<?php
print_r($_COOKIE);
?>
I've run out of ideas and know my coding isn't correct, especially the If/Else statement within the If/Else statement. I also am not sure if it is better to use the "isset" to see if the cookie is being used or ($_COOKIES['variable'] == "#"). I'd really appreciate some good feedback on this one.
Thanks in advance for your help and suggestions,
Matt
You're mixing JavaScript and PHP. You're trying to use screen.width in your PHP script, which doesn't make sense. You need to use an echo statement to output the JavaScript into the page. It'll then check the user's screen resolution and do the redirect.
Try this:
if(isset ($_COOKIE["force_desktop"])){
exit;
}
else
{
echo '<script>
if (screen.width <= 699) {
document.location = "http://m.mywebsite.com";}
</script>';
};
you should do this test at the top of the php page, and for sure you cannot mix php and java script like this
u can alter this code like
<?php
$flag = 0;
if(isset($_COOKIE['force_desktop']))$flag++;
?>
later in the page use the code as soon as <head> tag starts
..
..
<head>
<?php
if(!$flag){
echo '<script>
if (screen.width <= 699) {
document.location = "http://m.mywebsite.com";
</script>';
}
?>
You cannot mix javascript and PHP, javascript is front end and PHP is back end. Try something like this:
if( $something ){
Header("Location: somewhere.php");
}
okay here is my code :
var co = 0;
var comp = '';
<?php $i = 0;?>
while (co < <?php echo $db->count_rows(); ?>)
{
if ((parseInt(value) >= <?php echo $mfr[$i] ?>) && (parseInt(value) <= <?php echo $mto[$i] ?>))
{
comp = 'T';
break;
}
co++;
<?php $i++; ?>
}
i'm still learning about this whole php and javascript thing, and i know there are many things that i still had to work to to improve my understanding to this both language. that's why i really need your help in this
i'm trying to get the while iteration to work so i can compare the variable from javascript with variable from php which took the value from database. the php variable ('$mfr' and '$mto'), as you can see, is an array. now i want it to look at every element of both and if it meets the condition then it will update the variable 'comp' and stop the whole while iteration
but the problem is the '$i' variable doesn't do the iteration thing. it runs only once so my '$mfr' and '$mto' value doesn't go anywhere. how can i fix this so i can compare the javascript value with the php '$mfr' and '$mto' value?
your help would be much appreciated, thank you :)
EDIT
well, it is actually a function of custom validation for jqgrid.
and i do know that php is a server-side and javascript is a client-side language theoretically, though i don't really know it is practically
what i'm actually trying to do is when a user input a value and submit it, the system will check whether the value that was entered are between value of 'fromid' and 'toid' column of a table in database
here is my full code of the function
function checkid(value)
{
var co = 0;
var comp = '';
<?php $i = 0;?>
while (co < <?php echo $db->count_rows(); ?>)
{
if ((parseInt(value) >= <?php echo $mfr[$i] ?>) && (parseInt(value) <= <?php echo $mto[$i] ?>))
{
comp = 'T';
break;
}
co++;
<?php echo $i++; ?>
}
if (comp != 'T')
{
return [true, "", ""];
}
else
{
return [false, "Value entered is already between a range. Please try again!", ""];
}
}
while this is how i got the '$mfr' and '$mto' variable
<?php
$db=new database($dbtype, $dbhost, $database, $dbuser, $dbpassword, $port, $dsn);
$db->query("select fromid, toid from CORE_ID");
$i = 0;
while($row = $db->get_row())
{
$mfr[$i] = $row[fromid];
$mto[$i] = $row[toid];
$i++;
}
?>
if theres any better way to do this, then please do tell me
Typically, PHP is for server side logic and JS is for client side logic. If you want to send a value from JS to be processed in PHP, you'll probably need to use something like AJAX, which jQuery makes pretty easy with jQuery.ajax().
Getting the client value to be processed is the difficult part. Once you can do that, rewriting your code logic in full PHP should not be difficult.
EDIT: If I'm misunderstanding where variable value comes from, please say so!
EDIT 2: It looks like you want to have client input compared to server side data. JS will not have access to your PHP variables unless they are specifically sent there. Likewise, you can send your JS value to the server for validation in the PHP.
In your case, you could use JSON to send send the JS your validation dates. Assuming you don't have too many dates, it will probably be faster than sending a value to the server and waiting for a response.
I found a good example of using JSON at another post. You can send an array like:
<?php
$xdata = array(
'foo' => 'bar',
'baz' => array('green','blue')
);
?>
<script type="text/javascript">
var xdata = <?php echo json_encode($xdata); ?>;
alert(xdata['foo']);
alert(xdata['baz'][0]);
// Dot notation can be used if key/name is simple:
alert(xdata.foo);
alert(xdata.baz[0]);
</script>
For your code, you could put $mfr and $mto into a single 2D array. Here is how your new JS might look, assuming xdata contains $mfr and $mto:
function checkid(value) {
var co = 0, comp = '', i = 0, nrows = xdata.mfr.length;
while (co < nrows) {
if ((parseInt(value) >= xdata.mfr[i]) && (parseInt(value) <= xdata.mto[i])) {
comp = 'T';
break;
}
co++;
i++;
}
if (comp != 'T') {
return [true, "", ""];
} else {
return [false, "Value entered is already between a range. Please try again!", ""];
}
}
You have a loop in your Javascript, not your PHP. So the PHP is only going to get executed once. You need to rethink your approach. Without knowing what the script is supposed to actually achieve it's difficult to provide working code, but you at least need to put the loop into the PHP instead of the Javascript.
Before I can answer you should understand what's going on exactly:
PHP is being executed on the server, then sends back the result (HTML and Javascript) to the client (the browser).
Javascript is being executed on the client side. So this only starts after PHP is completely done. For this reason you can't mix Javascript and PHP.
Check the source of the page, then you'll see exactly what the server returns (what HTML/Javascript PHP generates) and you'll get a better insight of what happens.
Now, if you understand this, you may be able to solve your own problem. I don't exactly know what you want to do, but I can advice you that if you need Javascript to check values from the database, you should generate Javascript using PHP that defines these values in the Javascript like for example this:
var my_js_var = <?=$my_php_var?>
var another_var = <?=$another_one?>
Now they are defined in Javascript and you can use them (and check them).
When you have a large database it can become inefficient to do it like this and you might want to look into a technology called AJAX, which allows Javascript to do a request to the server and get back data from a PHP script.
You would also want to do this if there's data involved you don't want to be publicly viewable (because everyone can look into the source of your page.
In all major browsers, except Internet Explorer, the following script returns the page to its previous vertical position on reload:
<?php $y = $_COOKIE["y"]; ?> //in head tag before any output
and
<?php
print "<body onScroll=\"document.cookie='y=' + window.pageYOffset\" onLoad='window.scrollTo(0,$y)'>";
Can someone please tell me how I would modify this code to remember the page's vertical position in IE? Thanks.
From w3Schools :
IE 8 and earlier does not support this property, but may use "document.body.scrollLeft" and "document.body.scrollTop" instead.
I use the following code to do basic IE/not-IE browser detection:
if(document.all) { //if IE
//code
} else { //if not IE
//code
}
You should be able to combine this with AlecTMH's document.body.scrollLeft and document.body.scrollTop suggestion to get where you're going. But you're likely going to have to write a function for it and then call that in onScroll().
I'm not exactly a JavaScript wiz, but...
function blah() {
if(document.all) { //if IE
document.cookie='y=' + document.body.scrollTop
} else { //if not IE
document.cookie='y=' + window.pageYOffset
}
}
...might almost be functional code.
I might worrying way too much here, but here it goes...
I have set up google analytic campaign tracking URLs using the google campaign link builder.
Which is great, but I have like 20 different tracking urls, and more to come.
These URLs are really ugly and I'm not a fan of the visitor seeing this long tracking url on there first visit to my site.
So this is my idea/theory that I want to put on my wordpress site. If anyone would be kind enough to help with the php writing part of it, I would be very grateful. Or any advice if the idea is a bad one.
For example, these are just some of my URL's
http://example.com/?utm_source=Company&utm_medium=MPU&utm_campaign=Promo
http://example.com/?utm_source=Company&utm_medium=Leaderboard&utm_campaign=Promo
http://example.com/?utm_source=Company&utm_medium=Take%2BOver&utm_campaign=Promo
I would like to instantly redirect all of the above urls too...
http://example.com/
Using php in my header.php or functions.php
Is there some how this can be written so I can simply add new tracking urls in an array/case perhaps.
Any suggestions would be great thanks!
Please don't laugh as this - but at a guess this is what I'm trying to do...
$landing = $_SERVER['REQUEST_URI'];
$campaigns = array(
"http://example.com/?utm_source=Company&utm_medium=MPU&utm_campaign=Promo",
"http://example.com/?utm_source=Company&utm_medium=Leaderboard&utm_campaign=Promo",
"http://example.com/?utm_source=Company&utm_medium=Take%2BOver&utm_campaign=Promo"
);
if ( $campaigns == $landing ) {
header( 'Location: http://example.com/' ) ;
}
Try this,
this is pure javascript to clear utm_params from url after load the page.
function clear_utm_from_url(){
var currentLocation = window.location.search.replace(/\?/g, '').split('&');
var new_url = new Array();
for( i = 0; i < currentLocation.length; i++){
var q = currentLocation[i].split('=');
if( q[0].search("utm_") ){
new_url.push(currentLocation[i]);
}
}
if( new_url.length > 0 ){
new_url = "?"+new_url.join("&");
}else{
new_url = "";
}
history.pushState({}, "", window.location.pathname+new_url);
}
And add something like this, or others to run function
<body onload="clear_utm_from_url();">
You should not do that.
Google analytics tracking code is client side. It is a piece of js code which executes once the page is loaded. If it does not find utm_* query parameters, nothing is going to be sent to ga, so the stats you are going to see there won't be readable. Most probably you will just see the grand total in the ga ui.
If you want to do it anyway...
$trackingParams = array('utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term');
$queryParams = array();
parse_str($_SERVER['QUERY_STRING'], $queryParams);
if (count(array_intersect($queryParams, $trackingParams)) > 1) {
// This url has tracking params
foreach ($trackingParams as $paramName) {
unset($queryParams[$paramName]);
}
// You can use a regex, but i wouldn't recommend it
$newUrl = str_replace(
$_SERVER['QUERY_STRING'],
http_build_query($queryParams),
$_SERVER['REQUEST_URI']
);
header('Location: ' . $newUrl, true, 301);
exit;
}
This is code is going to search for utm_* params in current url and redirect to an url without them, leaving other query params intact.
A simple method for removing the query string:
if ($urlIsTracker) {
list($url) = explode('?', $_SERVER['REQUEST_URI']);
header("Location: $url", true, 301);
exit;
}
Update, Solved:
After all this I found out that I was calling an old version of my code in the update ajax.
'boardControl.php' instead of 'boardUpdate.php' These are the kinds of mistakes that make programing fun.
I'm writing a browser gomoku game. I have the ajax statement that allows the player to play a piece.
$(document).ready(function() {
$("td").live('click',function(){
var value = $(this).attr('id');
$.get('includes/boardControl.php',{play: value, bid: bid});
});
});
value = board square location
bid = board ID
Before creating a user login for player identification, the server side php had a temporary solution. It would rotate the piece state for the squares when clicked instead of knowing what player to create them for.
After creating login stuff I set a session variable for the player's ID. I was hoping to read the session ID from the php during the ajax request and figure out what player they are from there.
session_start();
...
$playerId = $_SESSION['char'];
$Query=("SELECT p1, p2 FROM board WHERE bid=$bid");
$Result=mysql_query($Query);
$p1 = mysql_result($Result,0,"p1");
$p2 = mysql_result($Result,0,"p2");
$newPiece = 0; //*default no player
if($playerId == $p1)
$newPiece = 1;
if($playerId == $p2)
$newPiece = 2;
For some reason when I run the full web app, the pieces still cycle though, even after I deleted the code to make them cycle.
Furthermore, after logging in If i manually load the php page in the browser, it modifies the database correctly (where it only plays pieces belonging to that player) and outputs the correct results.
It seems to me that the session is not being carried over when used with Ajax. Yet Google searches tell me that, sessions do work with Ajax.
Update: I'm trying to provide more information.
Logging in works correctly. My
ID is recognized and I printed it
out next to the board to ensure that
I was retrieving it correctly.
The ajax request does update the
board. The values passed are
correct and confirmed with firebug's
console. However instead of placing
pieces only for the player they
belong to it cycles though the piece
states (0,1,2).
When manually browsing to
boardUpdate.php and putting in the
same values sent from the Ajax the
results seen in the echo'ed response
indicates that the corresponding
piece is played each time as
intended.
Same results on my laptop after
fresh load of firefox.
Manually browsing to
boardUpdate.php without logging in
before hand leave the board
unchanged (as intended when no user
is found in the session).
I've double checked the that
session_start() is on the php files
and double checked the session ID
variables.
Hope this extra information helps, i'm running out of ideas what to tell you. Should I load up the full code?
Update 2:
After checking the Ajax responce in fire-bug I realized that the 'play' request does not get a result, and the board is not updated till the next 'update'. I'm still looking into this but I'll post it here for you guys too.
boardUpdate.php
Notable places are:
Refresh Board(line6)
Place Piece(line20)
function boardUpdate($turnCount) (line63)
<?php
session_start();
require '../../omok/dbConnect.php';
//*** Refresh Board ***
if(isset($_GET['update']))
{
$bid = $_GET['bid'];
$Query=("SELECT turn FROM board WHERE bid=$bid");
$Result=mysql_query($Query);
$turnCount=mysql_result($Result,0,"turn");
if($_GET['turnCount'] < $turnCount) //** Turn increased
{
boardUpdate($turnCount);
}
}
//*** Place Piece ***
if(isset($_GET['play'])) // turn order? player detect?
{
$squareID = $_GET['play'];
$bid = $_GET['bid'];
$Query=("SELECT turn, boardstate FROM board WHERE bid=$bid");
$Result=mysql_query($Query);
$turnCount=mysql_result($Result,0,"turn");
$boardState=mysql_result($Result,0,"boardstate");
$turnCount++;
$playerId = $_SESSION['char'];
$Query=("SELECT p1, p2 FROM board WHERE bid=$bid");
$Result=mysql_query($Query);
$p1 = mysql_result($Result,0,"p1");
$p2 = mysql_result($Result,0,"p2");
$newPiece = 0; //*default no player
if($playerId == $p1)
$newPiece = 1;
if($playerId == $p2)
$newPiece = 2;
// if($newPiece != 0)
// {
$oldPiece = getBoardSpot($squareID, $bid);
$oldLetter = $boardState{floor($squareID/3)};
$slot = $squareID%3;
//***function updateCode($old, $new, $current, $slot)***
$newLetter = updateCode($oldPiece, $newPiece, $oldLetter, $slot);
$newLetter = value2Letter($newLetter);
$newBoard = substr_replace($boardState, $newLetter, floor($squareID/3), 1);
//** Update Query for boardstate & turn
$Query=("UPDATE board SET boardState = '$newBoard', turn = '$turnCount' WHERE bid = '$bid'");
mysql_query($Query);
// }
boardUpdate($turnCount);
}
function boardUpdate($turnCount)
{
$json = '{"turnCount":"'.$turnCount.'",'; //** turnCount **
$bid = $_GET['bid'];
$Query=("SELECT boardstate FROM board WHERE bid='$bid'");
$Result=mysql_query($Query);
$Board=mysql_result($Result,0,"boardstate");
$json.= '"boardState":"'.$Board.'"'; //** boardState **
$json.= '}';
echo $json;
}
function letter2Value($input)
{
if(ord($input) >= 48 && ord($input) <= 57)
return ord($input) - 48;
else
return ord($input) - 87;
}
function value2Letter($input)
{
if($input >= 10)
return chr($input += 87);
else
return chr($input += 48);
}
//*** UPDATE CODE *** updates an letter with a new peice change and returns result letter.
//***** $old : peice value before update
//***** $new : peice value after update
//***** $current : letterValue of code before update.
//***** $slot : which of the 3 sqaures the change needs to take place in.
function updateCode($old, $new, $current, $slot)
{
if($slot == 0)
{// echo $current,"+((",$new,"-",$old,")*9)";
return letter2Value($current)+(($new-$old)*9);
}
else if($slot == 1)
{// echo $current,"+((",$new,"-",$old,")*3)";
return letter2Value($current)+(($new-$old)*3);
}
else //slot == 2
{// echo $current,"+((",$new,"-",$old,")";
return letter2Value($current)+($new-$old);
}
}//updateCode()
//**** GETBOARDSPOT *** Returns the peice value at defined location on the board.
//****** 0 is first sqaure increment +1 in reading order (0-254).
function getBoardSpot($squareID, $bid)
{
$Query=("SELECT boardstate FROM board WHERE bid='$bid'");
$Result=mysql_query($Query);
$Board=mysql_result($Result,0,"boardstate");
if($squareID %3 == 2) //**3rd spot**
{
if( letter2Value($Board{floor($squareID/3)} ) % 3 == 0)
return 0;
else if( letter2Value($Board{floor($squareID/3)} ) % 3 == 1)
return 1;
else
return 2;
}
else if($squareID %3 == 0) //**1st spot**
{
if(letter2Value($Board{floor($squareID/3)} ) <= 8)
return 0;
else if(letter2Value($Board{floor($squareID/3)} ) >= 18)
return 2;
else
return 1;
}
else //**2nd spot**
{
return floor(letter2Value($Board{floor($squareID/3)}))/3%3;
}
}//end getBoardSpot()
?>
Please help, I'd be glad to provide more information if needed.
Thanks in advance =)
From the small snippet of code we have, it's difficult to tell what your problem might be. What I can say is that session_start should be one of the first things you do on each page where you're expecting to use the session. After that, I would just immediately do a var_dump of $_SESSION to see that the data is in there (put a die right after that). It is quite possible that your true problem lies somewhere else, and that the session is in fact working. Is there a problem with your login code, for example, that is causing it to wipe out the session?
You can use Firebug to look at the raw results of your AJAX calls, which should be helpful, since your script appears to work if you directly visit the page.
Cases where I've seen sessions not work as expected have generally been that session_start is being called too often or too late. The other possibility is that you have an insanely short timeout, but that sounds unlikely.
Finally, you can make sure that your PHP install is set to use cookie sessions. It's very unlikely at this point that it wouldn't be, but you could look.
One potential problem in this code is the use of $.get - it is cached by IE, so your server code doesn't run every time. Try using $.ajax with cache set to false:
$.ajax({
type: 'GET',
url: 'includes/boardControl.php',
cache: false,
data: {play: value, bid: bid}
});
Just happened to me, in my case was that i was importing a config file with the session_start and since i had deactivated errors i couldn't see that the import was never happening. Just triple check this, I know it's the basic.