Skip to content

Full Width LinkPreview #32

@inasi-zw

Description

@inasi-zw

Image

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();`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions