А где можно поподробнее ознакомиться с таким синтаксисом?
$old = '<img src="[[+url]]" alt="[[*pagetitle]]" class="img-fluid">';
$new = '<amp-img alt="[[*pagetitle]]" src="[[+url]]" width="900" height="675" layout="responsive"></amp-img>';
$resources = $modx->getCollection('modResource', array()); // Выбирает ВСЕ ресурсы сайта. Если нужны ограничения по выборке, см документацию метода getCollection
foreach ($resources as $res) {
$content = str_repace($old, $new, $res->get('content');
$res->set('content', $content);
$res->save();
}
<img src = "[[+url]]" alt = "test"> <!-- пример один -->
<img alt = "test" src = "[[+url]]"> <!-- пример два-->
https://codepen.io/dmi3mart/pen/YzPwxbR
Делаешь фигуру на простом css, затем при помощи transform (rotate, skew) приводишь ее к форме нужного ромба.
css3generator.com - вот тут можешь поиграть с этими свойствами.