[FR] Apply mask to images

[bootzin]

Sorry for not following the template, but this is a FR that I already brought at least a barebones solution. I didn't want to do a PR though

So, I wanted to have more control of image adjustments. More specifically, I wanted to be able to specify details in my "profile" images, meaning scaling it as needed and adjusting its position inside the masked view.

For such, I have created a css snippet that accomplishes just that and I thought it would be interesting to share:

.image-embed[alt*="masked"] {
    display: inline-block; /* Force inline-block for spans */
    width: 100px !important;
    height: 100px !important;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.image-embed[alt*="masked"] img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: top left;
    transform: 
        scale(var(--img-scale, 1)) 
        translate(calc((var(--pos-x, 50) - 100)*1px), calc((var(--pos-y, 50) - 100)*1px));
}

/* Scale values from 1 to 10 */
.image-embed[alt*="scale2"] img { --img-scale: 2; }
.image-embed[alt*="scale3"] img { --img-scale: 3; }
.image-embed[alt*="scale4"] img { --img-scale: 4; }
.image-embed[alt*="scale5"] img { --img-scale: 5; }
.image-embed[alt*="scale6"] img { --img-scale: 6; }
.image-embed[alt*="scale7"] img { --img-scale: 7; }
.image-embed[alt*="scale8"] img { --img-scale: 8; }
.image-embed[alt*="scale9"] img { --img-scale: 9; }
.image-embed[alt*="scale10"] img { --img-scale: 10; }

/* Positioning values for X (0 to 90 in increments of 10) */
.image-embed[alt*="posX10"] img { --pos-x: 10; }
.image-embed[alt*="posX20"] img { --pos-x: 20; }
.image-embed[alt*="posX30"] img { --pos-x: 30; }
.image-embed[alt*="posX40"] img { --pos-x: 40; }
.image-embed[alt*="posX50"] img { --pos-x: 50; }
.image-embed[alt*="posX60"] img { --pos-x: 60; }
.image-embed[alt*="posX70"] img { --pos-x: 70; }
.image-embed[alt*="posX80"] img { --pos-x: 80; }
.image-embed[alt*="posX90"] img { --pos-x: 90; }

/* Positioning values for Y (0 to 90 in increments of 10) */
.image-embed[alt*="posY10"] img { --pos-y: 10; }
.image-embed[alt*="posY20"] img { --pos-y: 20; }
.image-embed[alt*="posY30"] img { --pos-y: 30; }
.image-embed[alt*="posY40"] img { --pos-y: 40; }
.image-embed[alt*="posY50"] img { --pos-y: 50; }
.image-embed[alt*="posY60"] img { --pos-y: 60; }
.image-embed[alt*="posY70"] img { --pos-y: 70; }
.image-embed[alt*="posY80"] img { --pos-y: 80; }
.image-embed[alt*="posY90"] img { --pos-y: 90; }

The way this works is that you can pass in arguments to the image wikilink and scale/move the image around with certain increments, which I thought solved 99% of my problems.

Let me know your thoughts and I heop this proves to be useful. Would love to see something like this in a future release