Описание изображений в форме загрузки файлов на сервер

вопрос

1 суть
Добавить в стандартный загрузчик DLE возможность подписывать изображения с последующей вставкой в тело новости изображения вместе с прописанными тегами alt. В DLE 9.5 это реализовано при вставке изображений с других сайтов, но при добавлении фото на сервер приходится всё так же продолжать сё прописывать ручками

2 подробное объяснение, желаемый результат

На данный момент формат публикаций изображений в статье имеет вид:

имеющий несколько недостатков:
- после вставки фото в статью получаем код

[center][thumb]http://dle-faq.ru/uploads/posts/2012-03/1332298434_1.jpg[/thumb][/center]

в который уже вручную приходится добавлять альт для изображения, а так же, в моём случае, подпись. Т.е. в конечном итоге у меня этот код выглядит так:

[center][thumb=|подпись к фото]http://dle-faq.ru/uploads/posts/2012-03/1332298434_1.jpg[/thumb]
[b]подпись к фото[/b][/center]

- приходится запоминать имена изображений чтобы добавить их в статью в требуемом порядке и дать им соответствующее описание, либо клацать каждый раз на "просмотр" *этот недостаток у себя уже ликвидировал

хочется же чтобы загрузка фото приняла примерно вид:

И при клике на превью, либо на [ Вставить изображение ]в тело новости прописывался код
в первом случае (с предыдущего скриншота, для изображения создана уменьшенная копия, для изображения ввели описание):

[center][thumb=|Фото лошади серой масти]http://сайт.ru/uploads/posts/2012-03/1330963604_3.jpg[/thumb]
[b]Фото лошади серой масти[/b][/center]

во втором случае (с того же скриншота, для изображения создана уменьшенная копия, для изображения не ввели описание)? конкретно для меня не критично, а вот другим может понадобиться:

[center][thumb]http://сайт.ru/uploads/posts/2012-03/1330963646_4.jpg[/thumb][/center]

и аналогично для тегов [img]

Выравнивание по левой и правой стороне меня мало интересует, посему при них и не заикаюсь, да и главное чтобы переменная была, вставить её в текст с выравниванием не составит труда

3 причины возникновения проблемы (если кому-то интересно)

4 предпринятые действия, промежуточный результат, необходимые файлы

так как мои знания в программировании ничтожны все попытки добиться результата описывать не буду. где какие куски кода взять знаю, а вот как их правильно написать - увы нет.

теперь по порядку:
в прикрепленном архиве присутствуют следующие файлы:
files.php оригинальный файл из dle
bbcodes.js файл в котором, как мне кажется, присутствует недостающий js код (о нём ниже)
мой files.php в котором дабы хоть как-то облегчить себе жизнь изменены следующие строки:
558 и 584 -

добавил переносы строк, теги =| и [b][/b]

1350 добавлено отображение превью для уменьшенных изображений (thumb)
1352 закомментировал, ибо оригиналы не юзаю
1358 добавил отображение для изображений разрешение которых меньше чем установленные в настройках минимальные размеры для создания превью

теперь мысли о том как осуществить желаемое, возможно не правильные:
в 168-248 bbcodes.js присутствуют необходимые мне строки, как минимум 181-185; 220-223; 225; которые надо как-то прилепить ~553-555 строку files.php а так же из bbcodes.js 235 строки форма с name='dle-image-alt' id='dle-image-alt'которую нужно добавить ~1364-1369 строку files.php однако недостаток знаний не позволяет добиться успешного результата, в добавок демотивирует отсутствие уверенности в том что я вообще двигаюсь в верном направлении.

В итоге:
необходимо чтобы для каждого загруженного изображения выводилась форма из которой при вставке изображения брались введённые данные и добавлялись в alt изображения
Благодарю за внимание, буду рад любой помощи
PS думаю если написать данный хак с учётом возможных расположений изображения ( left right ), присутствие/отсутстие заполнения поля описания и т.п. - он пригодится не только мне

Внимание! У вас нет прав для просмотра скрытого текста.

Ответа пока нет

{$lang['images_align']}     <select name='imageAlign'>
          <option value="none" {$image_align[0]}>{$lang['opt_sys_no']}</option>
          <option value="left" {$image_align['left']}>{$lang['images_left']}</option>
          <option value="right" {$image_align['right']}>{$lang['images_right']}</option>
          <option value="center" {$image_align['center']}>{$lang['images_center']}</option>
        </select>

echo "if (imageAlign == 'center') finalImage = \"[center][img]\"+ selectedImage +\"[/img][/center]\";
        else finalImage = \"[img=\"+ imageAlign +\"]\"+ selectedImage +\"[/img]\";
         ";
    } else {
        echo "if (imageAlign == 'center') finalImage = \"<div style=\\\"text-align: center;\\\"><img src=\\\"\"+ selectedImage +\"\\\"></div><div></div>\";
        else finalImage = \"<img align=\\\"\"+ imageAlign +\"\\\" src=\\\"\"+ selectedImage +\"\\\">\";";

        echo "if (imageAlign == '') finalImage = \"[center][img]\"+ selectedImage +\"[/img][/center]\";
            else finalImage = \"[center][img=|\"+ imageAlign +\"]\"+ selectedImage +\"[/img]\\n[b]\"+ imageAlign +\"[/b][/center]\";
         ";
    } else {
        echo "if (imageAlign == '') finalImage = \"<div style=\\\"text-align: center;\\\"><img src=\\\"\"+ selectedImage +\"\\\"></div><div></div>\";
        else finalImage = \"<img alt=\\\"\"+ imageAlign +\"\\\" src=\\\"\"+ selectedImage +\"\\\">\";";

echo "if (imageAlign == 'center') finalImage = \"[center][thumb]\"+ selectedImage +\"[/thumb][/center]\";
else finalImage = \"[thumb=\"+ imageAlign +\"]\"+ selectedImage +\"[/thumb]\";

echo "if (imageAlign == '') finalImage = \"[center][thumb]\"+ selectedImage +\"[/thumb][/center]\";
else finalImage = \"[center][thumb=|\"+ imageAlign +\"]\"+ selectedImage +\"[/thumb]\\n[b]\"+ imageAlign +\"[/b][/center]\";

$thumb_link = "<a class=maintitle href=\"javascript:insertthumb('" . $config['http_home_url'] . "uploads/posts/" . $folder_prefix . $dataimages . "','')\">$dataimages</a>";

                    $original_link = "[ <a class=maintitle href=\"javascript:insertimage('" . $config['http_home_url'] . "uploads/posts/" . $folder_prefix . $dataimages . "')\">{$lang['img_orig_ins']}</a> ] ";
                    $link_id = "thumbimage";

                } else {

                    $thumb_link = "<a class=maintitle href=\"javascript:insertimage('" . $config['http_home_url'] . "uploads/posts/" . $folder_prefix . $dataimages . "')\">$dataimages</a>";

$thumb_link = "<a class=maintitle href=\"javascript:insertthumb('" . $config['http_home_url'] . "uploads/posts/" . $folder_prefix . $dataimages . "','')\"> <img width='100' border='0' src='".$config['http_home_url'] . "uploads/posts/" . $folder_prefix."thumbs/".$dataimages."' title='Нажмите для вставки уменьшенного изображения ".$dataimages."'><br/>[ Вставить изображение ]</a>";

/*                    $original_link = "[ <a class=maintitle href=\"javascript:insertimage('" . $config['http_home_url'] . "uploads/posts/" . $folder_prefix . $dataimages . "')\">{$lang['img_orig_ins']}</a> ] ";
*/
                    $link_id = "thumbimage";

                } else {

                    $thumb_link = "<a class=maintitle href=\"javascript:insertimage('" . $config['http_home_url'] . "uploads/posts/" . $folder_prefix . $dataimages . "')\"> <img width='100' border='0' src='".$config['http_home_url'] . "uploads/posts/" . $folder_prefix.$dataimages."' title='Нажмите для вставки изображения ".$dataimages."'><br/>[Вставить изображение]</a>";

[not-available=userinfo] <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div> <nav class="navigation"[available=lastcomments] style="padding: 4% 8%;"[/available]> <div class="page_next-prev"> <span class="page_prev" title="Предыдущая страница"> [prev-link]<svg class="icon icon-left"><use xlink:href="#icon-left"></use></svg>[/prev-link] </span> <span class="page_next" title="Следующая страница"> [next-link]<svg class="icon icon-right"><use xlink:href="#icon-right"></use></svg>[/next-link] </span> </div> <ul class="pagination"> {pages} </ul> </nav> <script type="text/javascript"> $(document).ready(function(){ $('body').on('click','#nav-load a',function(){ var urlNext = $(this).attr('href'); var scrollNext = $(this).offset().top - 200; if (urlNext !== undefined) { $.ajax({ url: urlNext, beforeSend: function() { ShowLoading(''); }, success: function(data) { $('.navigation').remove(); $('#nav-load').remove(); $('#dle-content').append($('#dle-content', data).html()); $('#dle-content').after($('#bottom-nav')); window.history.pushState("", "", urlNext); $('html, body').animate({scrollTop:scrollNext}, 800); HideLoading(''); }, error: function() { HideLoading(''); alert('что-то пошло не так'); } }); }; return false; }); }); </script> [/not-available]

3 комментария

Юзер

181

Mr. Hyde - 2014-05-2521 марта 2012 20:57 - #4334

***Комментарий удален***

OTM - 2014-05-2522 марта 2012 03:52 - #4336

ещё немного облегчил себе жизнь, реализация конечно жопорукая, и подойдёт далеко не каждому, меня так же полностью не устраивает. для реализации использовал под свои нужды уже имеющуюся форму с именем properties , которая никогда не использовалась, ибо выравнивание всегда по центру, правки файла выполнены с учётом используемого выравнивания

теперь добавление изображений выглядит следующим образом:
загружаем изображения на сервер, вводим описание изображения в текстовое поле, кликаем на изображение которое описали, описываем следующее изображение - кликаем по следующему. Если оставили поле пустым - выводит без описания и форматирования.
Минусы реализации: нельзя подписать отдельно каждое фото, и уже потом расставить их по своим местам в статье. Так же нельзя отметить и вставить все сразу так, чтобы для каждого фото прописалась своё описание, сейчас получается что при подобном действии для всех фото пропишется одно и тоже описание.

OTM - 2014-05-2522 марта 2012 03:53 - #4337

Правки относительно оригинального files.php + скриншот результата :

1282-1287 строки:

{$lang['images_align']}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name='imageAlign'>
          <option value="none" {$image_align[0]}>{$lang['opt_sys_no']}</option>
          <option value="left" {$image_align['left']}>{$lang['images_left']}</option>
          <option value="right" {$image_align['right']}>{$lang['images_right']}</option>
          <option value="center" {$image_align['center']}>{$lang['images_center']}</option>
        </select>

заменил на

Описание&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input name='imageAlign' value=""  type="text"/>

558-563 строки:

заменил на:

584-585 строки:

для отображения превью:
1346-1353 строки

после изменений выглядит следующим образом:
radikal.ru/F/s019.radikal.ru/i600/1203/2f/b87df317a5f1.jpg

Описание изображений в форме загрузки файлов на сервер

Ответа пока нет

3 комментария

Похожие вопросы

Слайдшоу из одного многокдрового изображения

Не работает картинка всплывающем окне

Исключающие правило для "системных" изображений

Касательно изображений и тумбов

как добавить класс изображения в новости

Разные размеры для первого и последующих изображений в новости

Jquery галерея картинок в новости

Просмотр изображения при клике на колесико

zoom изображения

Выбор видимой части изображения при загрузке