@mentor-medier/lead-art-block v5.13.3
@wpmedia/lead-art-block
Fusion News Theme lead art block. Please provide a 1-2 sentence description of what the block is and what it does.
Acceptance Criteria
- Add AC relevant to the block
Props
| Prop | Required | Type | Description |
|---|---|---|---|
| customFields.enableAutoplay | no | boolean | If the lead art type is video, configures the video to autoplay on page load. If value is true it will autoplay the video. If value is false, it will not autoplay the video. |
| required prop | yes | ||
| optional prop | no | ||
| contentConfig example | Please specify which content sources are compatible |
ANS Schema
Outline any schema information requirements necessary to know for ths block
ANS Fields
promo_items.lead_artorpromo_items.basic=lead_artlead_art.captionlead_art.subtitlelead_art.creditslead_art.contentlead_art.typedetermines what kind of content to render with
Internationalization fields
| Phrase key | Default (English) |
|---|---|
global.gallery-expand-button | Expand |
global.gallery-autoplay-button | %{current} of %{total} |
global.gallery-pause-autoplay-button | Autoplay |
global.gallery-page-count-text | Pause autoplay |
Events
Blocks can emit events. When the LeadArt component is functioning as a Gallery, it will emit events for when the next or previous image is viewed.
| Event Name | Description |
|---|---|
| galleryImageNext | The next image is viewed |
| galleryImagePrevious | The previous image is viewed |
Event Listening
If you want to listen to these events, the first thing is to import the EventEmitter object
into your code:
import { EventEmitter } from '@wpmedia/engine-theme-sdk'
Then create a callback function such as:
const myGalleryImageNext = (event) => {console.log('Here is the event: ', event);}
const myGalleryImagePrevious = (event) => {console.log('Here is the event: ', event);}
Then use you use your callback in subscribing to the event:
EventEmitter.subscribe('galleryImageNext', (event) => myGalleryImageNext(event));
EventEmitter.subscribe('galleryImagePrevious', (event) => myGalleryImagePrevious(event));
The event object for these events will contain the following information:
eventName (String): The event name fired. In this case could be either galleryImageNext or galleryImagePrevious.
ansGalleryId (String): The id of the gallery.
ansGalleryHeadline (String): The headline for the gallery.
ansImageId (String): The id for the current image.
caption (String): The caption for the current image.
orderPosition (Number): The position in the carousel for the current image.
totalImages (Number): Total number of images in the carousel.
autoplay (boolean): whether or not the event triggered during autoplay. Value is either true or false.
Additional Considerations
This is optional. Please add an additional context that would be important to know in order to use this block.
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago