
The full width linkPreview produces blurred linkPreview thumbnails in whatsapp channels ,i habe tried different links and this is a baileys issue.
May you kindly help me implement fullwidth link preview on my whatsap channel
This is my current implementation
`import makeWASocket, {
makeCacheableSignalKeyStore,
DisconnectReason,
fetchLatestWaWebVersion,
proto,
} from "@whiskeysockets/baileys";
import P from 'pino';
import NodeCache from '@cacheable/node-cache';
import { getLinkPreview } from 'link-preview-js';
import axios from 'axios';
import sharp from 'sharp';
import { connectDB } from './db.js';
import { useMongoDBAuthState } from './mongoAuthState.js';
const msgRetryCounterCache = new NodeCache();
const logger = P({ level: 'silent' });
const TEST_URL = "https://ziyahnews.co.zw/families-reconnect-behind-bars-day-2-at-beitbridge-prison/";
const TEST_CHANNEL_JID = "120363405305626644@newsletter";
async function getHighQualityThumbnail(imageUrl) {
if (!imageUrl) return null;
const response = await axios.get(imageUrl, { responseType: 'arraybuffer', timeout: 15000 });
// WhatsApp externalAdReply thumbnail dimensions: recommended 1024x1024 or 16:9
const buffer = await sharp(Buffer.from(response.data))
.resize(1024, 1024, { fit: 'inside', withoutEnlargement: true })
.jpeg({ quality: 90, progressive: true })
.toBuffer();
console.log(Thumbnail: ${(buffer.length / 1024).toFixed(1)} KB);
return buffer;
}
async function main() {
await connectDB();
const { saveCreds, state } = await useMongoDBAuthState();
const { version } = await fetchLatestWaWebVersion();
const sock = makeWASocket({
version,
auth: { creds: state.creds, keys: makeCacheableSignalKeyStore(state.keys, logger) },
msgRetryCounterCache,
logger,
generateHighQualityLinkPreview: true,
});
sock.ev.on('creds.update', saveCreds);
sock.ev.on('connection.update', async (update) => {
if (update.connection === 'open') {
// Fetch metadata and image
const metadata = await getLinkPreview(TEST_URL, { imagesPropertyType: 'og' });
const imageUrl = metadata.images?.[0] || metadata.image;
const thumbnail = await getHighQualityThumbnail(imageUrl);
// Send with externalAdReply (this gives a large, sharp preview)
await sock.sendMessage(TEST_CHANNEL_JID, {
text: `${metadata.title}\n\n${TEST_URL}`,
contextInfo: {
externalAdReply: {
title: metadata.title,
body: metadata.description?.slice(0, 100) || '',
thumbnail: thumbnail,
sourceUrl: TEST_URL,
mediaType: 1,
renderLargerThumbnail: true, // request large layout
},
},
});
console.log("✅ Large, sharp preview sent!");
sock.ws.close();
process.exit(0);
}
});
}
main();`
The full width linkPreview produces blurred linkPreview thumbnails in whatsapp channels ,i habe tried different links and this is a baileys issue.
May you kindly help me implement fullwidth link preview on my whatsap channel
This is my current implementation
`import makeWASocket, {
makeCacheableSignalKeyStore,
DisconnectReason,
fetchLatestWaWebVersion,
proto,
} from "@whiskeysockets/baileys";
import P from 'pino';
import NodeCache from '@cacheable/node-cache';
import { getLinkPreview } from 'link-preview-js';
import axios from 'axios';
import sharp from 'sharp';
import { connectDB } from './db.js';
import { useMongoDBAuthState } from './mongoAuthState.js';
const msgRetryCounterCache = new NodeCache();
const logger = P({ level: 'silent' });
const TEST_URL = "https://ziyahnews.co.zw/families-reconnect-behind-bars-day-2-at-beitbridge-prison/";
const TEST_CHANNEL_JID = "120363405305626644@newsletter";
async function getHighQualityThumbnail(imageUrl) {
if (!imageUrl) return null;
const response = await axios.get(imageUrl, { responseType: 'arraybuffer', timeout: 15000 });
// WhatsApp externalAdReply thumbnail dimensions: recommended 1024x1024 or 16:9
const buffer = await sharp(Buffer.from(response.data))
.resize(1024, 1024, { fit: 'inside', withoutEnlargement: true })
.jpeg({ quality: 90, progressive: true })
.toBuffer();
console.log(
Thumbnail: ${(buffer.length / 1024).toFixed(1)} KB);return buffer;
}
async function main() {
await connectDB();
const { saveCreds, state } = await useMongoDBAuthState();
const { version } = await fetchLatestWaWebVersion();
}
main();`