Extension Writers Discussion • Thumbnail in ACP

Code:

<?php/** * Custom 404 Page ACP module * * @package mundophpbb\custom404\acp * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2 */namespace mundophpbb\custom404\acp;class main_module{    public $u_action;    public $tpl_name = '@mundophpbb_custom404/acp_custom404';    public $page_title = 'ACP_CUSTOM404_TITLE';    /**     * Main ACP module     *     * @param int    $id   The module ID     * @param string $mode The mode (settings)     */    public function main($id, $mode)    {        global $phpbb_container, $user;        /** @var \phpbb\language\language $language */        $language = $phpbb_container->get('language');        /** @var \phpbb\request\request $request */        $request = $phpbb_container->get('request');        /** @var \phpbb\config\config $config */        $config = $phpbb_container->get('config');        /** @var \phpbb\template\twig\twig $template */        $template = $phpbb_container->get('template');        /** @var \phpbb\filesystem\filesystem $filesystem */        $filesystem = $phpbb_container->get('filesystem');        // Add language files        $language->add_lang('acp_common', 'mundophpbb/custom404');        $language->add_lang('posting');        // Add form key for security        add_form_key('mundophpbb_custom404');        // Handle form submission        if ($request->is_set_post('submit'))        {            if (!check_form_key('mundophpbb_custom404'))            {                trigger_error('FORM_INVALID', E_USER_WARNING);            }            // Save settings to config            $config->set('custom404_title', $request->variable('custom404_title', '404 Not Found'));            $config->set('custom404_message', $request->variable('custom404_message', 'The page you are looking for was not found.', true));            $config->set('custom404_image_alt', $request->variable('custom404_image_alt', '404 Error Image'));            $config->set('custom404_image_path', $request->variable('custom404_image_path', ''));            trigger_error($language->lang('ACP_CUSTOM404_SAVED') . adm_back_link($this->u_action));        }        // Prepare BBCode message for editing        $message = isset($config['custom404_message']) ? $config['custom404_message'] : 'The page you are looking for was not found.';        $uid = $bitfield = $flags = '';        generate_text_for_storage($message, $uid, $bitfield, $flags, true, true, true);        // Check if SCEditor templates are available        $sceditor_available = file_exists($phpbb_container->getParameter('core.root_path') . 'adm/style/posting_buttons.html') &&                              file_exists($phpbb_container->getParameter('core.root_path') . 'adm/style/posting_editor.html');        // Get list of images in styles/all/theme/images        $image_dir = $phpbb_container->getParameter('core.root_path') . 'ext/mundophpbb/custom404/styles/all/theme/images/';        $images = [];        if ($filesystem->exists($image_dir))        {            $files = scandir($image_dir);            foreach ($files as $file)            {                $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));                if (in_array($ext, ['png', 'jpg', 'jpeg', 'gif']) && $filesystem->is_readable($image_dir . $file))                {                    $images[] = $file;                }            }            sort($images);        }        // Prepare image options for dropdown        $image_options = [];        $default_image_path = 'ext/mundophpbb/custom404/styles/all/theme/images/404_error.png';        $selected_image_path = isset($config['custom404_image_path']) && $config['custom404_image_path'] ? $config['custom404_image_path'] : $default_image_path;        foreach ($images as $image)        {            $encoded_image = rawurlencode($image);            $image_path = 'ext/mundophpbb/custom404/styles/all/theme/images/' . $encoded_image;            $image_options[] = [                'VALUE'    => $image_path,                'SELECTED' => ($config['custom404_image_path'] === $image_path) ? ' selected="selected"' : '',                'LABEL'    => htmlspecialchars_decode($image),            ];        }        // Assign template variables        $template->assign_vars([            'U_ACTION'              => $this->u_action,            'CUSTOM404_TITLE'       => isset($config['custom404_title']) ? $config['custom404_title'] : '404 Not Found',            'CUSTOM404_MESSAGE'     => generate_text_for_edit($message, $uid, $flags)['text'],            'CUSTOM404_IMAGE_ALT'   => isset($config['custom404_image_alt']) ? $config['custom404_image_alt'] : '404 Error Image',            'CUSTOM404_IMAGE_PATH'  => $selected_image_path,            'S_BBCODE_ALLOWED'      => true,            'S_BBCODE_IMG'          => true,            'S_BBCODE_URL'          => true,            'S_BBCODE_QUOTE'        => true,            'S_BBCODE_FLASH'        => false,            'S_FORM_ENCODE'         => ' enctype="multipart/form-data"',            'S_BBCODE_EDITOR'       => $sceditor_available,            'SIG_EDIT'              => false,            'S_LINKS_ALLOWED'       => true,            'MAX_FONT_SIZE'         => $config['max_post_font_size'] ?? 200,        ]);        // Assign image options to template        foreach ($image_options as $option)        {            $template->assign_block_vars('image_options', $option);        }        // Include BBCode editor resources if available        if ($sceditor_available)        {            $user->add_lang('posting');            include_once($phpbb_container->getParameter('core.root_path') . 'includes/functions_posting.' . $phpbb_container->getParameter('core.php_ext'));        }    }}

Code:

<script type="text/javascript">    function updateImagePreview() {        var select = document.getElementById('custom404_image_path');        var previewImg = document.getElementById('preview-image');        var previewDiv = document.getElementById('image-preview');        if (select.value) {            if (!previewImg) {                previewImg = document.createElement('img');                previewImg.id = 'preview-image';                previewImg.className = 'thumbnail';                previewImg.alt = '{CUSTOM404_IMAGE_ALT|escape('js')}';                previewDiv.appendChild(previewImg);            }            previewImg.src = select.value;        } else {            if (previewImg) {                previewImg.remove();            }        }    }</script>