Fixing SVG Path Issues on Translated Pages in WPML

Overview

SVG (Scalable Vector Graphics) support in WordPress is essential for modern websites. However, many users face issues with SVG file paths when using WPML (WordPress Multilingual Plugin). Specifically, the paths often become incorrect on translated pages. In this post, we will explore a straightforward workaround to fix SVG paths in WPML. This solution will ensure your SVG files appear correctly in all languages.

Understanding the Issue

When managing multilingual content, file paths for SVG attachments can become mismatched. This happens because the default path generation does not consider translation layers. Consequently, this leads to broken links and missing graphics. Thus, the user experience and SEO can be negatively affected.

The Workaround

To solve this problem, we can implement a simple filter in WordPress. Here’s the code snippet you need to add to your theme’s functions.php file:

// WPML Workaround for compsupp-6933
add_filter('wp_get_attachment_metadata', 'codebykp_fix_attachment_metadata_file_path', 10, 2);
function codebykp_fix_attachment_metadata_file_path($data, $attachment_id) {
    // Check if WPML Media and SVG Support plugins are active    
    if (class_exists('WPML_Media') && function_exists('bodhi_svgs_generate_svg_attachment_metadata')) {
        if (isset($data['file']) && !preg_match('/\d{4}\/\d{2}\//', $data['file'])) {
            // Get the upload directory info           
            $upload_dir_info = wp_upload_dir();            

            // Extract the year and month from the basedir            
            $year_month = date('Y/m', strtotime(get_post_field('post_date', $attachment_id)));           

            // Prepend the year and month to the file            
            $data['file'] = $year_month . '/' . $data['file'];        
        }
    }
    return $data;
}

Explanation of the Code

First, we use the wp_get_attachment_metadata filter to modify the attachment metadata. Next, the function checks if the WPML Media and SVG Support plugins are active. This ensures compatibility with your setup. Furthermore, the code examines the existing file path. If it does not include the year/month structure, it updates the path. This update is based on the attachment’s post date.

FAQ