Рейтинг@Mail.ru
Jump to content

Уважаемые посетители! Если у вас возникают проблемы с входом, регистрацией или сменой пароля, обращайтесь в эту тему (там можно писать без регистрации) с указанием где возникла проблема - на сайте или форуме.

Sign in to follow this  
Sacret

Гайд по вставке изображений и видео

Recommended Posts

Старый гайд.
[spoil]Т.к. в последнее время новостную ленту заполонили статьи с криво вставленными видео, а авторы упорно игнорируют просьбы нормально вставлять видео в новости, я, как сознательный пользователь и бывалый новостник, не мог не составить этот кратенький мануальчик с картинками. Итак, вы нашли видео, которое ещё не появлялось в новостной ленте, и хотите поделиться им со всеми. Для этого:



[img]http://clip2net.com/clip/m23217/1304877595-clip-62kb.jpg[/img]

[*:31tmafjo] Далее, нужно получить код для вставки этого видео в новость, для этого нажимаете "Отправить", а после "Встроить":
[img]http://clip2net.com/clip/m23217/1304878207-clip-75kb.jpg[/img]

[*:31tmafjo] Если Вы впервый раз пытаетесь скопировать код, то нужно обратить внимание на некоторые детали:


[img]http://clip2net.com/clip/m23217/1304879023-clip-17kb.jpg[/img]

[*:31tmafjo] Вставляем туда скопированный ранее код и нажимаем кнопку "Update"
[img]http://clip2net.com/clip/m23217/1304879210-clip-40kb.jpg[/img]

[*:31tmafjo] В итоге получаем полнофункциональный плеер с возможностью выбора качества видео и полноэкранным режимом просмотра.

[img]http://clip2net.com/clip/m23217/1304879495-clip-60kb.jpg[/img][list=1]
[*:31tmafjo] Выбираете просмотр видео на сайте youtube'a. Самый лёгкий способ это сделать - клацнуть по названию ролика в окне с видео: [*] [img]http://clip2net.com/clip/m23217/1304879443-clip-40kb.jpg[/img][img]http://clip2net.com/clip/m23217/1304878862-clip-8kb.jpg[/img]




[*:31tmafjo] обратите внимание на размер видео. Ширина новостной ленты гейммага составляет 700 пикселей, поэтому выбирайте размер, исходя из этого. Стандартный размер 640 × 390 вполне приемлем, хотя можно подобрать вручную.
[list=1]
[*:31tmafjo] обратите внимание на сам код, а вернее на открывающий тэг (короче, первое слово после <), если код начинается с  
[/list] [*:31tmafjo] Если всё впорядке, можно копировать код (надеюсь, как выделять и копировать текст, все знают). Но что же с ним дальше делать? А дальше возвращайтесь на страницу добавления новости и открывайте "Редактор HTML-кода", нажав на кнопку "HTML":
[/list]

Видео из других источников вставляются аналогично, просто ищите в плеере кнопку с надписью вроде "Embed code" и полученный код вставляйте через "Редактор HTML-кода".

PS: вообще, через HTML можно много хороших вещей делать (например, [url="http://gamemag.ru/news/blitsnovosti-za-9-iyunya-53547"]навигацию внутри новости[/url] или [url="http://gamemag.ru/news/vgchartz-22-yanvarya-sekboi-na-kone-60951"]таблицы[/url]), которые могут приукрасить ваши новости, поэтому рекомендую ознакомиться хотя бы с основами ;)

PSS: надеюсь, пригодится кому-то))[/spoil] Edited by Samson

Share this post


Link to post
Share on other sites
Забыл ещё добавить:

7. Перед публикацией обязательно измените тип новости:

[img]http://clip2net.com/clip/m23217/1304887976-clip-17kb.jpg[/img]

Share this post


Link to post
Share on other sites
сделай что нибудь подобное. например как сделать скриншоты кликабельными :trollface:
личная просьба. или по личке напиши как!

Share this post


Link to post
Share on other sites
[quote name="Legioner"]сделай что нибудь подобное. например как сделать скриншоты кликабельными :trollface:
личная просьба. или по личке напиши как![/quote]
Тебе уже, вроде как, это не пригодится в ближайшие полгода, но намерения сделать и такой мануал у меня тоже есть ;)

Share this post


Link to post
Share on other sites
[quote name="Samson"] [quote name="Legioner"]сделай что нибудь подобное. например как сделать скриншоты кликабельными :trollface:
личная просьба. или по личке напиши как![/quote]
Тебе уже, вроде как, это не пригодится в ближайшие полгода, но намерения сделать и такой мануал у меня тоже есть ;)[/quote]
ты меня не дооцениваешь. :twisted:

Share this post


Link to post
Share on other sites
Вот красная кнопка, которая начнёт ядерную войну. Но нет, лучше мы обучим-приучим ближайших не замечать и обходить, и хитро не задевать эту кнопку, чем убрать её.
Напомнило: у торрент-трекера нашего города в сообщениях нельзя было применять красный цвет, т.к. "это цвет сообщений от админов". Но этот цвет как ни в чём не бывало был в палитре среди других, как сейчас вот справа, когда я набираю это сообщение. Какой смешной у нас мир, я рад, что существую в нём :trollface:

Share this post


Link to post
Share on other sites
[quote name="SUPER_ROBOT"]Вот красная кнопка, которая начнёт ядерную войну. Но нет, лучше мы обучим-приучим ближайших не замечать и обходить, и хитро не задевать эту кнопку, чем убрать её.
Напомнило: у торрент-трекера нашего города в сообщениях нельзя было применять красный цвет, т.к. "это цвет сообщений от админов". Но этот цвет как ни в чём не бывало был в палитре среди других, как сейчас вот справа, когда я набираю это сообщение. Какой смешной у нас мир, я рад, что существую в нём :trollface:[/quote]
Я давно говорил, что надо ту кнопку убрать, а ещё лучше, что бы при нажатии на неё кидало в эту тему))

Share this post


Link to post
Share on other sites
Пойду попробую всякие фичи html, а то совсем новости стали одинаковыми. Если случайно добавлю новость, не быть)
Это я админам 8)

[img]http://i20.fastpic.ru/big/2011/0509/20/863ae465512af9f1d4ff7690b9ef3020.png[/img]
таблицы вообще хорошо :D

Share this post


Link to post
Share on other sites
[b]MWorld II[/b], тогда дам ещё пару советов по оформлению новости =)

[list=1]
[*:203ebex5] После вставки видео вам может захотеться его центрировать. Конечно, самый простой способ - клацнуть по видео в новости и нажать на кнопку "Выровнять по центру" (Align Center). Только после таких действий ваше видео сдвинется на одну линию вниз.
[spoil][img]http://clip2net.com/clip/m23217/1304961020-clip-54kb.jpg[/img][/spoil]
Это такой баг движка и при дальнейшем редактировании новости могут появиться ещё несколько отступов сами по себе. Если они вам не нравятся, то в HTML ищите
[spoil][img]http://clip2net.com/clip/m23217/1304961127-clip-42kb.jpg[/img][/spoil]
Именно конструкция [code]

 

[/code] добавляет пустые строчки. Удаляем их, и всё становится на свои места:
[spoil][img]http://clip2net.com/clip/m23217/1304961270-clip-51kb.jpg[/img][/spoil]

[*:203ebex5] ещё один очень неприятный косяк вылазит при использовании списков или таблиц:
[spoil][img]http://clip2net.com/clip/m23217/1304962072-clip-89kb.jpg[/img][/spoil]
Случается, если положиться на автоматическое добавление новых пунктов меню после нажатия Enter.
Решение? Добавить

после каждого открывающего тэга для нового пункта списка:
[spoil][img]http://clip2net.com/clip/m23217/1304962232-clip-87kb.jpg[/img][/spoil]
Закрывающие тэги движок добавит сам (хоть тут он пригодится). Результат:
[spoil][img]http://clip2net.com/clip/m23217/1304962380-clip-104kb.jpg[/img][img]http://clip2net.com/clip/m23217/1304962441-clip-85kb.jpg[/img][/spoil]

[*:203ebex5] [b]Как быстро скопировать списки с других страниц[/b].
Допустим, попалась вам на глаза подобная новость - [url=http://www.vg247.com/2011/03/15/homefront-reviews-go-live-full-round-up-here/]http://www.vg247.com/2011/03/15/homefro ... d-up-here/[/url]
Просто скопировать издания и оценки - это по-нубски ;) Нужно сохранить ссылки на обзоры! Для этого
[list=a]
[*:203ebex5] задействуем в браузере функцию просмотра исходного кода страницы (обычно вызывается нажатием Ctrl+U).
[*:203ebex5] воспользуемся быстрым поиском по странице, что бы долго не выискивать начало списка, нажав Ctrl+F и введя название первого издания (в нашем случае это "Destructoid").
[*:203ebex5] находим знакомую нам конструкцию списка. Копируем всё от

    до
:
[spoil][img]http://clip2net.com/clip/m23217/1304964079-clip-253kb.jpg[/img][/spoil]
[*:203ebex5] вставляем через HTML-код в нашу новость. После чего повторяем шаги из пункта №2 этого мануала ;)
[spoil][img]http://clip2net.com/clip/m23217/1304964441-clip-26kb.jpg[/img] [color=#FF0000][b]= >[/b][/color] [img]http://clip2net.com/clip/m23217/1304964526-clip-24kb.jpg[/img][/spoil]
Кстати, [url=http://gamemag.ru/news/vgchartz-22-yanvarya-sekboi-na-kone-60951]такая новость[/url] тоже была сделана путём копирования HTML-кода прямо из оригинальной страницы.[/list][/list]

Share this post


Link to post
Share on other sites
[b]Samson[/b], ах ты хитрый же. А через оперу как смотреть хтмл страницы сайтов ?
Я просто не рублю... в ИЭ понятно. А В опере :confused:

Share this post


Link to post
Share on other sites
[quote name="MWorld II"][b]Samson[/b], ах ты хитрый же. А через оперу как смотреть хтмл страницы сайтов ?
Я просто не рублю... в ИЭ понятно. А В опере :confused:[/quote]
Написал же Ctrl+U ;)
Firefox, Chrome, Opera эти комбинации у них выполняют одно и то же.

PS: скрин из мозиллы, в ИЕ, вроде, Ctrl+U не работает.

Share this post


Link to post
Share on other sites
[quote name="xWhItEWoLFx"]Люди а как всталвлять видио с gametrailers ?[/quote]
Если на сайт гейммага, а не на форум, то:

1) Выбираешь видео
2) Под видео находишь Embed
[img]http://clip2net.com/clip/m23217/1307274743-clip-110kb.jpg[/img]
3) Копируешь код
4) Вставляешь его в HTML-форму новости
[img]http://clip2net.com/clip/m23217/1304879023-clip-17kb.jpg[/img]
5) Profit!
[img]http://clip2net.com/clip/m23217/1307274864-clip-29kb.jpg[/img]

Share this post


Link to post
Share on other sites
[quote name='Wodomon' timestamp='1316162436' post='2299638']
[b][member=Samson][/b], списки похерились смотрю и кое где код? ну могло быть и хуже
[/quote]
Если бы только код, но и текст, который был в этом коде тоже пропал. В итоге инструкция поломалась. Надо будет заново написать...

Share this post


Link to post
Share on other sites
народ теперь юзаем в новостях iframe-код
[img]http://img834.imageshack.us/img834/3663/54545z.jpg[/img]
с ним работают все кнопки плеера

Share this post


Link to post
Share on other sites
[b][member=Maxinhell][/b], не все ещё [url="http://gamemag.ru/news/dragons-dogma-geympley-captivate-12-76567"]http://gamemag.ru/ne...tivate-12-76567[/url]
http://gamemag.ru/news/noviy-treyler-resident-evil-6-76548

Share this post


Link to post
Share on other sites
В последнее время можно заметить, что некоторые новостники не правильно вставляют видео и скриншоты, что вызывает у пользователей сего ресурса много недовольств, поэтому я решил опубликовать небольшой гайд:
"Я как обычно вставляю видео, но пользователи жалуются на то, что нельзя сделать полноэкранный размер и перейти на сам ютуб - что же мне делать?"
Да, действительно интересный вопрос, что же тебе делать?! ну для начала нужно зайти в эту тему и просмотреть ниже опубликованный гайд по вставке видео:
[hide='Возьмем за основу новый трейлер Dead or Alive 5']
[img]http://s2.hostingkartinok.com/uploads/images/2012/08/cd71e8cf5da1ae5c8686d93296dd099a.jpg[/img][/hide]
[hide='Выставляем настройки согласно выше опубликованному скриншоту, затем переходим на сам сайт и следуем инструкции:'][img]http://s3.hostingkartinok.com/uploads/images/2012/08/12ba9b34f79e88898e27d3324092bf60.jpg[/img]
Несомненно стоит не забывать про данную опцию, которая не распространяется только на дебютные/первые трейлеры (тоже самое и со скриншотами)
Далее берем копируем наш код на ютубе и вставляем его в HTML редакторе на сайте:
[img]http://s2.hostingkartinok.com/uploads/images/2012/08/f47e8a9a292eed50e2a61a05760187b3.jpg[/img]
Видео не очень будет вписываться в рамки сайта, поэтому лучше увеличить разрешение таким путем:
[img]http://s3.hostingkartinok.com/uploads/images/2012/08/05654bd55651912b9bd214fa03ac2c3e.jpg[/img]
заменяем на:
[img]http://s3.hostingkartinok.com/uploads/images/2012/08/c56eabe6dc6f8beecbc7285dfc19807c.jpg[/img]
Готово![/hide]
Скриншоты лучше всего заливать на такие хостинги как [url="http://hostingkartinok.com/"]http://hostingkartinok.com/[/url] и [url="http://piix.biz/"]http://piix.biz/[/url]
[hide='После удачной заливки нашего скриншота переходим на сам сайт и следуем пошаговой инструкции:']
[img]http://s2.hostingkartinok.com/uploads/images/2012/08/1fe525e71d176e0a31660f82dd6ef430.jpg[/img]
Обязательно стоит обратить свое внимание на разрешение скриншота, чтобы в дальнейшем не было таких недоразумений:
[spoil]
[img]http://s2.hostingkartinok.com/uploads/images/2012/08/7ba8d39f38923ae96877379e1dbeb432.jpg[/img]
[img]http://s2.hostingkartinok.com/uploads/images/2012/08/77d51f6885e3c702cdeb0f52f00a7317.jpg[/img]
[/spoil]
В основном приемлемым разрешением для изображений является 700x400, для этого нужно просто прописать вот так:
[img]http://s3.hostingkartinok.com/uploads/images/2012/08/375a86012ba0cc326795d9fae6b91737.jpg[/img]

После всех проделанных манипуляций мы получаем нормальное и не растянутое изображение, но на этом еще не все. Теперь нам нужно будет сделать автоматический переход:
[img]http://s3.hostingkartinok.com/uploads/images/2012/08/5808be9dddf6a866bcff97630891d310.jpg[/img]
1. Жмем на цепочку
2. Вставляем адрес самого изображения, а не хостинга на котором оно находится. Пример того как не нужно вставлять:
[spoil]
[img]http://s3.hostingkartinok.com/uploads/images/2012/08/83e59247f90087a03c3d57499d86a510.jpg[/img]
[/spoil]
3. Выбираем опцию по которой пользователей будет кидать на полноразмерный скриншот по клику на "ужатую" версию.
[/hide]
Вот и все. Согласитесь, довольно таки просто. Edited by Azzy
подровнял и добавил bb-коды.

Share this post


Link to post
Share on other sites

Your content will need to be approved by a moderator

Guest
You are commenting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Preview Post
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×