How can i implement focal point on images through liquid coding in shopify

[AK71]

I want to implement focal point on image tag through liquid coding. I don't know How to add this. please help me t solve this issue.

Thanks

[GemPages]

Hello @AK71 

I would like to give you some recommendations to support you
Let's try adding this code :

<a data-caption="image 1" data-fancybox="gallery1" href="https://ucarecdn.com/d4804a30-1dff-4860-adbd-98298394eac2/-/format/auto/-/preview/3000x3000/-/quality/lighter/slider-show-1_07c3288f-0efb-40f3.jpg" target=""><img src="https://ucarecdn.com/d4804a30-1dff-4860-adbd-98298394eac2/-/format/auto/-/preview/3000x3000/-/quality/lighter/slider-show-1_07c3288f-0efb-40f3.jpg" alt="Mobile image 1" class="gf_image" data-gemlang="en" width="1170" height="600" data-width="100%" data-height="auto" title="" natural-width="1170" natural-height="600"></a>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js"
      integrity="sha512-j7/1CJweOskkQiS5RD9W8zhEG9D9vpgByNGxPIqkO5KrXrwyDAroM9aQ9w8J7oRqwxGyz429hPVk/zR6IOMtSA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css"
      integrity="sha512-nNlU0WK2QfKsuEmdcTwkeh+lhGs6uyOxuUs+n+0oXSYDok5qy0EI0lt01ZynHq6+p/tbgpZ7P+yUb+r71wqdXg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    >

I hope the above is useful to you.
Best regards,
GemPages Support Team

[AK71]

Hi @GemPages 

Thanks for reply

i try but never get results using this code but As i want i replaced "image_tag" and "image_url" to "img_tag" and "img_url" after this focal point implemented from storefront.