Image library

The setting field type Image

Arguments

Name	Type	Value	Description
type	string	image	The type of setting
name	string	{field_name}	The unique name will be used in template
label	string	(optional)	The label that appears above of the setting field.
description	string	(optional)	The description that appears above under of the setting field.
tooltip	string	(optional)	The long description that appears on the tooltip when hover on.
value	object	(optional)	[{ thumbnail: string, value: string, name: string }]
options	object	(optional)	{ multiple: boolean (default false), layout: string (grid|list) }
on	object	(optional)	Add listener events for setting field (Supported all event )

Code example

section.lh

@schema
{
	"name"		: "Image Library",
	"author"	: "LayoutHub",
	"website"	: "https://www.LayoutHub.com"
}
@endschema

<div class="sample-demo">
	@if (section.settings.image !== '')
		<h3>No image selected</h3>
	@endif
	<h1>Single image</h1>
	<p><img src="@attr(section.settings.image)" width="250" /></p>
	<h1>Multiple images</h1>
	
	@include('gallery')
	
</div>

settings.js

[
    {
        name: 'image',
        label: 'Select an image',
        type: 'image',
        value:{
        	thumbnail: '%URL%thumbnail.jpg',
        	value: '%URL%thumbnail.jpg',
        	name: 'Default'
        }
    },
    {
        name: 'images',
        label: 'Images Gallery',
        type: 'image',
        value: [
	        {
	        	thumbnail: '%URL%thumbnail.jpg',
	        	value: '%URL%thumbnail.jpg',
	        	name: 'Default'
	        },
	        {
	        	thumbnail: '%URL%thumbnail.jpg',
	        	value: '%URL%thumbnail.jpg',
	        	name: 'Default'
	        }
        ],
        options: {
	        multiple: true,
	        layout: 'list'
        }
    }
]

includes/gallery.lh

<ul>
	@print(section.settings.image)
	@for (section.settings.images as img)
		<li><img src="@attr(img.value)" width="250" /></li>
	@endfor
</ul>

Download .ZIP

Download the sample file below and unzip in the developer direction. If you still have not activated developer mode, click here.

15KB

image.zip

archive

How it works

The Image field works in the editor