LayoutHub
  • What is LayoutHub?
  • User guides
    • Support
    • Installation
    • Uninstallation
    • Upgrade/Downgrade
    • FAQs
      • How to remove instagram section from Layouthub
      • What is "Pages limit"?
      • When can I "Edit code"?
      • What about "Save section"?
      • What is " Auto save draft"?
      • What is "Integration Services"?
      • How to set the same font between Shopify and LayoutHub?
      • How to custom font and color on LayoutHub?
      • How to set "Page handle or human url"?
      • Connective Button
      • How to save page without publish it
      • How to change the meta SEO for LayoutHub's page
    • Common Issues
    • Layout Management
      • Create Layouts
      • Design Blocks
      • Export & Import
      • Edit Section Code
      • Edit a Layout
      • Assign a Layout
      • Duplicate a Layout
      • Delete a Layout
    • Section builder
    • LayoutHub pages/templates
      • Home Page
        • Create additional Home Page
        • Make an existing page as home page
        • Restore to default Home Page
        • Customize Shopify Home Page
      • Sub-page
        • Contact Form
      • Product Template
        • Product Detail
        • Related Product
      • Collection Template
      • Blog Templates
      • Article Templates
      • Insert section
    • Pricing Plans
    • Settings
      • General
      • Theme Settings
      • Quickview Settings
      • Swatch color settings
      • Third party Apps
        • Product Review
        • Product Wishlist
    • Trash
    • Sale Tools
    • Referrals
    • Integration
      • Add/Edit Profile
      • Add New Contact
      • Export Contact
      • Mailchimp
      • Hubspot
      • ActiveCampaign
      • GetResponse
      • SendGrid
      • Gmail SMTP
      • Google Sheets
      • Omnisend
      • Klaviyo
      • ConvertKit
    • Tracking & Analytics
    • Layouthub & Shopify
    • Translate Apps
    • Recommend apps
      • Avada SEO Optimization
      • Ali Reviews ‑ Product Reviews
      • Ryviu: Product Reviews App UGC
      • Quick View by Secomapp
      • LAI AliExpress Reviews
      • Judge.me Product Reviews
      • Growave - Loyalty, Wishlist, Reviews UGC
      • Opinew Product Reviews
    • Refund Policy
    • Instagram token
  • Development
    • Getting started
    • Tools
      • LayoutHub Kit (for LayoutHub developers only)
      • LayoutHub Kit Extension for Visual Studio Code
    • Layout Structure
    • Reference
      • Engine syntax
        • Deprecated: March 2020
        • Chuẩn template má»›i - LayoutHub Editor V4
      • Create a section
      • Components
      • Liquid in section
      • Javascript in section
      • Register vendors
      • Settings.js
        • Call-to-action
        • Text
        • Textarea
        • Text Editor
        • Dropdown
        • Checkbox list
        • Checkbox radio
        • Toggle
        • Number slider
        • Number
        • Single image
        • Image library
        • Color picker
        • Icon picker
        • Font picker
        • Background
        • Picker
        • Group fields
Powered by GitBook
On this page
  • Arguments
  • Code example

Was this helpful?

  1. Development
  2. Reference
  3. Settings.js

Single image

The complete filed using for a single image, the out put will be full of img tag with attributes

Arguments

Name

Type

Value

Description

type

string

single_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)

[{

src: string, //'%URL%/image.jpg'

alt: string,

class: string

}]

on

object

(optional)

Add listener events for setting field (Supported all event )

Code example

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


<div class="sample-demo">
	
	<p>   
		@print(section.settings.img)
		
	</p>
	
</div>
[
    {
        name: 'img',
        label: 'Single image',
        type: 'single_image',
        value: {
	        src: '%URL%thumbnail.jpg',
	        alt: 'Call to action',
	        class: 'hub-img'
        }
    }
]

PreviousNumberNextImage library

Last updated 5 years ago

Was this helpful?

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

click here
1MB
single_image.zip
archive