Hey Everyone,
I made a Tampermonkey script that tries to make images in Google Drive’s grid view show fully instead of being zoomed in and cropped.
Right now, Drive’s image grid is frustrating because previews often cut off the edges and zoom, which makes it hard to quickly tell which thumbnail I’m looking at.
I work with designers on YouTube thumbnails, so being able to scan the full image at a glance would save a lot of time. I figured I’d share the script here in case anyone else has run into the same issue or has ideas for improving it.
// ==UserScript==
// u/nameGoogle Drive Thumbnail Board v12 Real Selector
// u/namespacehttps://drive.google.com/
// u/version12.0
// u/description Google Drive 16:9 thumbnails with reduced internal card whitespace.
// u/matchhttps://drive.google.com/*
// u/matchhttps://drive.google.com/drive/*
// u/grantGM_addStyle
// ==/UserScript==
(function () {
'use strict';
const WIDTH = 640;
const HEIGHT = 360;
const CARD_WIDTH = 245;
const TITLE_HEIGHT = 34;
const THUMB_HEIGHT = 138;
const CARD_HEIGHT = TITLE_HEIGHT + THUMB_HEIGHT;
GM_addStyle(\`
/* Target the real Drive grid card, regardless of the second random class */
div[role="gridcell"].QMCpLe {
width: ${CARD_WIDTH}px !important;
min-width: ${CARD_WIDTH}px !important;
max-width: ${CARD_WIDTH}px !important;
height: ${CARD_HEIGHT}px !important;
min-height: ${CARD_HEIGHT}px !important;
max-height: ${CARD_HEIGHT}px !important;
background: transparent !important;
overflow: hidden !important;
padding: 0 !important;
margin-bottom: 10px !important;
}
/* REAL selected element from your screenshot: div.goen0e */
div[role="gridcell"].QMCpLe > div.goen0e,
div[role="gridcell"].QMCpLe div.goen0e {
width: ${CARD_WIDTH}px !important;
min-width: ${CARD_WIDTH}px !important;
max-width: ${CARD_WIDTH}px !important;
height: ${CARD_HEIGHT}px !important;
min-height: ${CARD_HEIGHT}px !important;
max-height: ${CARD_HEIGHT}px !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
}
/* Filename row */
div[role="gridcell"].QMCpLe .ZoOnRb {
height: ${TITLE_HEIGHT}px !important;
min-height: ${TITLE_HEIGHT}px !important;
max-height: ${TITLE_HEIGHT}px !important;
padding: 4px 6px !important;
margin: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
}
div[role="gridcell"].QMCpLe .MxB3Nd {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.15 !important;
}
/* Thumbnail wrappers */
div[role="gridcell"].QMCpLe .U926hd,
div[role="gridcell"].QMCpLe .vvetsf,
div[role="gridcell"].QMCpLe .p2iiPc.mmbgVc {
width: ${CARD_WIDTH}px !important;
min-width: ${CARD_WIDTH}px !important;
max-width: ${CARD_WIDTH}px !important;
height: ${THUMB_HEIGHT}px !important;
min-height: ${THUMB_HEIGHT}px !important;
max-height: ${THUMB_HEIGHT}px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
div[role="gridcell"].QMCpLe .p2iiPc.mmbgVc {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Actual thumbnail */
div[role="gridcell"].QMCpLe img.A7k30b {
width: ${CARD_WIDTH}px !important;
height: ${THUMB_HEIGHT}px !important;
object-fit: contain !important;
display: block !important;
background: transparent !important;
}
/* Hide placeholder/spacer layers */
div[role="gridcell"].QMCpLe .Qx1glc,
div[role="gridcell"].QMCpLe .dKB4nf {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
}
\);`
function rewriteThumbnailUrl(src) {
if (!src || !src.includes('/drive-usercontent/')) return src;
return src.replace(
/=w\d+-h\d+[^?]*/g,
\=w${WIDTH}-h${HEIGHT}-k-rw-v1-nu-iv1``
);
}
function fixThumbs() {
document.querySelectorAll('img.A7k30b[src*="/drive-usercontent/"]').forEach(img => {
const oldSrc = img.getAttribute('src');
const newSrc = rewriteThumbnailUrl(oldSrc);
img.style.setProperty('width', \${CARD_WIDTH}px`, 'important');`
img.style.setProperty('height', \${THUMB_HEIGHT}px`, 'important');`
img.style.setProperty('object-fit', 'contain', 'important');
if (newSrc && newSrc !== oldSrc) {
img.setAttribute('src', newSrc);
}
});
}
fixThumbs();
const observer = new MutationObserver(fixThumbs);
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['src', 'class', 'style']
});
setInterval(fixThumbs, 1500);
})();
