Feature Request(s): Background/Wallpaper/Logo/Profile Picture

[jjjonesjr33]

This one is a multiple request as they all entail about the same thing.

First

• Ability to store photos and backgrounds in a dedicated location within the docker using a "PATH" variable that the config can pull. a.k.a "background.png" or "profile.png"

This could be as easy as just coding it in the docker as a having a path and just loading the file from "AVATAR_LOCAL:" or "BACKGROUND_LOCAL" and having the code look for them at the path locations as long as their naming scheme matches "background.png" or "profile.png"

You could give the option to do "BACKGROUND_URL" as well since the Avatar is already programed via a url.

Second

• Background images would need to have a dynamic injection into the css to do "center", "span", ect ... for users to adjust if a picture does not layout right.

Third

• ~~Background color. There justs need a dynamic way to change the color code in the css.~~

[timothystewart6]

Third is covered here https://github.com/techno-tim/littlelink-server/issues/87

[jjjonesjr33]

Third is covered here #87

Did you just link to the same page with the # and are you trying to link to #3 ? Lol

[jjjonesjr33]

Side note, also need to add the FAVICON as a local image as well. One for a .ico image and .webp \ .png

Also here is the FAVICON metadata that may need to be added into the

of the html for mobile devices. This is purely when someone saves the URL on a mobile device and adds it to their home screen as a clickable button.

<link rel="shortcut icon" href="/static/media/local/favicon.ico">
<link rel="icon" type="image/png" href="/static/media/local/favicon.png">
<link rel="icon" type="image/png" href="/static/media/local/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/static/media/local/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/static/media/local/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" sizes="180x180" href="/static/media/local/apple-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/static/media/local/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="144x144" href="/static/media/local/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/static/media/local/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="114x114" href="/static/media/local/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/static/media/local/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/static/media/local/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="60x60" href="/static/media/local/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="57x57" href="/static/media/local/apple-icon-57x57.png">
<meta name="msapplication-square310x310logo" content="/static/media/local/ms-icon-310x310.png">
<meta name="msapplication-square150x150logo" content="/static/media/local/ms-icon-150x150.png">
<meta name="msapplication-square70x70logo" content="/static/media/local/ms-icon-70x70.png">
<meta name="msapplication-TileImage" content="/static/media/local/ms-icon-144x144.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="static/manifest.json">

FYI:

• File location/structure doesn't matter just that it is stored locally and referenced.

The files that are referenced for all the size differences can be simplified and just referenced as the <link rel="icon" type="image/png" href="/static/media/local/favicon.png"> you would just still do <link rel="icon" type="image/png" href="/static/media/local/favicon.png" sizes="96x96"> but have the tagged size different per each line. Same for the apple image <link rel="apple-touch-icon" sizes="180x180" href="/static/media/local/favicon.png">

manifest.json

For the <link rel="manifest" href="static/manifest.json"> a file will need to be dynamically created / referenced whenever the docker restarts / updates to fill the name and short_name - this could also just be made static to reference the project for littlelink to make it easier.

FYI: The name is just a copy paste from META_TITLE and the short name is a copy paste from META_AUTHOR

{
    "name": "Jamie Jones Jr | Entrepreneur, Programmer, and Developer.",
    "short_name": "Jamie Jones Jr ",
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "minimal-ui",
    "orientation": "portrait",
    "scope": "/",
    "start_url": "/admin",
    "icons": [
        {
            "src": "/android-icon-36x36.png",
            "sizes": "36x36",
            "type": "image/png",
            "density": "0.75"
        },
        {
            "src": "/android-icon-48x48.png",
            "sizes": "48x48",
            "type": "image/png",
            "density": "1.0"
        },
        {
            "src": "/android-icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png",
            "density": "1.5"
        },
        {
            "src": "/android-icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png",
            "density": "2.0"
        },
        {
            "src": "/android-icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png",
            "density": "3.0"
        },
        {
            "src": "/android-icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "density": "4.0"
        }
    ]
}