Контроль зображення дозволяє вибрати одне зображення з вашої медіатеки. Після вибору зображення ви можете вибрати розмір зображення.
Ви можете використовувати повернуті id та size для відображення зображення на вашій сторінці або як background-image через властивість контролю CSS. Дивіться приклад коду нижче.
ПОРАДА: Виберіть найменший можливий розмір зображення, при якому зображення все ще виглядає чітким. Це допомагає зменшити час завантаження вашого вебсайту і є чудовим для SEO, оскільки час завантаження є важливим фактором ранжування для пошукових систем.
class Prefix_Element_Image extends EslElement {// Налаштування контролів двигунаpublic function set_controls() {$this->controls['exampleImage'] = ['tab' => 'content','label' => esc_html__( 'Зображення', 'esl' ),'type' => 'image',// Використовуйте вибране зображення як фонове зображення// 'css' => [// [// 'property' => 'background-image',// 'selector' => '.esl-video-overlay-image',// ],// ],];}// Відображення HTML елементаpublic function render() {// Виведення налаштувань 'exampleImage' на екран// var_dump( $this->settings['exampleImage'] );if ( isset( $this->settings['exampleImage'] ) ) {// Відображення <img> тегу, надаючи 'id' і 'size' зображення//echo wp_get_attachment_image($this->settings['exampleImage']['id'],$this->settings['exampleImage']['size'],false,[] // Атрибути зображення);} else {esc_html_e( 'Зображення не вибрано.', 'esl' );}}}