Upload and get images in custom module with custom block form

Question

I need some help I need create slider on the front page with custom block. I create custom module, create custom block and form. How i can get images after upload in form for use in twig-template??

For example i create some block with input[type]=textfield, and use this values in twig-template. How can i use images??

its my code for 'textfield'

<?php

namespace Drupal\dot\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\Core\Block\BlockPluginInterface;
use Drupal\Core\Form\FormStateInterface;


/**
 * Provides a 'SocialLinksBlock' block.
 *
 * @Block(
 *   id = "social_links_block",
 *   admin_label = @Translation("Social Links Block"),
 * )
 */

class SocialLinksBlock extends BlockBase implements BlockPluginInterface {
    /**
     * {@inheritdoc}
     */
    public function blockForm($form, FormStateInterface $form_state) {
        $form = parent::blockForm($form, $form_state);
        // Retrieve existing configuration for this block.
        $config = $this->getConfiguration();
        // Add a form field to the existing block configuration form.
        $form['youtube'] = array(
            '#type' => 'textfield',
            '#title' => t('Youtube link:'),
        );
        $form['google'] = array(
            '#type' => 'textfield',
            '#title' => t('Google link:'),
        );
        $form['twitter'] = array(
            '#type' => 'textfield',
            '#title'=> t('Twitter link:'),
        );
        $form['facebook'] = array(
            '#type' => 'textfield',
            '#title'=> t('Facebook link:'),
        );
        return $form;
    }

    public function blockSubmit($form, FormStateInterface $form_state) {
        // Save our custom settings when the form is submitted.
        $this->setConfigurationValue('youtube', $form_state->getValue('youtube'));
        $this->setConfigurationValue('google', $form_state->getValue('google'));
        $this->setConfigurationValue('twitter', $form_state->getValue('twitter'));
        $this->setConfigurationValue('facebook', $form_state->getValue('facebook'));
    }
    /**
     * {@inheritdoc}
     */
    public function build() {
        $config = $this->getConfiguration();
        $youtube = isset($config['youtube']) ? $config['youtube'] : '';
        $google = isset($config['google']) ? $config['google'] : '';
        $twitter = isset($config['twitter']) ? $config['twitter'] : '';
        $facebook = isset($config['facebook']) ? $config['facebook'] : '';

        return array(
            '#theme' => 'block--sociallinksblock',
            '#youtube' => $youtube,
            '#google' => $google,
            '#twitter' => $twitter,
            '#facebook' => $facebook,
        );
    }
}

Answer 1

In Drupal there is not much help available to store images in configuration. You would need to do most things yourself, like build the form fields, submit and store the images and take care how they should be rendered.

But Drupal has a great infrastructure to store images in content. So the better approach is probably not to use a block plugin, but to create a custom block type, which is content like a node. Here you can add the image fields and configure how they should be rendered in ui.