Randomized Image Builder

Link to article: Randomized Image Builder.
(none)
```
width:' + width + ';
```
```
widget-shell
```
```
widget-card
```
```
widget-grid
```
```
widget-full
```
```
widget-full
```
```
widget-buttons
```
```
widget-note
```
```
widget-status
```
```
widget-full
```
```
output-label
```
```
randomiser
```
```
scp-image-block
```
```
block-'
```
```
+
```
```
align
```
```
+
```
```
'
```
```
random-image-block
```
```
random-image-frame
```
```
scp-image-caption
```
```
randomiser
```
```
random-image-option
```
```
random-image-option-'
```
```
+
```
```
(i
```
```
+
```
```
1)
```
```
+
```
```
'
```
[[include :scp-wiki:component:sigma-plus]]
[[include :scp-wiki:component:toggle-sidebar]]

[[>]]
[[module rate]]
[[/>]]

This generator builds Wikidot markup for a randomized image, entirely within CSS, using no JS or HTML blocks.

It uses the **moderators** variable within the **Members** module to access a browser-side random number, then maps the end digits from that number to each of your supplied images. Use it to make either an SCP image block or a plain image, with support for different bucket sizes and automatic aspect-ratio calculation.

Shoutout to [[*user EstrellaYoshte]] for originally discovering this method of randomisation within CSS.
If any issues arise while using this, please PM them to [[*user wackdog]].
No data inputted here is saved or stored.

[[collapsible show="+ More details on each field" hide="- Hide "]]
||~ Field ||~ Description ||
|| Mode || Chooses the output type: a styled image block or a plain {{@@[[image ...]]@@}} random image. ||
|| Bucket mode || Sets how many number endings are available for image distribution: 1 digit for up to 10 images, or 2 digits for up to 100 images. ||
|| Block width || Sets the width of the generated image block, such as {{300px}}. ||
|| Alignment || Positions the image block to the left, right, or center. ||
|| Caption || Adds the caption text shown beneath the image block. ||
|| Image width || The original width of the source image, used to calculate the aspect ratio for the generated CSS. ||
|| Image height || The original height of the source image, used to calculate the aspect ratio for the generated CSS. ||
|| Image fit || Controls whether the image fills the frame ({{cover}}) or stays fully visible inside it ({{contain}}). ||
|| Image URLs || A list of source image URLs, one per line, used for the randomized output. ||
|| Copy output || Copies the generated result for pasting into a page. ||
[[/collapsible]]

[[html]]
<style>
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #fefefe;
    color: #633;
}

.widget-shell {
    max-width: 900px;
    margin: 1.5em auto;
    background: #fefefe;
    color: #633;
}

.widget-shell h2 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #b01;
    font-size: 2rem;
    line-height: 1.1;
}

.widget-subtitle {
    color: #595959;
    margin-top: 0;
    margin-bottom: 24px;
}

.widget-card {
    background: #fff;
    border: 1px solid #600;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(102, 0, 0, .5);
}

.widget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.widget-full {
    grid-column: 1 / -1;
}

.widget-shell label {
    display: block;
    font-weight: bold;
    color: #600;
    margin-bottom: .35rem;
}

.widget-shell input,
.widget-shell select,
.widget-shell textarea,
.widget-shell button {
    box-sizing: border-box;
    width: 100%;
    font: inherit;
}

.widget-shell input,
.widget-shell select,
.widget-shell textarea {
    border: 1px solid #600;
    border-radius: 8px;
    padding: .6rem .7rem;
    background: #fff;
    color: #222;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}

.widget-shell input:focus,
.widget-shell select:focus,
.widget-shell textarea:focus {
    outline: 2px solid rgba(176, 0, 17, .2);
    border-color: #b01;
}

.widget-shell input,
.widget-shell select {
    min-height: 2.4rem;
}

.widget-shell textarea {
    resize: vertical;
    line-height: 1.45;
}

#ri-urls {
    min-height: 24rem;
}

#ri-all-out {
    min-height: 40rem;
    font-family: Consolas, "Courier New", monospace;
    font-size: .95rem;
}

.widget-shell button {
    width: auto;
    padding: 12px 18px;
    border: 1px solid #444;
    border-radius: 10px;
    background: #2a2a2a;
    background-image: linear-gradient(to bottom, #966, #633, #300);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.widget-shell button:hover {
    background: #633;
    background-image: linear-gradient(to bottom, #a77, #744, #411);
}

.widget-shell button:active {
    transform: translateY(1px);
}

.widget-buttons {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.widget-note {
    margin-top: .5rem;
    font-size: .95em;
    color: #595959;
}

.widget-status {
    color: #595959;
    margin-top: .5rem;
    font-size: .95em;
}

.output-label {
    margin-top: .5rem;
}

@media (max-width: 768px) {
    .widget-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="widget-shell">
    <div class="widget-card">
        <div class="widget-grid">
            <div>
                <label for="ri-mode">Mode</label>
                <select id="ri-mode">
                    <option value="block" selected>Image block</option>
                    <option value="plain">Plain image ([[image ...]])</option>
                </select>
            </div>

            <div>
                <label for="ri-buckets">Bucket mode</label>
                <select id="ri-buckets">
                    <option value="1" selected>1 digit (up to 10 images)</option>
                    <option value="2">2 digits (up to 100 images)</option>
                </select>
            </div>

            <div id="ri-width-row">
                <label for="ri-width">Block width</label>
                <input id="ri-width" value="300px">
            </div>

            <div id="ri-align-row">
                <label for="ri-align">Alignment</label>
                <select id="ri-align">
                    <option value="right" selected>right</option>
                    <option value="left">left</option>
                    <option value="center">center</option>
                </select>
            </div>

            <div id="ri-caption-row">
                <label for="ri-caption">Caption</label>
                <input id="ri-caption" value="Rotating header image">
            </div>

            <div id="ri-img-width-row">
                <label for="ri-img-width">Image width</label>
                <input id="ri-img-width" type="number" min="1" step="1" value="1200">
            </div>

            <div id="ri-img-height-row">
                <label for="ri-img-height">Image height</label>
                <input id="ri-img-height" type="number" min="1" step="1" value="800">
            </div>

            <div id="ri-fit-row">
                <label for="ri-fit">Image fit</label>
                <select id="ri-fit">
                    <option value="cover" selected>cover</option>
                    <option value="contain">contain</option>
                </select>
            </div>

            <div class="widget-full">
                <label for="ri-urls">Image URLs, one per line</label>
                <textarea id="ri-urls">https://example.com/image-1.jpg
https://example.com/image-2.jpg
https://example.com/image-3.jpg</textarea>
            </div>

            <div class="widget-full">
                <div class="widget-buttons">
                    <button type="button" id="ri-generate">Generate</button>
                    <button type="button" id="ri-copy-all">Copy output</button>
                </div>
                <div class="widget-note">
                    1-digit mode supports up to 10 images. 2-digit mode supports up to 100 images.
                </div>
                <div class="widget-status" id="ri-status"></div>
            </div>

            <div class="widget-full">
                <label class="output-label" for="ri-all-out">Combined output</label>
                <textarea id="ri-all-out" readonly></textarea>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    function byId(id) {
        return document.getElementById(id);
    }

    function escCssUrl(str) {
        return str.replace(/"/g, '\\"');
    }

    function normaliseUrls(raw) {
        return raw
            .split(/\r?\n/)
            .map(function (s) { return s.trim(); })
            .filter(Boolean);
    }

    function bucketGroups(count, digits) {
        var total = digits === 2 ? 100 : 10;
        var groups = [];

        for (var i = 0; i < count; i++) {
            var start = Math.floor(i * total / count);
            var end = Math.floor((i + 1) * total / count) - 1;
            groups.push({ start: start, end: end });
        }

        return groups;
    }

    function pad(num, digits) {
        var s = String(num);
        while (s.length < digits) s = "0" + s;
        return s;
    }

    function gcd(a, b) {
        a = Math.abs(a);
        b = Math.abs(b);

        while (b) {
            var t = b;
            b = a % b;
            a = t;
        }

        return a || 1;
    }

    function getAspectRatio() {
        var w = parseInt(byId('ri-img-width').value, 10);
        var h = parseInt(byId('ri-img-height').value, 10);

        if (!w || !h || w < 1 || h < 1) {
            return '';
        }

        var divisor = gcd(w, h);
        return (w / divisor) + ' / ' + (h / divisor);
    }

    function buildBlockMarkup(width, align, caption) {
        return [
            '[[div class="randomiser"]]',
            '[[module Members group="moderators"]]',
            '[[/div]]',
            '',
            '[[div class="scp-image-block block-' + align + ' random-image-block" style="width:' + width + ';"]]',
            '[[div class="random-image-frame"]]',
            '[[/div]]',
            '[[div class="scp-image-caption"]]',
            caption,
            '[[/div]]',
            '[[/div]]'
        ].join("\n");
    }

    function buildPlainMarkup(urls) {
        var lines = [
            '[[div class="randomiser"]]',
            '[[module Members group="moderators"]]',
            '[[/div]]',
            ''
        ];

        for (var i = 0; i < urls.length; i++) {
            lines.push('[[div class="random-image-option random-image-option-' + (i + 1) + '"]]');
            lines.push('[[image ' + urls[i] + ']]');
            lines.push('[[/div]]');
            lines.push('');
        }

        return lines.join("\n").replace(/\n+$/, '');
    }

    function buildBlockCss(urls, ratio, fit, digits) {
        var groups = bucketGroups(urls.length, digits);
        var lines = [];

        lines.push('.randomiser { display: none; }');
        lines.push('');
        lines.push(':root { --random-image: url("' + escCssUrl(urls[0]) + '"); }');
        lines.push('');

        for (var i = 0; i < groups.length; i++) {
            var selectors = [];
            for (var n = groups[i].start; n <= groups[i].end; n++) {
                selectors.push('[id$="' + pad(n, digits) + '"]');
            }

            lines.push(
                ':root:has(.randomiser :is(' + selectors.join(', ') + ')) { --random-image: url("' + escCssUrl(urls[i]) + '"); }'
            );
        }

        lines.push('');
        lines.push('.random-image-block .random-image-frame {');
        lines.push('  width: 100%;');
        lines.push('  aspect-ratio: ' + ratio + ';');
        lines.push('  background-image: var(--random-image);');
        lines.push('  background-size: ' + fit + ';');
        lines.push('  background-position: center;');
        lines.push('  background-repeat: no-repeat;');

        if (fit === 'contain') {
            lines.push('  background-color: #fff;');
        }

        lines.push('}');

        return lines.join("\n");
    }

    function buildPlainCss(urls, digits) {
        var groups = bucketGroups(urls.length, digits);
        var lines = [];

        lines.push('.randomiser { display: none; }');
        lines.push('.random-image-option { display: none; }');
        lines.push('');

        for (var i = 0; i < groups.length; i++) {
            var selectors = [];
            for (var n = groups[i].start; n <= groups[i].end; n++) {
                selectors.push('[id$="' + pad(n, digits) + '"]');
            }

            lines.push(
                ':root:has(.randomiser :is(' + selectors.join(', ') + ')) .random-image-option-' + (i + 1) + ' { display: block; }'
            );
        }

        return lines.join("\n");
    }

    function updateModeUI() {
        var isBlock = byId('ri-mode').value === 'block';
        var rows = [
            'ri-width-row',
            'ri-align-row',
            'ri-caption-row',
            'ri-img-width-row',
            'ri-img-height-row',
            'ri-fit-row'
        ];

        for (var i = 0; i < rows.length; i++) {
            byId(rows[i]).style.display = isBlock ? '' : 'none';
        }
    }

    function updateStatus(urls, digits) {
        var maxImages = digits === 2 ? 100 : 10;
        byId('ri-status').textContent = urls.length + ' image' + (urls.length === 1 ? '' : 's') + ' detected / max ' + maxImages + ' for this mode.';
    }

    function generate() {
        var mode = byId('ri-mode').value;
        var width = byId('ri-width').value.trim();
        var align = byId('ri-align').value;
        var caption = byId('ri-caption').value;
        var ratio = getAspectRatio();
        var fit = byId('ri-fit').value;
        var digits = parseInt(byId('ri-buckets').value, 10);
        var urls = normaliseUrls(byId('ri-urls').value);
        var maxImages = digits === 2 ? 100 : 10;

        updateStatus(urls, digits);

        if (!urls.length) {
            alert('Please enter at least one image URL.');
            return;
        }

        if (urls.length > maxImages) {
            alert('This bucket mode supports up to ' + maxImages + ' images. You entered ' + urls.length + '.');
            return;
        }

        if (mode === 'block' && (!width || !ratio)) {
            alert('Please fill in block width, image width, and image height for image block mode.');
            return;
        }

        var markup;
        var css;

        if (mode === 'block') {
            markup = buildBlockMarkup(width, align, caption);
            css = buildBlockCss(urls, ratio, fit, digits);
        } else {
            markup = buildPlainMarkup(urls);
            css = buildPlainCss(urls, digits);
        }

        var combined = markup + "\n\n[[module css]]\n" + css + "\n[[/module]]";
        byId('ri-all-out').value = combined;
    }

    function copyFrom(id) {
        var el = byId(id);
        el.focus();
        el.select();
        try {
            document.execCommand('copy');
        } catch (e) {}
    }

    byId('ri-mode').addEventListener('change', function () {
        updateModeUI();
        generate();
    });

    byId('ri-buckets').addEventListener('change', function () {
        var digits = parseInt(byId('ri-buckets').value, 10);
        var urls = normaliseUrls(byId('ri-urls').value);
        updateStatus(urls, digits);
    });

    byId('ri-urls').addEventListener('input', function () {
        var digits = parseInt(byId('ri-buckets').value, 10);
        var urls = normaliseUrls(byId('ri-urls').value);
        updateStatus(urls, digits);
    });

    byId('ri-generate').addEventListener('click', generate);
    byId('ri-copy-all').addEventListener('click', function () {
        copyFrom('ri-all-out');
    });

    updateModeUI();
    generate();
}());
</script>
[[/html]]

[[include :scp-wiki:component:license-box]]
[[include :scp-wiki:component:license-box-end]]
Randomized Image Builder

Module Styles

Inline Styles

Includes

CSS Classes

Page Source
