Accesing focal point X and Y of an image in antlers

Question

I'm working on some website that sues Statamic CMS on antlers with tailwind.css and AlpineJS and on one of the pages there is a section that displays the replicator field with a title, description and a varying amount of images.

Images have a dynamic grid-like layout that is to follow this pattern

That part is done all works as expected. Only issue that is there, is that I currently crop the images and focal point is center. In many cases I set focal points of images manually within the CMS using the focal point funcionality. I can't seem to find a way to extract those X and Y points without adding an addon and I dont really want to add any, because I want to do it myself and learn. Also, I ahve AlpineJS in this project so if any solution needs it its there

My Current code: template:

{{ elements sort="order" }}
<div class="">
    <h2 class="text-white text-4xl lg:text-6xl font-bold text-left my-4">{{ title }}</h2>
    <div class="max-w-[1100px] text-white text-lg lg:text-2xl font-normal">
        {{ description }}
    </div>
    <div class="case__gallery flex flex-wrap my-8">
        {{ images }}
            <div class="p-4 flex-auto image-container">
                <img src="{{ url }}" alt="{{ alt }}" class="object-cover object-center w-full h-full">
            </div>
        {{ /images }}
    </div>
</div>
{{ /elements }}

additonal css:

@media (min-width: 768px) { 
    .case__gallery {
        .image-container {
            @apply w-full;
        }
        .image-container:nth-of-type(5n+1), 
        .image-container:nth-of-type(5n+5) { 
           @apply w-2/3;
        }
        
        .image-container:nth-of-type(5n+2), 
        .image-container:nth-of-type(5n+4) { 
           @apply w-1/3;
        }
        .image-container:nth-of-type(5n+3) { 
           @apply w-full;
        }
    }
}

What I tried:

{{ elements sort="order" }}
<div class="">
    <h2 class="text-white text-4xl lg:text-6xl font-bold text-left my-4 px-5 lg:px-0">{{ title }}</h2>
    <div class="max-w-[1100px] text-white text-lg lg:text-2xl font-normal">
        {{ description }}
    </div>
    <div class="case__gallery flex flex-row flex-wrap my-8">
        {{ images }}
            <div class="p-4 image-container"> <!-- Dodatkowy kontener DIV -->
                <img class="w-full" src="{{ glide:url fit='crop_focal' }}" alt="{{ alt }}"> <!-- Usunięte style paddingu z tagu img -->
            </div>
        {{ /images }}
    </div>
</div>
{{ /elements }}

Answer 1

Assets have a focus property you can use to get that data. There's also a built-in modifier to convert that value into a usable CSS value for object-fit and background-fit:

{{ images }}
  <div class="image-container">
    <img src="{{ glide:url }}" style="object-position: {{ focus | background_position }};">
  </div>
{{ /images }}