I know that when sharing pictures, I have to upload them in 16:9 ratio. But I need to upload it in 3:2 ratio.
When I click on the share link, part of the picture is cropped. I want the image to fit.
I added them to the header of the document:
<meta name="title" content="{{ $meta_title }}">
<meta name="description" content="{{ $meta_description }}">
<meta name="keywords" content="{{ $meta_keywords }}">
{{--<!-- Apple Stuff -->--}}
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="{{ $meta_title }}">
{{--<!-- Google / Search Engine Tags -->--}}
<meta itemprop="name" content="{{ $meta_title }}">
<meta itemprop="description" content="{{ $meta_description }}">
<meta itemprop="image" content="{{ $meta_image }}">
{{--<!-- Facebook Meta Tags -->--}}
<meta property="og:type" content="website">
<meta property="og:title" content="{{ $meta_title }}">
<meta property="og:description" content="{{ $meta_description }}">
<meta property="og:image" content="{{ $meta_image }}"/>
<meta property="og:image:type" content="image/{{ $meta_image_extension }}" />
<meta property="og:image:width" content="2380" />
<meta property="og:image:height" content="1640" />
<meta property="og:url" content="{{ url()->current() }}">
<meta name="twitter:card" content="summary_large_image">
I use share links via this: https://ellisonleao.github.io/sharer.js
And i tried doing this using: https://www.addtoany.com/buttons/customize/follow_buttons
The original image looks like this:
This is how it looks when sharing:
Code snippet with my share buttons:
<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="{{ request()->url() }}" data-a2a-title="{{ (new HTMLPurifier)->purify(strip_tags($item->title ?? '')) }}">
<a data-sharer="facebook" data-hashtag="" data-url="{{ url()->current() }}" data-title="{{ (new HTMLPurifier)->purify(strip_tags($item->title ?? '')) }}" href="#"><img src="{{asset('images/share/facebook.png')}}" alt=""></a>
<a data-sharer="linkedin" data-hashtag="" data-url="{{ url()->current() }}" data-title="{{ (new HTMLPurifier)->purify(strip_tags($item->title ?? '')) }}" href="#"><img src="{{asset('images/share/linkdin.png')}}" alt=""></a>
<a data-sharer="twitter" data-hashtag="" data-url="{{ url()->current() }}" data-title="{{ (new HTMLPurifier)->purify(strip_tags($item->title ?? '')) }}" href="#"><img src="{{asset('images/share/twitter.png')}}" alt=""></a>
<a class="a2a_button_email" href="#"><img src="{{asset('images/share/mail.png')}}" alt=""></a>
<a data-sharer="whatsapp" data-hashtag="" data-url="{{ url()->current() }}" data-title="{{ (new HTMLPurifier)->purify(strip_tags($item->title ?? '')) }}" href="#"><img src="{{asset('images/share/whatsapp.png')}}" alt=""></a>
</div>
Here is the link to the website where I want to do this: https://pirimo.com/guides/preputation-mattersp
I want the picture to be shared by fitting it into the frame. While doing this, I want to keep the 3:2 aspect ratio of the picture. I want to provide this on Facebook, Twitter, Linkedin. Is this possible by keeping the size of the image?
