Member Avatar for epicrevolt

So I am making a Drupal website and was wondering what would be the best way of auto-adding images in front of certain phrases. like if someone types "press start" it will automatically add an image in front, like the Microsoft tutorials. No, I am not making a site for Windows support. Just want to know the best way of going about doing such things.

Is this post miscategorized? I didn't know where to post something like this. It's kinda a design thing.

  • 2 Contributors
  • 2 Replies
  • 108 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by epicrevolt

Dani AI

Generated

had the right idea: a simple replacement will do the job. In a Drupal site it is better to do that replacement as a controlled filter or output step rather than ad hoc string changes sprinkled through code. That keeps raw content intact, makes the behavior configurable, and avoids accidental replacements inside HTML attributes, code blocks, or other content you did not intend to change.

A practical approach:

  • Decide when to replace: on save (input) or on render (output). Input-time replacements are permanent; output-time keeps the original text and is easier to change later.
  • Implement as a proper text filter (use Drupal's text-format/filter system). Store a phrase -> image mapping in configuration so site admins can edit it. Use whole-word, case-insensitive matching (regex with word boundaries) and skip replacements inside tags like <code>, <pre>, or <a>.
  • If you do not want to build a module, consider a contributed text-replace/token-like module or a CKEditor plugin to insert icons manually.

Security and performance notes:

  • Only allow the replacement filter on trusted text formats or for trusted roles; injecting raw image HTML for anonymous users can be risky.
  • Use local images (not arbitrary user-supplied URLs) to avoid privacy and availability issues.
  • Keep replacements efficient and let Drupal cache rendered output to avoid repeated expensive regex runs.

Client-side alternative:

  • For non-permanent, progressive enhancement, run a DOM text-node walker on page load to wrap matched phrases with a span and add an icon via CSS or inline image. This works well for UI tweaks but not for feeds or emails (see MDN on text nodes for DOM techniques: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent).

Example pseudocode for the replacement loop:

mapping = { "press start": "/images/start.png", ... }
for each phrase in mapping:
  find whole-word occurrences in text nodes and replace with <img> + phrase

This keeps the site maintainable and safe while achieving the visual effect wanted.

Recommended Answers

All 2 Replies

Member Avatar for MagicMedia 
$message = str_replace("press start", "<img src='start.jpg'/>press start", $message);
commented: quick response that answered my question +1
Member Avatar for epicrevolt

Thank you! I knew it was probably something simple. I was just over-analyzing it a lot.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.