Skip to content

Image.md

Latest commit

 

History

History
170 lines (126 loc) · 8.25 KB

Image.md

File metadata and controls

170 lines (126 loc) · 8.25 KB

Image

The input element with a type attribute whose value is image represents either an image from which the UA enables a user to interactively select a pair of coordinates and submit the form, or alternatively a button from which the user can submit the form.

Basic Usage

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

$image = Image::widget();

Generate field id and name

The generateField method is used to generate the field id and name for the HTML output.

Allowed arguments are:

  • modelName - The name of the model.
  • fieldName - The name of the field.
  • arrayable - Whether the field is an array. For default, it is false.
// generate field id and name
$image->generateField('model', 'field');

Setting Attributes

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

// setting class attribute
$image->class('container');

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

$image->attributes(['class' => 'container', 'style' => 'background-color: #eee;']);

Adding value

If you want to include value in the image element, use the value method.

$image->value('MyValue');

Rendering

Generate the HTML output using the render method, for simple instantiation.

$html = $image->render();

Or, use the magic __toString method.

$html = (string) $image;

Common use cases

Below are examples of common use cases:

// adding multiple attributes
$image->class('external')->value('Myvalue');

// using data attributes
$image->dataAttributes(['analytics' => 'trackClick']);

Explore additional methods for setting various attributes such as alt, height, lang, name, style, title, width, etc.

Prefix and Suffix

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

// adding a prefix
$html = $image->value('MyValue')->prefix('MyPrefix')->render();

// adding a suffix
$html = $image->value('MyValue')->suffix('MySuffix')->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
$image->template('<div>{tag}</div>');

Attributes

Refer to the Attribute Tests for comprehensive examples.

The following methods are available for setting attributes:

Method Description
alt() Set the alt attribute.
ariaDescribedBy() Set the aria-describedby attribute.
ariaLabel() Set the aria-label attribute.
attributes() Set multiple attributes at once.
autofocus() Set the autofocus attribute.
class() Set the class attribute.
dataAttributes() Set multiple data-attributes at once.
disabled() Set the disabled attribute.
form() Set the form attribute.
formAction() Set the formaction attribute.
formEncType() Set the formenctype attribute.
formMethod() Set the formmethod attribute.
formNoValidate() Set the formnovalidate attribute.
formTarget() Set the formtarget attribute.
height() Set the height attribute.
hidden() Set the hidden attribute.
id() Set the id attribute.
lang() Set the lang attribute.
name() Set the name attribute.
readOnly() Set the readonly attribute.
src() Set the src attribute.
step() Set the step attribute.
style() Set the style attribute.
tabIndex() Set the tabindex attribute.
title() Set the title attribute.
value() Set the value attribute.
width() Set the width attribute.

Custom methods

Refer to the Custom Methods Tests for comprehensive examples.

The following methods are available for customizing the HTML output:

Method Description
generateField() Generate the field id and name for the HTML output.
prefix() Add text before the textarea 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 label 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 HTML output.
widget() Instantiates the Image::class.