Перейти к публикации

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


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

Всем привет!

 

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

 

Я это реализовал, но при данном подходе, получается ерунда полная. Это и то, что при повторной загрузке первый файл видно и то, что вставляется не 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/)

Изменено пользователем odys
Ссылка на сообщение
Поделиться на других сайтах

Чуток поправил скрипт, теперь если картинка меньше 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 = "";
	}

 

Ссылка на сообщение
Поделиться на других сайтах
  • 3 месяца спустя...
2 часа назад, Alex-68 сказал:

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

http://api.imgur.com/

 

Ссылка на сообщение
Поделиться на других сайтах
32 минуты назад, odys сказал:

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

7430140m.jpg

Ссылка на сообщение
Поделиться на других сайтах
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>

 

Ссылка на сообщение
Поделиться на других сайтах

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

Ссылка на сообщение
Поделиться на других сайтах
32 минуты назад, Alex-68 сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
4 минуты назад, odys сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
3 минуты назад, Alex-68 сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
  • 10 месяцев спустя...
В 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?

Ссылка на сообщение
Поделиться на других сайтах
On 12.07.2015 at 7:16 AM, odys said:

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

Добрый день!

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

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

YnFFTxf.png

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

 

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

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

СПАСИБО!

Ссылка на сообщение
Поделиться на других сайтах
3 часа назад, Datagor сказал:

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

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

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

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

Ссылка на сообщение
Поделиться на других сайтах

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

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

 

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

Изменено пользователем Datagor
Ссылка на сообщение
Поделиться на других сайтах
  • 4 года спустя...

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

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...