Automatic transliteration of images’ names in MODX

16.05.2023

Today, I would like to talk about how to not go bad with your SEO position and not ruin your good relations with the team. This article will be helpful for owners of online stores and corporate websites because filling the website at the same time is working for many people and it’s needless to say that there is a higher chance to make a mistake when on the same project are working lots of people.

Not long ago, with a slight difference in time, we received two projects with the same problem, particularly with a large number of pictures with Cyrillic characters and spaces in the names.

The first website is existing for more than five years. During this period lots of content managers, marketers, SEO specialists, and programmers contribute to the development. Several dozens of pictures with the Cyrillic alphabet and spaces in the title are present on several hundred pages. To correct the mistakes is a thankless and unpleasant job routine. As soon as you rename the picture it will disappear from the website and it’s necessary to find it and correct the picture’s name on every page. After completing this job, we thought about how good it would be if such a situation will never repeat again. For example, you forgot to inform your new content manager so that the system itself would correct such errors at the stage of uploading a file.

Firstly, for this aim, we will create a snippet that will be responsible for file name transliteration.

<?php
$converter = array(
    'а' => 'a','б' => 'b','в' => 'v','г' => 'g','д' => 'd',
    'е' => 'e','ё' => 'e','ж' => 'zh','з' => 'z','и' => 'i',
    'й' => 'y','к' => 'k','л' => 'l','м' => 'm','н' => 'n',
    'о' => 'o','п' => 'p','р' => 'r','с' => 's','т' => 't',
    'у' => 'u','ф' => 'f','х' => 'h','ц' => 'c','ч' => 'ch',
    'ш' => 'sh','щ' => 'sch',  'ь' => '','ы' => 'y','ъ' => '',
    'э' => 'e','ю' => 'yu','я' => 'ya',
    'А' => 'A','Б' => 'B','В' => 'V','Г' => 'G','Д' => 'D',
    'Е' => 'E','Ё' => 'E','Ж' => 'Zh','З' => 'Z','И' => 'I',
    'Й' => 'Y','К' => 'K','Л' => 'L','М' => 'M','Н' => 'N',
    'О' => 'O','П' => 'P','Р' => 'R','С' => 'S','Т' => 'T',
    'У' => 'U','Ф' => 'F','Х' => 'H','Ц' => 'C','Ч' => 'Ch',
    'Ш' => 'Sh','Щ' => 'Sch',  'Ь' => '','Ы' => 'Y','Ъ' => '',
    'Э' => 'E','Ю' => 'Yu',   'Я' => 'Ya',
    ' ' => '_'
    );
$value = strtr($value, $converter);
return $value;

We send a string to the snippet, it replaces Cyrillic and returns a new value.

Straight away there is a need to check the type of the uploaded file and rename it. Therefore we will create a plugin and enable the OnFileManagerUpload event in it.

<?php
if ($modx->event->name =='OnFileManagerUpload' && in_array($files['file']['type'], array("image/png","image/jpeg"))) {
    $modx->log(1, print_r($array, "<pre>".print_r($files)."</pre>"),'HTML');
    
    if(preg_match("/[А-Яа-я]/", $files['file']['name']) or stristr($files['file']['name'], " ")){
        $newName = $modx->runSnippet('translit',array(
            'value' => $files['file']['name']
        ));
        $modx->log(1, "новое имя ".$newName,'HTML');
        for($i=1;$i!=-1;$i++){
            $modx->log(1, "новое имя ".$newName,'HTML');
            if (!file_exists($modx->config['base_path'].$directory.$newName)){
                $modx->log(1, $modx->config['base_path'].$directory.$newName,'HTML');
                rename($modx->config['base_path'].$directory.$files['file']['name'], $modx->config['base_path'].$directory.$newName);
                break;
            }
            else {
                $namePart = explode(".", $newName);
                $newName = $namePart[0]."_c.".$namePart[1];
            }
        }
    }
}

 

The plugin's operation is quite simple. When an image is uploaded to the website, it determines whether it contains Cyrillic or spaces, after which, if they are found, it performs a replacement. Then, the plugin checks if there is already a file with the same name and renames it. If a file with a new name is found, the “copy_” prefix is added to the new file, after which the verification procedure repeats again. And so forth until a unique filename is generated.

Since we already use the 'OnFileManagerUpload' event on our websites, we have integrated the new code into an existing plugin for replacing jpg and png with webp. More information in repo.

Let's talk
about your project?

We will receive your application. And our manager will call you back to discuss the details.
91% of clients stay with us on a permanent cooperation!
91% of clients stay with us on a permanent cooperation!