Merge pull request #3222 from SillyTavern/bg-fitting Add background image fitting options

28c7dbbe1bb6c3d8797c50fa851a54d284471cec

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

public/index.html+7 -0 Viewed

                             Background Image
                         </h3>
                         <input id="bg-filter" data-i18n="[placeholder]Filter" placeholder="Filter" class="text_pole flex1" type="search" />
 +                        <select id="background_fitting" class="text_pole" data-i18n="[title]Background Fitting" title="Background Fitting">
 +                            <option value="classic" data-i18n="Classic">Classic</option>
 +                            <option value="cover" data-i18n="Cover">Cover</option>
 +                            <option value="contain" data-i18n="Contain">Contain</option>
 +                            <option value="stretch" data-i18n="Stretch">Stretch</option>
 +                            <option value="center" data-i18n="Center">Center</option>
 +                        </select>
                         <div id="auto_background" class="menu_button menu_button_icon" data-i18n="[title]Automatically select a background based on the chat context" title="Automatically select a background based on the chat context.">
                             <i class="fa-solid fa-wand-magic"></i>
                             <span data-i18n="Auto-select">Auto-select</span>

public/scripts/backgrounds.js+23 -0 Viewed

 export let background_settings = {
     name: '__transparent.png',
     url: generateUrlParameter('__transparent.png', false),
 +    fitting: 'classic',
 };
 export function loadBackgroundSettings(settings) {

     if (!backgroundSettings || !backgroundSettings.name || !backgroundSettings.url) {
         backgroundSettings = background_settings;
+    }
 +    if (!backgroundSettings.fitting) {
 +        backgroundSettings.fitting = 'classic';
 +    }
     setBackground(backgroundSettings.name, backgroundSettings.url);
 +    setFittingClass(backgroundSettings.fitting);
 +    $('#background_fitting').val(backgroundSettings.fitting);
+}
 /**

     flashHighlight(newBg);
+}
 +/**
 + * Sets the fitting class for the background element
 + * @param {string} fitting Fitting type
 + */
 +function setFittingClass(fitting) {
 +    const backgrounds = $('#bg1, #bg_custom');
 +    backgrounds.toggleClass('cover', fitting === 'cover');
 +    backgrounds.toggleClass('contain', fitting === 'contain');
 +    backgrounds.toggleClass('stretch', fitting === 'stretch');
 +    backgrounds.toggleClass('center', fitting === 'center');
 +}
++
 function onBackgroundFilterInput() {
     const filterValue = String($(this).val()).toLowerCase();
     $('#bg_menu_content > div').each(function () {

         helpString: 'Automatically changes the background based on the chat context using the AI request prompt',
     }));
 +    $('#background_fitting').on('input', function () {
 +        background_settings.fitting = String($(this).val());
 +        setFittingClass(background_settings.fitting);
 +        saveSettingsDebounced();
 +    });
+}

public/style.css+35 -1 Viewed

     height: 100dvh;
     /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
     /*height: calc(var(--doc-height) - 1px);*/
     background-color: var(--greyCAIbgSmartThemeBlurTintColor);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;

     transition: background-image 0.5s ease-in-out;
+}
 +/* Background fitting options */
 +#background_fitting {
 +    max-width: 6em;
 +}
++
 +/* Fill/Cover - scales to fill width while maintaining aspect ratio */
 +#bg1.cover,
 +#bg_custom.cover {
 +    background-size: cover;
 +    background-position: center;
 +}
++
 +/* Fit/Contain - shows entire image maintaining aspect ratio */
 +#bg1.contain,
 +#bg_custom.contain {
 +    background-size: contain;
 +    background-position: center;
 +    background-repeat: no-repeat;
 +}
++
 +/* Stretch - stretches to fill entire space */
 +#bg1.stretch,
 +#bg_custom.stretch {
 +    background-size: 100% 100%;
 +}
++
 +/* Center - centers without scaling */
 +#bg1.center,
 +#bg_custom.center {
 +    background-size: auto;
 +    background-position: center;
 +    background-repeat: no-repeat;
 +}
++
 body.reduced-motion #bg1,
 body.reduced-motion #bg_custom {
     transition: none;