Загрузка картинок к комментариям

odys · 12 июля 2015

Всем привет!

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

Я это реализовал, но при данном подходе, получается ерунда полная. Это и то, что при повторной загрузке первый файл видно и то, что вставляется не img, а thumb или medium, если картинка была уменьшена и т.д... В общем это было абсолютно не вариант. Ещё одним важным для меня фактором не использовать этот метод, то что картинки бы хранились у меня на сервере, а в комментариях их бывает очень много и зачастую пользователи вообще не знают, что такое оптимизация картинки загружая фотографию весом в 4-5 мб. Пришлось искать альтернативу.

Ну и получается, если загружать картинку на сторонний сервис, то этот сервис должен иметь API для загрузки картинок, конечно могли бы подойти облочные хранилища (dropbox, box.com, яндекс.картинки и т.д.) и чуток почитав документацию по API пришёл к выводу, что это получиться довольно объёмный код и к тому же, по «кривизне рук» можно навредить безопасности. Поэтому нужно было какое-нибудь очень простое, но в тоже время эффективное решение. И в поисках наткнулся на статью на Хабре про imgur и про то, что он поддерживает кроссдоменный XMLHttpRequest (кто не в курсе, кроссдоменный и javascript, сложно-совместно-работающие вещи, если можно так сказать), начал рыть в этом направлении. И о чудо, на GitHub`е нахожу проект https://github.com/paulrouget/miniuploader который использует вышеупомянутый imgur.

Это как раз то, что я искал, осталось только прикрутить к DLE, начнём? Естественно начну с примера: http://www.menville.net/ (для гостей закрыто, нужно авторизоваться).

Установка не сложная, но придётся внести маленькую правку в движок, а конкретно в ББ-редактор комментариев.

Нужно найти в файле /engine/modules/bbcode.php:

if ($user_group[$member_id['user_group']]['allow_image']) {
			$image_link = "<b id=\"b_img\" class=\"bb-btn\" onclick=\"tag_image()\" title=\"{$lang['bb_b_img']}\"></b>";
		} else $image_link = "";

и после вставить:

		if ($is_logged)
		{
		  $image_upload = "<b id=\"b_img\" class=\"bb-btn\" title=\"{$lang['bb_b_img']}\"></b>";
		}

Затем ниже, найти:

{$image_link}

и заменить на:

{$image_upload}

ещё чуть ниже найти:

<div id="dle_emos" style="display: none;" title="{$lang['bb_t_emo']}"><div style="width:100%;height:100%;overflow: auto;">{$output}</div></div>

и перед или после, не имеет значения, вставить:

<div id="dle_commimgs" style="display:none;"><div id="imageupload"><div class="drop"><button class="btn btn-info btn-block btn-lg" onclick="document.querySelector('input').click()">Нажми для загрузки картинки</button></div><input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])"><p class="dropp">Загрузка, подожди...</p></div></div>

Теперь в файл fullstory.tpl нужно вставить скрипт обработчик:

window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function upload(file) {

	if (!file || !file.type.match(/image.*/)) return;

	document.body.className = "uploading";

	var fd = new FormData();
	fd.append("image", file);
	var xhr = new XMLHttpRequest();
	xhr.open("POST", "https://api.imgur.com/3/image.json");
	xhr.onload = function() {
		var textarea=document.getElementById('comments');
		textarea.value+="\n[\img]"+JSON.parse(xhr.responseText).data.link+"[\/img]\n";
		$('#imgeminiup').dialog('close');
		document.body.className = "";
	}
	
	xhr.setRequestHeader('Authorization', 'Client-ID 122436372346234274');
	
	xhr.send(fd);
}


$(document).ready(function() {
$('#b_img').each(function() {
	var $link = $(this);
	var $dialog = $('<div id="imgeminiup">'+document.getElementById("dle_commimgs").innerHTML+'</div>')
		.dialog({
			autoOpen: false,
			title: $link.attr('title'),
			width: 280
		});

	$link.click(function() {
		$dialog.dialog('open');

		return false;
	});
});
});

Вообще, его можно вставить в любое место, но лучше конечно завернуть в отдельный файл и прописать в head или footer, у кого как...

и чуть-чуть стилей:

div.drop {width:100%;display:inline-block;}
p.dropp , div.drop {display:none}
div.drop {display: inline-block;}
.uploading div.drop {display:none;}
.uploading p.dropp {display:inline;}

Теперь осталось только получить Client-ID от imgur, http://api.imgur.com/ регистрируемся и получаем его, вставлять его нужно в скрипте, вместо

122436372346234274

Собственно это и всё. Ну и для тех, кто если вдруг будет размещать эту информацию на сайтах хаков и модулей по DLE — будь человеком, укажи источник (http://www.menville.net/)

Изменено 12 июля 2015 пользователем odys

odys · 16 июля 2015

Чуток поправил скрипт, теперь если картинка меньше 640px по ширине, будет вставляться превтюшка с ссылкой на полную картинку. Нужно в скрипте эту часть

xhr.onload = function() {
	var textarea=document.getElementById('comments');
	textarea.value+="\n[\img]"+JSON.parse(xhr.responseText).data.link+"[\/img]\n";
	$('#imgeminiup').dialog('close');
	document.body.className = "";
}

заменить на

	xhr.onload = function() {
		var textarea=document.getElementById('comments');
		var iid = JSON.parse(xhr.responseText).data.id;
		var ilink = JSON.parse(xhr.responseText).data.link;
		var fileUrl = JSON.parse(xhr.responseText).data.link;
		parts, itype = ( parts = fileUrl.split("/").pop().split(".") ).length > 1 ? parts.pop() : "";
		var iwidth = JSON.parse(xhr.responseText).data.width;
		var fileUrl = ilink, parts, itype = ( parts = fileUrl.split("/").pop().split(".") ).length > 1 ? parts.pop() : "";
		if (iwidth < 640) {
			textarea.value+="\n[\img]"+ilink+"[\/img]\n";
		} else if (iwidth > 640) {
			textarea.value+="\n[url="+ilink+"][img]http://i.imgur.com/"+iid+"l."+itype+"[/img][/url]\n";
		}
		$('#imgeminiup').dialog('close');
		document.body.className = "";
	}

dimasti · 7 ноября 2015

Благодарю за подробную консультацию.

dimasti · 8 ноября 2015

В центральной части Москвы находится http://moskva-central.ru/presnenskiy-rayon-moskva/ Пресненский район.

Alex-68 · 8 ноября 2015

Я зарегистрирован на imgur , а где там в аккаунте Client-ID ? Не могу найти.

odys · 8 ноября 2015

2 часа назад, Alex-68 сказал:

Я зарегистрирован на imgur , а где там в аккаунте Client-ID ? Не могу найти.

http://api.imgur.com/

Alex-68 · 8 ноября 2015

32 минуты назад, odys сказал:

http://api.imgur.com/

поставил, но при нажатии на эту кнопку ничего не происходит, просто кнопка пустышка

odys · 8 ноября 2015

2 часа назад, Alex-68 сказал:

поставил, но при нажатии на эту кнопку ничего не происходит, просто кнопка пустышка

Действительно не работало...

нужно в этой чпсти:

<div id="dle_commimgs" style="display:none;"><div id="imageupload"><div class="drop"><button class="btn btn-info btn-block btn-lg" onclick="document.querySelector('input').click()">Нажми для загрузки картинки</button></div><input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])"><p class="dropp">Загрузка, подожди...</p></div></div>

заменить на это:

<div id="dle_commimgs" style="display:none;"><div id="imageupload"><div class="drop"><button class="btn btn-info btn-block btn-lg" onclick="document.querySelector('input#upp').click()">Нажми для загрузки картинки</button></div><input id="upp" style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])"><p class="dropp">Загрузка, подожди...</p></div></div>

Alex-68 · 9 ноября 2015

Теперь работает )))) А нельзя эту штуку и к админке прикрутить чтоб можно было и в статические страницы и в новости также вставлять?

odys · 9 ноября 2015

32 минуты назад, Alex-68 сказал:

Теперь работает )))) А нельзя эту штуку и к админке прикрутить чтоб можно было и в статические страницы и в новости также вставлять?

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

Alex-68 · 9 ноября 2015

4 минуты назад, odys сказал:

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

и кстати вопрос, а картинки загруженные таким образом, где на имгуре хранятся? В аккаунте их нет, в паблике тоже...а если мне удалить с имгура нужно будет? Или там они как на свалке будут? )))))))

odys · 9 ноября 2015

3 минуты назад, Alex-68 сказал:

Или там они как на свалке будут?

скорее всего, я не задавался этим вопросом.

Sharemmo · 11 сентября 2016

What made you successful modular please share the link to download the article but no detailed guidance and alternative search no code there.

odys · 12 сентября 2016

В 11.9.2016 в 04:00, Sharemmo сказал:

What made you successful modular please share the link to download the article but no detailed guidance and alternative search no code there.

What do you want to download?

Sharemmo · 15 сентября 2016

On 12/9/2016 at 3:51 PM, odys said:

Bạn muốn tải về những gì?

Download 3rd party modules download images from DLE via Google drive, dropbox.v.v.v . save data for hosts

Datagor · 17 сентября 2016

On 12.07.2015 at 7:16 AM, odys said:

Теперь осталось только получить Client-ID от imgur, http://api.imgur.com/ регистрируемся и получаем его

Добрый день!

К сожалению, видимо что-то поменялось у Имгура

Client-ID не даёт, требует зарегистрировать приложение (WTF?).

Когда идёшь по предложенной ссылке регится - такой страницы НЕ существует на Имгуре. О как!

Подскажите, куда двигаться и работоспособна ли ещё предложенная система?

Или покажите поточнее, где брать ID? Может я не там смотрю...

СПАСИБО!

odys · 17 сентября 2016

3 часа назад, Datagor сказал:

Подскажите, куда двигаться и работоспособна ли ещё предложенная система?

должна, я не проверял, так как в сегодняшней версии dle загрузка картинок уже есть по умолчанию.

Касаемо регистрации, там вверху есть ссылка «sign up» — это регистрация. А ссылка для регистрации приложения должна быть работоспособна после входа в систему.

Только указывай реальный email, именно на него получишь необходимый clientid

Datagor · 18 сентября 2016

Спасибо за ответ!

Я естессно зарегистрирован в Имгуре.

Так где там взять ID? Или забросить этй тему?

Изменено 18 сентября 2016 пользователем Datagor

nezov134 · 11 октября 2020

Модуль ещё актуален? Кто-то проверял?

Загрузка картинок к комментариям

Рекомендованные сообщения

odys 384

Ссылка на сообщение

Поделиться на других сайтах

odys 384

Ссылка на сообщение

Поделиться на других сайтах

dimasti 0

Ссылка на сообщение

Поделиться на других сайтах

dimasti 0

Ссылка на сообщение

Поделиться на других сайтах

Alex-68 5

Ссылка на сообщение

Поделиться на других сайтах

odys 384

Ссылка на сообщение

Поделиться на других сайтах

Alex-68 5

Ссылка на сообщение

Поделиться на других сайтах

odys 384

Ссылка на сообщение

Поделиться на других сайтах

Alex-68 5

Ссылка на сообщение

Поделиться на других сайтах

odys 384

Ссылка на сообщение

Поделиться на других сайтах

Alex-68 5

Ссылка на сообщение

Поделиться на других сайтах

odys 384

Ссылка на сообщение

Поделиться на других сайтах

Sharemmo 1

Ссылка на сообщение

Поделиться на других сайтах

odys 384

Ссылка на сообщение

Поделиться на других сайтах

Sharemmo 1

Ссылка на сообщение

Поделиться на других сайтах

Datagor 31

Ссылка на сообщение

Поделиться на других сайтах

odys 384

Ссылка на сообщение

Поделиться на других сайтах

Datagor 31

Ссылка на сообщение

Поделиться на других сайтах

nezov134 31

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению