کنترل Image

کنترل Image به شما امکان می‌دهد یک تصویر واحد را از کتابخانه رسانه خود انتخاب کنید. پس از انتخاب یک تصویر، می‌توانید اندازه تصویر را انتخاب کنید.

می‌توانید از تصویر بازگشتی id و size برای ارائه یک تصویر در صفحه خود یا به عنوان background-image از طریق ویژگی کنترل CSS استفاده کنید. نمونه کد زیر را ببینید.

توجه

نکته: کوچک‌ترین اندازه تصویر ممکن را انتخاب کنید که در آن تصویر همچنان واضح به نظر می‌رسد. این به کاهش زمان بارگذاری وب‌سایت شما کمک می‌کند و برای سئو عالی است، زیرا زمان بارگذاری یک فاکتور مهم رتبه‌بندی برای موتورهای جستجو است.

class Prefix_Element_Image extends \Bricks\Element {
  // Set builder controls
  public function set_controls() {
    $this->controls['exampleImage'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Image', 'bricks' ),
      'type' => 'image',
      // Use the selected image as a background image
      // 'css' => [
      //   [
      //     'property' => 'background-image',
      //     'selector' => '.bricks-video-overlay-image',
      //   ],
      // ],
    ];
  }

  // Render element HTML
  public function render() {
    // Dump 'exampleImage' settings on the screen
    // var_dump( $this->settings['exampleImage'] );

    if ( isset( $this->settings['exampleImage'] ) ) {
      // Render <img> tag by prodiving image 'id' and 'size'
      //
      echo wp_get_attachment_image(
        $this->settings['exampleImage']['id'],
        $this->settings['exampleImage']['size'],
        false,
        [] // Image attributes
      );
    } else {
      esc_html_e( 'No image selected.', 'bricks' );
    }
  }
}