Arrange Imgur upload posts in a grid layout.
// ==UserScript==
// @name Imgur Upload Posts Grid Layout
// @namespace http://tampermonkey.net/
// @version 0.3
// @description Arrange Imgur upload posts in a grid layout.
// @author Byakuran
// @match https://imgur.com/a/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=imgur.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Create and inject CSS
const style = document.createElement('style');
style.textContent = `
/* Toggle button styles */
#gridLayoutToggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
padding: 8px 16px;
background: #1bb76e;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s;
}
#gridLayoutToggle:hover {
background: #159157;
}
/* Grid layout styles */
.has-min-posts .UploadPost {
width: auto !important;
margin-left: 20px !important;
}
.has-min-posts .Upload-container > :nth-child(2):not(.UploadPost) {
margin-right: 40px !important;
}
.has-min-posts .UploadPost-files > .PostContent.UploadPost-file {
flex: 0 0 auto;
width: calc(33.33% - 10px);
min-width: 200px;
margin: 0 !important;
}
.has-min-posts .UploadPost-files {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
}
.has-min-posts .UploadPost-files > :first-child:not(.PostContent.UploadPost-file),
.has-min-posts .UploadPost-files > :last-child:not(.PostContent.UploadPost-file) {
width: 100% !important;
flex: none !important;
}
.ImageDescription {
max-height: 2.4em;
overflow: hidden;
position: relative;
cursor: pointer;
transition: max-height 0.3s ease-out;
padding-right: 25px;
}
.ImageDescription.expanded {
max-height: 1000px;
}
.ImageDescription::after {
content: "▼";
position: absolute;
bottom: 0;
right: 0;
background: linear-gradient(90deg, transparent, #1a3c6e 20%);
padding: 0 5px;
color: white;
}
.ImageDescription.expanded::after {
content: "▲";
background: linear-gradient(90deg, transparent, #1a3c6e 20%);
color: white;
}
`;
document.head.appendChild(style);
// Create toggle button
const toggleButton = document.createElement('button');
toggleButton.id = 'gridLayoutToggle';
toggleButton.textContent = 'Disable Grid Layout';
document.body.appendChild(toggleButton);
// Get layout preference from localStorage
let isGridEnabled = localStorage.getItem('imgurGridLayout') !== 'disabled';
// Function to reset grid application state
function resetGridState() {
const containers = document.querySelectorAll('.UploadPost-files');
containers.forEach(container => {
container.removeAttribute('data-grid-applied');
});
}
// Update button text and layout based on current state
function updateLayoutState() {
toggleButton.textContent = isGridEnabled ? 'Disable Grid Layout' : 'Enable Grid Layout';
document.body.classList.remove('has-min-posts');
resetGridState();
if (isGridEnabled) {
applyChanges();
}
}
// Toggle button click handler
toggleButton.addEventListener('click', () => {
isGridEnabled = !isGridEnabled;
localStorage.setItem('imgurGridLayout', isGridEnabled ? 'enabled' : 'disabled');
updateLayoutState();
});
function makeDescriptionsExpandable() {
const descriptions = document.querySelectorAll('.ImageDescription:not([data-expandable])');
descriptions.forEach(desc => {
desc.setAttribute('data-expandable', 'true');
desc.addEventListener('click', function() {
this.classList.toggle('expanded');
});
});
}
// Function to apply layout and make descriptions expandable
function applyChanges() {
if (!isGridEnabled) return;
const containers = document.querySelectorAll('.UploadPost-files');
containers.forEach(container => {
if (!container.dataset.gridApplied) {
const posts = container.querySelectorAll(':scope > .PostContent.UploadPost-file');
if (posts.length >= 3) {
container.dataset.gridApplied = 'true';
document.body.classList.add('has-min-posts');
}
}
});
makeDescriptionsExpandable();
}
// Initial application
updateLayoutState();
// Monitor for dynamic content
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length) {
applyChanges();
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
})();