Skip to content

Img.md

Latest commit

 

History

History
141 lines (102 loc) · 6.28 KB

Img.md

File metadata and controls

141 lines (102 loc) · 6.28 KB

Img

The <img> HTML element embeds an image into the document.

Basic Usage

Instantiate the Img class using Img::widget().

$img = Img::widget();

Setting Attributes

Use the provided methods to set specific attributes for the a element.

// setting class attribute
$img->class('external');

Or, use the attributes method to set multiple attributes at once.

$img->attributes(['class' => 'external', 'title' => 'External Link']);

Adding source

If you want to include an image, use the src method.

$img->src('https://example.com/image.jpg');

Rendering

Generate the HTML output using the render method.

$html = $img->render();

Or, use the magic __toString method.

$html = (string) $img;

Common Use Cases

Below are examples of common use cases:

// adding multiple attributes
$img->class('external')->title('External Link');

// using data attributes
$img->dataAttributes(['bs-toggle' => 'modal', 'bs-target' => '#exampleModal', 'analytics' => 'trackClick']);

Explore additional methods for setting various attributes such as crossorigin, ismap, lang, loading, tabindex, title, and more.

Prefix and Suffix

Use prefix and suffix methods to add text before and after the img tag, respectively.

// adding a prefix
$html = $img->src('https://example.com/image.jpg')->prefix('prev')->render();

// adding a suffix
$html = $img->src('https://example.com/image.jpg')->suffix('Next')->render();

Template

The template method allows you to customize the HTML output of the a element.

The following template tags are available:

Tag Description
{prefix} The prefix text.
{tag} The a element.
{suffix} The suffix text. 
// using a custom template
$img->template('<span>{tag}</span>');

Attributes

Refer to the Attribute Tests for comprehensive examples.

The following methods are available for setting attributes:

Method Description
attributes() Set multiple attributes at once.
class() Set the class attribute.
crossorigin() Set the crossorigin attribute.
dataAttributes() Set multiple data-attributes at once.
height() Set the height attribute.
id() Set the id attribute.
ismap() Set the ismap attribute.
lang() Set the lang attribute.
loading() Set the loading attribute.
name() Set the name attribute.
sizes() Set the sizes attribute.
src() Set the src attribute.
srcset() Set the srcset attribute.
style() Set the style attribute.
title() Set the title attribute.
width() Set the width attribute.

Custom methods

Refer to the Custom Method Test for comprehensive examples.

The following methods are available for customizing the HTML output:

Method Description
prefix() Add text before the img element.
prefixContainer() Set enabled or disabled for the prefix-container element.
prefixContainerAttributes() Set attributes for the prefix-container element.
prefixContainerClass() Set the class attribute for the prefix-container element.
prefixContainerTag() Set the tag for the prefix-container element.
render() Generates the HTML output.
suffix() Add text after the img element.
suffixContainer() Set enabled or disabled for the suffix-container element.
suffixContainerAttributes() Set attributes for the suffix-container element.
suffixContainerClass() Set the class attribute for the suffix-container element.
suffixContainerTag() Set the tag for the suffix-container element.
template() Set the template for the img element.
widget() Instantiates the Img::class.