Translate Sngine og-image Tutorial

The og-image is an essential part of your social media previews. In Sngine, it is possible to dynamically translate the og-image file name based on the active language. This tutorial will guide you through the process of modifying the page_header function to support translated og-image filenames.

Step 1: Locate the page_header Function

Open the file includes/functions.php and locate the page_header function. It should look like this:

function page_header($title, $description = '', $image = '')
{
    global $smarty, $system;
    $description = ($description != '') ? $description : __($system['system_description']);
    if ($image == '') {
        if ($system['system_ogimage']) {
            $image = $system['system_uploads'] . '/' . $system['system_ogimage'];
        } else {
            $image = $system['system_url'] . '/content/themes/' . $system['theme'] . '/images/og-image.jpg';
        }
    }
    $smarty->assign('page_title', $title);
    $smarty->assign('page_description', $description);
    $smarty->assign('page_image', $image);
}
    

Step 2: Modify the page_header Function

Update the function to support translation for the og-image. Replace the existing code with the following:

function page_header($title, $description = '', $image = '')
{
    global $smarty, $system;
    $description = ($description != '') ? $description : __($system['system_description']);

    /**
     * TRANSLATE IMAGE
     */
    if ($image == '') {
        if (!empty($system['system_ogimage'])) {
            $image = $system['system_uploads'] . '/' . $system['system_ogimage'];
        } else {
            // Get the translated base name
            $image_base_name = __("og-image");

            // Append the file extension
            $image = $system['system_url'] . '/content/themes/' . $system['theme'] . '/images/' . $image_base_name . '.jpg';
        }
    }
    /**
     * END TRANSLATE IMAGE
     */

    $smarty->assign('page_title', $title);
    $smarty->assign('page_description', $description);
    $smarty->assign('page_image', $image);
}
    

Step 3: Add the og-image Translation

To add the translation for og-image, edit the language file in your project. For example, in the Spanish language file, add the following:

msgid "og-image"
msgstr "og-image-es"
    

For other languages, replace og-image-es with the appropriate filename, such as og-image-PT for Portuguese.

Step 4: Upload Translated Images

Ensure that you upload the images files with the correct names to the following directory:

/content/themes/{theme_name}/images/
    

For example:

• og-image-es.jpg for Spanish
• og-image-PT.jpg for Portuguese

Step 5: Test Your Changes

Visit your website, switch between different languages, and check the social media previews. The correct og-image file should load based on the active language.

By following this tutorial, you can ensure that your website’s social media previews reflect the active language, providing a localized experience for your users. This approach enhances engagement and creates a more professional impression.