Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save landsurveyorsunited/6e137b56fdf9a0318a3a to your computer and use it in GitHub Desktop.
Save landsurveyorsunited/6e137b56fdf9a0318a3a to your computer and use it in GitHub Desktop.
A Pen by JFarrow.
<div class="linkinator">
<h1>Google Drive Asset Link Converter</h1>
<p>You can use Google Drive to host web assets &mdash; icons, font files, stylesheets, .js files, etc. But the share link needs a little tweak to turn it into a direct link to your asset. This converter does it for you. </p>
<p>Paste in the "Link to Share" link for your <strong>PUBLIC ON THE WEB FILE</strong> and press the "Create Direct URL" button to get the direct link to your web asset.</p>
<p><strong>Note:</strong> you can only link individual public files as assets, not folders. If your file is inside a folder, that folder must be public.</p>
<form>
<input type="text" length="150" class="link"></input>
<button>Create Direct URL</button>
</form>
<p class="results"></p>
</div>
$( document ).ready(function() {
$('form').on('submit', function (e) {
e.preventDefault();
var yourlink = $('input[type="text"]').val();
var link = yourlink.trim();
if (link.indexOf('drive.google.com') == -1 || link.indexOf('file') == -1) {
$('.results').show().text('Sorry, this only works on the public sharing link of Google Drive files');
return false;
}
var pattern = /[0-9]/;
var place = link.search(pattern);
var urlkey = link.substr(place);
var finalkey = urlkey.split('/')[0];
$('.results').show().text('https://googledrive.com/host/' + finalkey);
});
});
@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great);
@import url(http://fonts.googleapis.com/css?family=Buda);
body {
background: rgb(195,217,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(195,217,255) 0%, rgb(177,200,239) 41%, rgb(152,176,217) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(195,217,255)), color-stop(41%,rgb(177,200,239)), color-stop(100%,rgb(152,176,217))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d9ff', endColorstr='#98b0d9',GradientType=0 ); /* IE6-9 */
font-family: 'Buda', sans-serif;
}
.linkinator {
width: 65%;
margin: 0 auto;
}
h1 {
font-family: 'Fredericka the Great', serif;
font-size: 2.5em;
color: rgba(76, 76, 76,);
text-shadow: 0px 1px 1px white;
}
p {
font-size: 1.2em;
width: 85%;
font-family: 'Buda', sans-serif;
}
input[type='text'] {
width: 75%;
height: 2.5em;
}
button {
border: none;
font-size: inherit;
color: inherit;
background: none;
cursor: pointer;
padding: 15px;
font-weight: 700;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
background: rgb(126, 70, 116);
color: #fff;
box-shadow: 0 6px rgb(94, 53, 87);
-webkit-transition: none;
-moz-transition: none;
transition: none;
border-radius: 0 0 5px 5px;
}
button:hover {
box-shadow: 0 4px rgb(94, 53, 87);
top: 2px;
}
button:active {
box-shadow: 0 0 rgb(94, 53, 87);
top: 6px;
}
.results {
display: none;
width: 85%;
background-color: white;
color: rgb(177, 99, 163);
padding: 1em;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment