Мы применяем рекомендательные технологии
Игорь Акимов
09-02-2011 04:46
БЛОГИ, СООБЩЕСТВА — картинка на главную страницу


ВОПРОС:
«Подскажите, пожалуста по шагово, как вставить (перенести) картинку на лицевой лист
сообщества???
Благо дарю!!!!!!!!!!!!!
Хочу украсить !!!!!!!!!!»

Оригинальный вопрос был задан здесь: http://my.mail.ru/community/komputerra/...

ОТВЕТ:
Совершенно понятно желание создателя сообщества сделать всё красиво!

На главной странице сообщества есть целых ДВА места, куда можно вставить картинку:

1. Есть специальное поле для небольшой картинки, типа аватара
(как и у любого человека — участника проекта)
2. И есть ещё недокументированная возможность вставить картинку в описание сообщества — в голубой блок «О СООБЩЕСТВЕ»



В первом случае всё довольно просто:

Зайдите в НАСТРОЙКИ СООБЩЕСТВА и на вкладке СВОЙСТВА загрузите картинку, нажав на кнопку ОБЗОР и выбрав её на вашем компьютере:



Для описания этих действий я создал экспериментальное сообщество с названием «Это Я — такой хороший»
(надеюсь, юмор понятен...)

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

Мало её выбрать. Желательно её ещё и подрезать!
Так, чтобы она имела пропорции, близкие к квадрату (т.е. 1х1) — таким образом она наиболее удачно впишется в предназначенное для неё поле.

Кроме того, можно её предварительно уменьшить до нужных размеров. Смотрите на скриншоте ниже — я поднёс к полю для аватара жёлтую линеечку (это такая специальная маленькая программа для измерения размеров на экране).

Зачем же загружать большую картинку, если она автоматически будет уменьшена до этих размеров (линейка показывает ширину 180 пикселей).

Уменьшенную и подрезанную картинку можно сохранить в той же папке с припиской в имени файла 180х180 и выбрать для загрузки:



После нажатия кнопки «СОХРАНИТЬ» внизу получаем результат:






Теперь посмотрим, что же можно сделать с полем «О СООБЩЕСТВЕ»

Сначала на всякий случай измерим его ширину. Ниже по тексту вы поймёте, для чего.



Подберите подходящую картинку и предварительно загрузите её в какой-нибудь альбом в вашем профиле «МОИ ФОТО». Эта процедура подробно описана здесь: http://my.mail.ru/community/computer-faq/...

Для вставки в поле «ОПИСАНИЕ» (то, что будет отображаться на голубом фоне в блоке «О СООБЩЕСТВЕ») фрагмента HTML-кода, по которому будет отображаться картинка, требуется знать её фактический адрес.
То есть, не адрес страницы, на которой она отображается в вашем альбоме, а адрес рисунка, который используется браузером для подгрузки изображения на эту страницу.

Если вы внимательно прочли пошаговые инструкции в статье по ссылке выше, то должны были обратить внимание, что там рекомендуется отмечать галочкой опцию «СОХРАНИТЬ ИСХОДНОЕ ИЗОБРАЖЕНИЕ ДЛЯ ПОСЛЕДУЮЩЕЙ ПЕЧАТИ». В этом случае на странице с вашей картинкой в её верхнем-правом углу отобразится серенькая ссылка с цифрами (что-то вроде 1200х900), при щелчке по которой можно открыть оригинальное изображение в новом окне.

Так вот, адрес перехода по этой ссылке и является как раз адресом, по которому «проживает» наша картинка!

Просто скопируйте его по клику правой кнопки и команде «КОПИРОВАТЬ ЯРЛЫК»:



Затем перейдите на другой вкладке в «НАСТРОЙКИ СООБЩЕСТВА» и вставьте этот адрес в атрибут SRC тега IMG.
О работе с вкладками советую почитать здесь: http://my.mail.ru/community/computer-faq/...
Некоторые простейшие свойства «тегов» (служебных команд) языка HTML описаны здесь (как раз применительно к Блогам и Комментариям): http://my.mail.ru/community/computer-faq/...

На скриншоте ниже я предлагаю данный код тега картинки в увеличенном виде. Вы можете просто скопировать его, изменив только адрес в кавычках после атрибута src=



А вот и результат...
Какой-то, право, неожиданный...(((



Картинка не влезла в отведённый блок. Для исправления придётся её уменьшить.
Обратите внимание на линейку.
Ширина блока 480px, но есть ещё внутренние поля по краям примерно по 15px с каждой стороны.
Чтож, давайте уменьшим картинку до 450px = 480px - 30px

Это можно сделать довольно легко в редакторе ACDSee
(подробные сведения о работе с его инструментами и с ссылками на закачку есть в нескольких статьях в нашем сообществе, например, здесь: http://my.mail.ru/community/computer-faq/...)

Выбираем инструмент «Изменение размера»:



В поле «ШИРИНА» вписываем нужное значение и нажимаем внизу «ГОТОВО»:



Сохраняем в ту же папку с припиской в имени файла новых размеров 450х338 и загружаем в тот же альбом в «МОИ ФОТО»:



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



Невзирая на то, что мы и здесь поставили галочку «СОХРАНИТЬ ИСХОДНОЕ ИЗОБРАЖЕНИЕ», в альбоме почему-то отсутствует нужная серенькая ссылка с цифрами. Но на странице с фото можно в заголовке увидеть, что она отличается от предыдущей только номером. Так что в «ОПИСАНИИ СООБЩЕСТВА» надо изменить только последнюю цифру в адресе.

А вот и результат:





А теперь давайте загрузим в этот блок анимацию...
По-взрослому, так сказать!

О том, как создать анимацию, кое-какие сведения можно добыть здесь:
http://my.mail.ru/community/computer-faq/5054BF195DAD6EC7.html

А вот и полученная после некоторых «мытарств» весёленькая анимашка:



Но, к сожалению, это не все трудности!
«Засада» заключается в том, что в профиле «МОИ ФОТО» нет возможности загрузить анимационную картинку.

Но это можно сделать при создании сообщения в том же сообществе или в Блоге.
Щёлкните по ссылке «СОЗДАТЬ ТЕМУ» и в редакторе сообщения нажмите справа кнопку «ФОТО»:



Вторая «засада» заключается в том, что нигде не отображается адрес загруженного файла анимации.
А он нам нужен для вставки в код.

Так давайте его из кода и скопируем. Для этого щёлкните правой кнопкой мыши по странице с сообщением, в котором есть анимация, и дайте команду «ПРОСМОТР HTML-КОДА»:



Поверх окна браузера отобразится некий вариант текстового просмотровщика с «абракадаброй» кода внутри. Именно этот код читает ваш браузер, чтобы, выполняя написанные в коде команды, правильно отобразить страницу.

Но вы не пугайтесь! В меню «ПРАВКА» дайте команду «НАЙТИ» и впишите в поле поиска какое-нибудь слово из текста, который на странице был рядом с картинкой. Например, я начал сообщение со слова «Вот»:



Фрагмент HTML-кода с тегом IMG можно целиком скопировать отсюда (выделен на скриншоте).
А затем вставить в поле «ОПИСАНИЕ» в настройках сообщества:



А вот и окончательный результат:



Надеюсь, всем понятно, как посмотреть это «в натуре»?
Или надо дать ссылку?
http://my.mail.ru/community/i-am-goody/


Ответы на другие «ЧаВо» (часто задаваемые вопросы) вы можете найти в нашем «УКАЗАТЕЛЕ» (содержании)



Комментировать