class FilterAlign in Drupal 10

Provides a filter to align elements.

Plugin annotation

@Filter(
  id = "filter_align",
  title = @Translation("Align images"),
  description = @Translation("Uses a <code>data-align</code> attribute on <code>&lt;img&gt;</code> tags to align images."),
  type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_REVERSIBLE
)

Hierarchy

• class \Drupal\Component\Plugin\PluginBase implements DerivativeInspectionInterface, PluginInspectionInterface
  • class \Drupal\Core\Plugin\PluginBase uses DependencySerializationTrait, MessengerTrait, StringTranslationTrait
    • class \Drupal\filter\Plugin\FilterBase implements FilterInterface
      • class \Drupal\filter\Plugin\Filter\FilterAlign

File

core/modules/filter/src/Plugin/Filter/FilterAlign.php, line 19

Namespace

Drupal\filter\Plugin\Filter

class FilterAlign extends FilterBase {

  /**
   * {@inheritdoc}
   */
  public function process($text, $langcode) {
    $result = new FilterProcessResult($text);
    if (stristr($text, 'data-align') !== FALSE) {
      $dom = Html::load($text);
      $xpath = new \DOMXPath($dom);
      foreach ($xpath
        ->query('//*[@data-align]') as $node) {

        // Read the data-align attribute's value, then delete it.
        $align = $node
          ->getAttribute('data-align');
        $node
          ->removeAttribute('data-align');

        // If one of the allowed alignments, add the corresponding class.
        if (in_array($align, [
          'left',
          'center',
          'right',
        ])) {
          $classes = $node
            ->getAttribute('class');
          $classes = strlen($classes) > 0 ? explode(' ', $classes) : [];
          $classes[] = 'align-' . $align;
          $node
            ->setAttribute('class', implode(' ', $classes));
        }
      }
      $result
        ->setProcessedText(Html::serialize($dom));
    }
    return $result;
  }

  /**
   * {@inheritdoc}
   */
  public function tips($long = FALSE) {
    if ($long) {
      return $this
        ->t('
        <p>You can align images, videos, blockquotes and so on to the left, right or center. Examples:</p>
        <ul>
          <li>Align an image to the left: <code>&lt;img src="" data-align="left" /&gt;</code></li>
          <li>Align an image to the center: <code>&lt;img src="" data-align="center" /&gt;</code></li>
          <li>Align an image to the right: <code>&lt;img src="" data-align="right" /&gt;</code></li>
          <li>… and you can apply this to other elements as well: <code>&lt;video src="" data-align="center" /&gt;</code></li>
        </ul>');
    }
    else {
      return $this
        ->t('You can align images (<code>data-align="center"</code>), but also videos, blockquotes, and so on.');
    }
  }

}