Media Helpers

Media rendering is split into two setup modules.

Media module:

• Bootstrap: wp-content/themes/balinot/setup/modules/media-setup/module.php
• Focus: WordPress attachments, SVG and AVIF uploads, image helpers, video helpers, background helpers.

Icons module:

• Bootstrap: wp-content/themes/balinot/setup/modules/icons-setup/module.php
• Runtime: wp-content/themes/balinot/setup/modules/icons-setup/includes/icons.php
• Focus: SVG icons loaded by name from assets/icons/.

Main media helpers:

• render_media_icon(): render an attachment as inline SVG or as a normal image fallback.
• render_img(): render a WordPress image attachment with merged attributes.
• render_video(): render an HTML5 video from a WordPress attachment.
• render_bg_style(): build an inline background-image style string from an attachment ID or URL.

Main icon helpers:

• icons_svg(): return an SVG string by icon name.
• render_icon(): echo the same icon directly.
• [icon]: shortcode wrapper for icons_svg().

How render_media_icon() works:

• Input: attachment ID from the Media Library.
• If the file is SVG, it reads the real file, strips unsafe tags and attributes, and returns inline SVG.
• If the file is raster, it falls back to wp_get_attachment_image().
• It supports two modes:
  • solid
  • stroke

Where render_media_icon() is used:

• templates/partials/header.php for site logos.

How render_img() works:

• Input: attachment ID.
• Uses wp_get_attachment_image() internally.
• Defaults to size large.
• Merges standard attributes with any custom attrs you pass.

Typical use cases for render_img():

• Header and footer logos.
• Section images inside partials.
• Review avatars and gallery items.

How render_video() works:

• Input: video attachment ID.
• Resolves the file URL and MIME type.
• Builds a native video tag with a source element.
• Supports options like controls, autoplay, loop, muted, preload, playsinline, and poster.

Good rule for render_video():

• Use it for local HTML5 video files stored in WordPress.
• Use Fancybox iframe helpers or custom embeds for YouTube, Vimeo, maps, or third-party media.

How render_bg_style() works:

• Accepts an attachment ID or a direct URL.
• Returns a style attribute string for background-image sections.
• Useful when the section is built with background-image instead of an img tag.

Icon resolution order:

• Child theme assets/icons/
• Parent theme assets/icons/
• Module fallback inside setup/modules/icons-setup/assets/icons/

This means you can override an icon without touching the module.

How to add a new icon:

1. Add my-icon.svg to assets/icons/ in the active theme.
2. Call icons_svg(‘my-icon’, ‘your-classes’, [‘aria-label’ => ’…’]).
3. If the icon should inherit text color, keep fills and strokes compatible with currentColor.

How to choose between icon systems:

• Use icons_svg() when the icon is a named reusable SVG asset.
• Use render_media_icon() when the icon comes from a WordPress attachment field.

Practical examples in the theme:

• templates/partials/header.php uses render_media_icon() for logo attachments and icons_svg() for the WhatsApp floating icon.
• templates/partials/footer.php uses render_img() for footer logos.
• templates/partials/error-404/default.php uses balinot_render_404_image(), which is a feature-specific wrapper built on top of the media layer.