Overlay Images
Use the following code snippet in order to create an Article header with an overlaid image, a title and a profile picture.
public function tab1() { $this->layout = new stdClass(); $this->layout->scroll[] = $this->getComponentText('Overlay Images', [], [ 'padding' => '10 15 10 15', 'font-size' => '19', ]); $this->layout->scroll[] = $this->getComponentRow([ $this->getComponentColumn([ $this->getComponentRow([ $this->getComponentImage('profile.jpg', [ ], [ 'crop' => 'round', 'width' => '30', 'height' => '30', 'vertical-align' => 'middle' ]), $this->getComponentText(strtoupper('An image of a see'), [], [ 'color' => '#ffffff', 'font-size' => '19', 'padding' => '15 15 15 15', 'vertical-align' => 'middle', ]) ], [], [ 'width' => 'auto', 'margin' => '0 15 0 15', 'vertical-align' => 'bottom', ]) ], [], [ 'width' => 'auto', 'height' => $this->screen_height / 3, 'background-image' => $this->getImageFileName('shadow-image-wide.png'), 'background-size' => 'cover', ]) ], [], [ 'width' => 'auto', 'height' => $this->screen_height / 3, 'background-image' => $this->getImageFileName('see.jpg'), 'background-size' => 'cover', ]); $this->layout->overlay[] = $this->components->uiKitFloatingButtons([ [ 'icon' => 'layouts-exit-icon.png', 'onclick' => $this->getOnclickRoute('Controller/Default', false) ], ], true); return $this->layout; }