I am using the php google drive sdk, and programatically loading a document from Drive into a div. The document loads correctly and I can edit and save without issue. The problem occurs when I attempt to use the insert image dialog via the document menu, it just loads a blank white box.
What do I need to do in order to get the correct insert image dialog to load as if I was using the document directly from within drive? Below is the code I use to load the document:
function loadDocumentForView()
{
$service = buildServiceAccountService("Google Drive account");
$file = $service->files->get($_SESSION['selectedDocument']);
$name = $file->getTitle();
$ext = strtolower(substr(strrchr($name, "."), 1));
if ($ext == 'doc' || $ext == 'docx')
{
if ($_SESSION['editSelectedDocument'] == 1)
{
$path = "https://docs.google.com/document/d/" . $_SESSION['selectedDocument'] . "/edit?usp=sharing&embedded=true";
}
else
{
$path = "https://docs.google.com/a/googleAccount/document/d/" . $_SESSION['selectedDocument'] . "/preview";
}
}
else {
echo "Incorrect Format";
return;
}
$html = "";
if ($_SESSION['editSelectedDocument'] == 1)
{
$html = $html . "<div style='text-align: left; margin-right: auto; margin-left: auto; margin-bottom: 15px; width:95%;'><input driveFile='" . $_SESSION['selectedDocument'] . "' type='button' value='Save' onclick='saveChangesAndDownload(this)' style='margin-right: 5px;' fileName='" . $_SESSION['selectedDocumentName'] ."'><input currentFile='" . $_SESSION['selectedDocument'] . "' type='button' value='Exit' onclick='exitWithoutSaving(this)'>";
$html = $html . "<span id='saveFeedbackSpan' class='serverCallResult'></span></div>";
$html = $html . "<object data='" . $path . "' style='text-align: center; margin-right: auto; margin-left: auto; width:95%; height: 99%;' id='documentViewerObject' doc='" . $_SESSION['selectedDocument'] . "'></object>";
}
echo $html;
}
The problem I think is that the insert image dialog uses a google PickerBuilder that uses Google's domain as the origin and if you look at the javascript console you will see a message like
Invalid 'X-Frame-Options' header encountered when loading 'https://docs.google.com/picker?protocol=gadgets&origin=https://docs.google.…NnhLX2lIv83439cgDPmc%22%7D))&rpctoken=hyerknnixivf&rpcService=bgxw5kefbo32': 'ALLOW-FROM https://docs.google.com' is not a recognized directive. The header will be ignored.
4080223570-picker_modularized_i18n_opc__iw.js:1008 Uncaught Error: Incorrect origin value. Please set it to - (window.location.protocol + '//' + window.location.host) of the top-most page
The problem is that you need to find a way to tell the picker what the origin of the document is like specifiend in the
Picker API. I have the same issue and am still looking for a way to do that as well.
Related
I have a css media query that resizes and repositions a div. In my html that div has 2 lines but on the smaller screen I would like it displayed as 1 line.
Is there a way to ensure I have:
Website Visitors: <?php echo $data; ?>
<div class="fb-like"></div>
Instead of:
Website Visitors: <?php echo $data; ?>
<br/>
<div class="fb-like"></div>
When a screen is less than a fixed amount (in this case 460px)?
I would like to use php or css as they're what I'm using for styling in my css.php file.
Remove the <br/> add this in your css (values can be anything you want):
.fb-like {
margin-top: 10px;
}
and in your media query:
.fb-like {
margin-top: 0px;
}
Not possible with complete PHP you might need to use Javascript too !!
You can try following code to fetch screen width and height!!!
<?php
session_start();
if(isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height'])){
echo 'Screen resolution: ' . $_SESSION['screen_width'] . 'x' . $_SESSION['screen_height'];
} else if(isset($_REQUEST['width']) AND isset($_REQUEST['height'])) {
$_SESSION['screen_width'] = $_REQUEST['width'];
$_SESSION['screen_height'] = $_REQUEST['height'];
header('Location: ' . $_SERVER['PHP_SELF']);
} else {
echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height;</script>';
}
?>
Is there a gallery that have three features:
displays pictures in a lightbox
allows to import tens or hundreds of images at once from a folder
takes descriptions from file names
I have to make it on yesterday :)
I've made my own script together with original Lightbox
http://lokeshdhakar.com/projects/lightbox2/
Decided it will be much faster that way:
<?php
echo str_replace(array('<','>'), array('<','>'),'<table id="galx"><tr>');
$source_dir = 'images/taken/from/here';
$mini_dir = 'mini';
$target_dir = 'imagies/copied/to/there';
$i=0;
$images = array_diff(scandir($source_dir), array('..', '.',$mini_dir));
foreach($images as $image)
{
$filename = pathinfo($image, PATHINFO_FILENAME);
$title = mb_strtoupper(trim(str_replace('_',' ',$filename)));
$s = "<td><a href='$target_dir/$image' data-lightbox='galx' data-title='$title' >"
. "<img src='$target_dir/$mini_dir/$filename.jpg' /><br/>"
. "$title<a/></td>"; //gallery with titles
/*$s = "<td><a href='$target_dir/$image' data-lightbox='galx' >"
. "<img src='$target_dir/$mini_dir/$filename.jpg' />"
. "<a/></td>";*/ //gallery without titles
if (++$i % 5 == 0)
$s .= '</tr><tr>';
$s = str_replace(array('<','>'), array('<','>'), $s); //comment this line if want to paste it as php code
echo $s;
}
echo str_replace(array('<','>'), array('<','>'),'</tr></table>');
?>
Some basic css:
#galx {
width: 650px;
}
#galx td {
text-align: center;
}
#galx a {
display: block;
width: 120px;
font-size: 0.8em;
margin:1px auto;
text-decoration: none;
color: black;
text-align: center;
}
I've used FastStone Image Viewer to batch resize images at once and create miniatures. In app just press F3 to open advanced processing tool.
It just won't work with non-english letters on Windows - PHP bug. It still spoils first non-english letter of file name on Linux, so need to prefix '_' in such cases.
Overall good result - i've hided script somewhere on website and in 1,5 hours generated 6 galleries with ~1,5k pictures, and most of the time was consumed by file processing and copying. Not elegant but effective.
today I experimented with HTML tables and populating them from a MySQL database. My code worked well for what I needed and as is the table looked something like this:
http://codepen.io/anon/pen/ogYRwj
However I ran into a major problem when actually integrating it onto my website. I use the include statement to display my table as well as my menu to swap between all my webpages. The table was displayed like this:
So I experimented with the width of the tbody.td element and I ended up changing this code:
thead th,tbody td {
width: 20%;
float: left;
border-right: 1px solid black;
}
to this:
tbody td{
width: 10%;
float: left;
border-right: 1px solid black;
}
thead th {
width: 20%;
float: left;
border-right: 1px solid black;
}
And somehow, it freakin' worked! But the lines between the thead.th elements didn't line up with the lines of the tbody.td elements on other devices such as my android, but it worked:
The code works when I include it using the PHP statement include /path/to/file.php, but now if I try to directly view /path/to/file.php it looks really strange, similar to the first image above!
Now I can't figure out what is wrong with the first version and how to display it properly on other devices such as Android?
Please come to rescue CSS and PHP wizards!
(EDIT:
The HTML output is pretty much identical to the local except
with results from the MySQL database.
The table is put into a PHP file where I link to the CSS file using
<link rel="stylesheet" type="text/css" href="path/to/style.css">
I have one main PHP file (index.php) in which I include the PHP file containing the HTML table (logs.php) using a function called getPage.
This is the code for index.php:
<?php
require_once(dirname(__FILE__) . '/functions/functions.php');
getPage('includes','home');
?>
<html>
<head>
<title>Fågelmatare</title>
</head>
<body>
<h3>Fågelmatare</h3>
<hr />
Home |
Logs |
Videos |
About
<hr />
<?php
if(!isset($_GET['page'])){
getPage('includes','home');
}else{
getPage('includes',$_GET['page'], 'home');
}
//switch($_GET['page']{
?>
</body>
</html>
I click on the Logs hyperlink to display my table (in logs.php).
In functions.php
<?php
function getPage($dir, $filename, $default = false){
$root = $_SERVER['DOCUMENT_ROOT'];
$path = $root . '/' . $dir;
if(is_dir($path)){
if(file_exists($path . '/' . $filename . '.php')){
include $path . '/' . $filename . '.php';
return true;
}
if(file_exists($path . '/' . $filename . '.html')){
include $path . '/' . $filename . '.html';
return true;
}
if($default){
if(file_exists($path . '/' . $default . '.php')){
include $path . '/' . $default . '.php';
return true;
}
if(file_exists($path . '/' . $default . '.html')){
include $path . '/' . $default . '.html';
return true;
}
}
}
return false;
}
?>
Here is the source code for logs.php
I'm using nginx as my web server, running on a Raspberry Pi.
)
I have another approach, although cross browser support still isn't very good. It uses position:sticky so you'll need to test in Safari or enable experimental flags for position:sticky.
Here's the experiment:
http://codepen.io/jpdevries/pen/vLVbpQ?editors=1100
The idea is that you wrap the <table> in a <div>, set that <div> to position:relative then simply set the <thead> to position:sticky;top:0;.
You can then just set the max-height and overflow on the wrapper <div> to make that scrollable. As it scrolls, the <thead> will stick to the top.
It is admittedly sort of a "cheap trick" because as you can see below the scrollbar starts at the top of the <table>, not the top of the <tbody>. It is quick and easy though and should be more relevant once browser support stabilizes.
I have a small problem of needed to check which of 3 possible file paths relates to the correct image. I've always used get_headers for this in the past - but there are up to 100 images to load on any given pagination - so thats a potential of 300 get_headers in a worst case scenario and its painfully slow on my university server space.
However for any given steam_id there is the potential for images to exist at 2 of the possible file paths. Which means if I just include all three of urls and use Jquery to hide the on errors, for around half the results I end up with 2 images (which is in all fairness faster then what I'm doing currently, but at least the get_headers method looks fine.
Here's what I'm using so far:
//Use Header Response to determine which img to use
$url1 = 'http://cdn4.steampowered.com/v/gfx/apps/' . $row -> steam_id_clean . 'header_292x136.jpg';
$url2 = 'http://cdn4.steampowered.com/v/gfx/apps/' . $row -> steam_id_clean . 'header.jpg';
$header_response = get_headers($url1, 1);
if (strpos($header_response[0], "404") !== false) {
// File does not exist at url1 - recurse.
$header_response = get_headers($url2, 1);
if (strpos($header_response[0], "404") !== false) {
//File does not exist at URL - Therefore must be at URL3
echo '<img src = "http://cdn4.steampowered.com/v/gfx/subs/' . $row -> steam_id_clean . 'header.jpg" style="width: 200px; height: auto;" >';
} else {
//File exists at URL2
echo '<img src = "http://cdn4.steampowered.com/v/gfx/apps/' . $row -> steam_id_clean . 'header.jpg" style="width: 200px; height: auto;" >';
}
} else {
// File exists at URL1
echo '<img src = "http://cdn4.steampowered.com/v/gfx/apps/' . $row -> steam_id_clean . 'header_292x136.jpg" style="width: 200px; height: auto;" >';
}
This data is too dynamic - so I can't write a scrape to grab the images. Any Suggestions in a better method than get_headers would be appreciated. I don't have access to curl (unfortunately) on my university server either!
We have a small application that uses the Facebook API to retrieve the posts of an user that is logged with facebook and translate them using Bing Translate API.
When you first login the server retrieves the first 10 posts, sends them to the Bing Api for translation and then sends them to the user. When the user scrolls to the bottom of the page using AJAX the server retrieves the next 10 posts and sends them to BING for translation and inserts them in the webpage.
The problem is that like this it takes a really long time for posts to load. Is there any way to speed up the process?
Using cache to store the next posts before acctualy being needed and loading them from the cache is an option?
include 'test_translate.php';
function loadFirst($facebook){
$result = $facebook->api('/me/home?fields=from,type,story,message,picture,link,source,name,caption,description&limit=10' , 'GET');
$posts = $result['data'];
parse_str($result['paging']['next']);
?>
class="post_paging">
<?php
$toTranslate = "";
foreach($posts as $post){
$toTranslate.= "<div style=\"background-color:#72b0c9; margin:auto; padding-left:15px; padding-right:15px; padding-top:15px; padding-bottom:15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;\">
<p><a target=\"_blank\" href = \"http://www.facebook.com/\"";
$toTranslate.= $post['from']['id']."\">".$post['from']['name']."</a> </p>";
if(isset($post['story']))
$toTranslate .= "<p>" . $post['story'] . "</p>";
if(isset($post['message']))
$toTranslate .= "<p>" . $post['message'] . "</p>";
if(isset($post['picture']))
$toTranslate .= '<a target="_blank" href=' . $post['link'] . '><img src="' . $post['picture'] . '"/></a>';
if(isset($post['name']))
$toTranslate .= "<p>" . $post['name'] . "</p>";
if(isset($post['caption']))
$toTranslate .= "<p>" . $post['caption'] . "</p>";
if(isset($post['description']))
$toTranslate .= "<p>" . $post['description'] . "</p>";
$toTranslate.= "</div></br></br>";
}
$result = translate($toTranslate, 'it');
echo $result;
echo "</div>";
}
?>