Make images not clickable on Flarum without extension

To prevent images from being clickable in Flarum without using an extension, you can achieve this by adding custom CSS to your Flarum theme. This approach modifies the behavior of links pointing to image files so that they do not trigger any pointer events, effectively disabling their clickability. By implementing this CSS rule, you can ensure that images linked in posts or comments within your Flarum community cannot be clicked or interacted with as hyperlinks.

Steps to Implement CSS to Disable Image Clickability:

1. Access your Flarum theme customization:

   • Log in to your Flarum administrator dashboard.
   • Navigate to the customization section where you can add custom CSS styles. This is typically found in the theme settings or customization options provided by Flarum.

2. Add the CSS code:

   • Inside the custom CSS editor or field, paste the following code snippet:

     /* IMAGES NOT CLICKABLE */
     a[href$=".png"], a[href$=".img"], a[href$=".jpg"], a[href$=".jpeg"],
     a[href$=".PNG"], a[href$=".IMG"], a[href$=".JPG"], a[href$=".JPEG"],
     a[href$=".gif"], a[href$=".webp"], a[href$=".GIF"], a[href$=".WEBP"] {
         pointer-events: none;
     }
     

   • This CSS rule specifically targets anchor (<a>) elements (<a href="...">) whose href attribute ends with file extensions commonly associated with images (png, img, jpg, jpeg, gif, webp). By setting pointer-events to none, it prevents these links from responding to mouse events, effectively disabling their clickability.

3. Save your changes:

   • After pasting the CSS code snippet into the custom CSS editor, save the changes. Flarum should apply these styles globally to your community, ensuring that all images linked with the specified file extensions are not clickable.

4. Test the functionality:

   • To verify that the CSS is working as intended, navigate to a post or comment in your Flarum community that contains linked images (such as example.png or photo.jpg).
   • Hover over the linked image; the cursor should not change to indicate a clickable link, and clicking on the image should not trigger any action.

5. Adjust as needed:

   • If you need to include additional file extensions or modify the behavior of other types of links, you can adjust the CSS selector and pointer-events rule accordingly.
   • Ensure to check the CSS customization periodically, especially after Flarum updates, to ensure compatibility and functionality.

By following these steps, you can effectively disable the clickability of images linked within posts and comments in your Flarum community using custom CSS. This approach provides a straightforward solution without the need for installing additional extensions, allowing you to tailor the user experience according to your community's needs and preferences.