3.9.08

Blogger: Меняем размер картинки!

42 comments

Картинка в вашей статье!

Доборго времени суток!

Сегодня мы поговорим о картинках в ваших статьях, постаха или сообщениях (кому как нравится их называть) . В общем-то, я не сомневаюсь, что все вы умеете вставлять картинки в ваше сообщение на Bloggere, но как выяснилось далеко не все умеют уменьшать или увеличивать картинку. Люди из Группы "Blogger Discuss" не знали ответа на этот вопрос, а я вам расскажу сразу два способа как это можно сделать:

1. Способ НАГЛАЗОК: Во врямя написания статьи в режиме "Создать/Compose" мы кликаем на картинку у которой мы хотим изменить размер и видим появившуюся вокруг картинки рамочку с маленькими квадратиками - это значит картинка стала активна. Теперь наведя на середину картинки мышку и нажав указательным пальцем (т.е. для большинсва из нас левую) клавишу мыши не отпуская её мы можем перетянуть картинку на нужное нам место выше или ниже. Чтобы изменить размер картинки нам надо сделать картинку опять-таки активной, а потом "растянуть или уменьшить" её с помощью мышки: для чего медленно проведем мышкой над появившейся рамочкой в районе квадратика и когда мы увидим, что указатель нашей мышки превратися в стрелочку упирающуюся в отрезок рамочки картинки мы нажимаем указательным пальцем клавишу на мышке и тянем эту рамочку в сторону уменьшения или увеличения картинки.

Удачи вам! Главное не забывайте о пропорциях! [Я, кажется, c ними немного перестаралась ;)].

2. Способ ПО-НАУКЕ: Обычным способом подгружаем в нашу статью картинку. И переходим в режим редактирования HTML/Edit HTML. И видим следующий код:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i201.photobucket.com/albums/aa306/kylekeeton/RussianBlooger/Picture.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px;" src="http://i201.photobucket.com/albums/aa306/kylekeeton/RussianBlooger/Picture.jpg" alt="А здесь была КРАСИВАЯ ТАКАЯ КАРТИНКА!" title="Случайная картинка, найденная мною в интернете - оказалась пейзажем Дерка Хансена!" border="0" /></a>

Смотрим на этот код и даже если никогда не видели описания интернет-страничек на языке HTML с элементами CSS стараемся не пугаться. Ведь всегда же можно вернуться в наш любимый режим Создать или Compose. Вы все-таки еще не убегайте, а я сейчас попробую все объяснить:

1) Все что выделено синим цветом между двумя первыми значками меньше-больше <...> и последними значками меньше-больше <...> со слэшом и буковкой "а" по серидине говорит вашему браузеру, что картинка которую вы только что подгрузили будет на самом деле ссылкой и если кликнуть по этой ссылки мы увидим картинку целиком "в полный рост". Если картинка сама по себе небольшая и я её и так показываю целиком, я удаляю эту ссылку - т.е. все что в коде выделено синим. (Вам это делать совсем не обязательно!)

2) Между этими синими кусками мы видим собственно описание самой картинки. То что я выделила зеленым цветом это и есть ширина нашей картинки. В зависимости от режима, в котором вы её подгружали [размер: большой, средний или малый] ширина width может быть 400px, 320px, 200px вот этот-то параметр мы и меняем на.... что угодно, что вам больше нравится: на любое число - только не забываем про значок px (что значит пиксел) на конце. [Слово «пиксел» является сокращением от английских слов «picture element» (элемент изображения). На экране телевизора или монитора любое изображение состоит из совокупности очень мелких элементов (точек). Эти элементы изображения и называются пикселами (pixel).]

3) Красным цветом я выделила еще один хитрый параметр размещения картинки float может быть left, center, right или его может не быть совсем, в зависимости от того, какой Формат (Layout) вы выбрали при подгрузке своей картинки. Этот параметр вы тоже можете поменять, если вдруг решите, что эта картинка будет лучше смотреться не слева, а справа.

4) А вот таким светлоголубым цветом я отметила, то что вы у себя в HTMLе не увидите в параметр alt="" внутрь кавычек я добавила строчку А здесь была КРАСИВАЯ ТАКАЯ КАРТИНКА!, которую наш читатель увидит если картинка по каким-то причинам не подгрузится, а вот параметр title я вставила сама и включила в него в кавычках короткое описание картинки Случайная картинка, найденная мною в интернете - оказалась пейзажем Дерка Хансена! - это мое вознаграждение для любознательного читателя, который наведет на картинку мышку и прочтет ее описатие. Я, между прочим, всегда так делаю можете посмотреть что вам скажет эта кошечка в конце статьи - просто наведите на неё мышку.

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

Если вам понравилась картинка, на которой мы сегодня тренировались - вы может почитать о её создателе, Дерке Хансене здесь.

А я на сегодня прощаюсь, тихо радуясь за читателей кто узнал сегодня что-то новое :).
Света




Комментарии и вопросы более чем приветствуются,

нужна помощь - поможем! Читать дальше...

42 комментария:

  1. Здорово, Николай!

    Значит незря я все это написала!

    Спасибо :)))

    ОтветитьУдалить
  2. А ширину колонки текста нельзя изменить? ИМХО узковата. Или это требование сервиса?

    ОтветитьУдалить
  3. А можно повторить для " особо одарённых ".
    Шаг за шагом, как вставить живую картинку.
    Я уже доламываю всё, что можно
    Как выйти на то место, где для выбранной картинки я найду адрес, который скопирую, чтоб потом вставить в своё сообщение?

    Здорово я сформулировала вопрос? Если не поймёте меня, значит та ещё формулировочка получилась. Сегодня не мой день. Похоже, что вся неделя не моя...

    ОтветитьУдалить
  4. Спасибо огромное! В Мире по- видимому не один "гостепреимый блог"- Ваш!!!Я только начинаю, и пока не выбрался на просторы блогосферы - очевидно по причине "гуманитарной устроенности" мозгов. "Движение врмени", зовут Дмитрий, г.Измаил, Украина.Актуальные соббытия.
    Вам - Добра и Мира!

    ОтветитьУдалить
  5. А ширину колонки текста нельзя изменить? - Можно, Аzъ! Напишу в следующей статье, как это сделать.

    Света

    ОтветитьУдалить
  6. Здравствуйте, Челита!

    Живые картинки - вы нашли такое замечательное слово для них! :)))

    Итак, рассказываю:

    Смотрим на понравившуюся картинку и кликаем по ней правой кнопкой мыши (эта та, которая находится под безымянным пальцем) и под мышкой появляется серый такой квадратик с контекстным меню.

    1) Выбираем в этом меню что-то типа "Показать картинку" (у меня компьютер на английском и у меня этот пункт меню звучит "View image") мы видим страничку с нашей картинкой в левом-верхнем углу и в адресной строке браузера видим адрес этой картинки,

    2) А еще у меня в браузере можно выбрать "Копировать адрес картинки" ("Copy image location") и тогда адрес картинки уже будет у вас "в мышке" (или по-научному в буфере обмена).

    Ну, вот - должно работать... Пишите если работать не будет или будет работать не так!

    Света

    ОтветитьУдалить
  7. Дмитрий, спасибо огромное!

    Заходите, спрашивайте - мы всегда вам рады! А "гуманитарные мозги" - это здорово!

    Не всё же нам технарям в интернете обсуждать нами же придуманные правила как программировать на JavaScript или использовать разметку HTML, нужна просто человеческая информация - Вы главное пишите, а с техническим обустройством разберемся все вместе! ;)

    А блог у вас очень интересный - я буду читать!
    Света

    ОтветитьУдалить
  8. Ой, Света! Видно не судьба мне этот урок усвоить.
    Не получается.
    Рамка красная. В списке таблицы ничего похожего о том, что Вы советуете, я не нахожу.

    ОтветитьУдалить
  9. Судьба-судьба, Челита!

    И все будут свидетелями:

    Вот он Челитин блог с прекрасными такими живыми картинками: http://thegelady.blogspot.com/

    Уж если Челита за что-то возьмется, это будет работать - принтер или живые картинки - не важно! Вот с кого нам всем надо брать пример! :)))

    Света

    ОтветитьУдалить
  10. Ой, спасибо...
    Иду умирать от "скромности"...
    Но тема ещё не закрыта. Ещё не всё из рекомендованного усвоила, но обещаю усвоить.

    ОтветитьУдалить
  11. Не, Челита, расслабляться нельзя!

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

    Удачи!
    Света

    ОтветитьУдалить
  12. И всё-таки мне придётся немного "почивать", не на лаврах точно, учитывая, что я недавно слезла с финиковой пальмы. Постепнно привыкаю к цивилизации, но очень люблю всё красивое, яркое и движущееся.
    Я обдумаю на отдыхе вопросы Вам, но как выбрать из понравившихся слайдов отдельные картики уже спрашиваю.
    А как в блог загрузить слайды, тоже интересно. И ещё, ещё, ещё.
    Это не значит, что я уже всё усвоила, но и Вы готовьтесь к нашим вопросом, раз уж разбаловали нас своим вниманием.

    ОтветитьУдалить
  13. Здравствуйте, Челита!

    ...очень люблю всё красивое, яркое и движущееся - я тоже - вот поэтому об этом и рассказываю! :)))

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

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

    Света

    ОтветитьУдалить
  14. Когда я выставлял в html оригинальное или просто большее разрешение фотографии, при публикации она действительно была больше, но качество очень сильно ухудшалось
    Такое впечатление что он "растягивает" маленькую фотографию получившуюся при загрузке вместо того чтобы взять оригинальный размер
    При "вытягивании" рамки эффект тот же

    вообщем добиться публикации больших фотографий в блоге получилось но с жуткой потерей качества (((
    но ведь другие публикуют свои большие снимки без потерь
    но как?!?

    ОтветитьУдалить
  15. Заглянула я в ваш блог Zaoa - кто бы жаловался на потерю качества! И вы, как я поняла, все делаете правильно:
    1) Находите хорошее место где вы можете хранить картинки без потери качества;
    2) В режиме Создания сообщения вместо вставки изображения штатными средствами Blogger(а) идете в Изменить Html и вставляете свою картинку как
    <img src="http://адрес Вашей картинки в хранилище, которое не портит качества">
    Да, и все пожалуй....

    А если вы все-так увидели у кого-то качество гораздо лучшее, чем получается у нас с вами, то опубликуйте здесь их адрес и по исходному коду мы как-нибудь догадаемся как они этого добились. Будем учиться у лучших! ;)

    Удачи во всем!
    Света

    ОтветитьУдалить
  16. Помогает, Suricoma?

    Пока что у вас в блоге только половинки картинок, если хоти целые -- параметр heigth="" - убираем совсем , а width (ширину) устанавливаем чтобы в основную колонку влезало в Вашем случае 400px думаю будет в самый раз.

    Заглядывайте!
    Если что спрашивайте, всегда рада помочь! :)

    Света

    ОтветитьУдалить
  17. Я надеюсь, тема ещё не закрыта.Помогите, плз!!!Пролема с картинками боковой панели.Порядок такой -Добавить гаджет --Картинки.Но беда в том, что картинка автоматически уменьшается до 254 пикс. в ширину.Получается пол-картинки обрезано.Надо 150 на 114.А вот как!!!Может, кому-то тоже пригодится.Спасибо.

    ОтветитьУдалить
  18. Доброго времени суток, Uma!

    Здесь у нас темы никогда не закрываются - всегда можно задавать вопросы о чем угодно!

    По вашей наводке, я тоже немного поэкспериментировала с гаджетом "вставить картинку". Там похоже есть только два варианта:
    1) Поставить галочку Сжать до размеров экрана, тогда картинка не обрежется, а сожмется до ширины 150px (вам должно подойти!)

    2) Не ставить эту галочку, тогда если картинка не поместится на боковую панель она обрежется. Т.е. при этом варианте вам надо будет взять на себя resize картинки.

    Что до меня я люблю 3ий вариант. Использовать не гаджет "Вставить картинку", а гаджет HTML/JavaScript для этого придется позаботиться о хранилище для картинок это могут быть как альбомы Picasa, где уже хранятся картинки из нашего блога или какой-нибудь сторонний типа Photobucket.com который я активно пропагандировала в этой статье: Картинки для Блоггера!

    А когда картинка уже куда-то в хранилище пристроена добавляем простенький гаджет типа HTML/JavaScript:
    <img src="здесь ссылка на место хранения картинки" style="width:150; height:114;">

    Надеюсь, что это поможет!

    Удачи и приходите еще!
    Света

    ОтветитьУдалить
  19. здравствуйте!
    скажите,а как сделать, чтобы картинка была на всю ширину экрана. не в колонке с белыми полями, а от и до??????????как вот здесь например
    http://gille-k.blogspot.com/

    ОтветитьУдалить
  20. Galya, здравствуйте!

    Возможно вам надо поменять макет на макет с одной колонкой и "подвалом" для вспомогательной информации.

    Такие макеты для Blogger'а можно посмотреть и скачать здесь.

    Удачи!
    Света

    ОтветитьУдалить
  21. Мой блог - пока самый "корявый" из всего увиденного.Так вот как все надо делать. Спасибо.

    ОтветитьУдалить
  22. Доброго времени суток, Teccer!

    Интересный у вас блог и ничего корявого я не заметила... А может вы уже успели поправить ;).

    Удачи во всем и приходите еще,
    Света

    ОтветитьУдалить
  23. Сегодня случайно наткнулась на Ваш блог. Это удача, для начинающего блоггера.
    Вопроса два:
    1. Когда вставляю картинку, то появляются разные значки,вместо самой картинки. Где и что нужно изменять? Ткните носом.
    2. Есть ли такая темка "Как украсить блог" т.е. внесение каких то изменений, в предоставляемый шаблон блога? Может не понятно написала. Смысл: есть очень красивые блоги (ранее Вы писали "голова, руки и т.п") Куда, что вставляется?

    ОтветитьУдалить
  24. Ksuleka, здравствуйте!

    1. Про значки я честно говоря не очень поняла - в вашем блоге я увидела только красивые картинки и никаких таинственных значков. Ссылочку тогда дайте чтобы я поняла что к чему.
    2. "Как украсить блог" - такой темки нет. Есть тема как расширить шаблон блога, построить подвал и чердак, установить переводчик и поисковую панель, где взять музыку и как поставить плейер к себе в блог, о разных слайд-шоу и т.д.

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

    Кажется, почитать есть чего... а возникнет конкретный вопро - вы пишите сюда или на email.

    Удачи во всем!
    Света

    ОтветитьУдалить
  25. Светлана, спасибо большое за ответ. Буду изучать предложенные темы. Всех благ!

    ОтветитьУдалить
  26. Доброго времени суток! подскажите-где скачать и как установить шаблон для Blogger с горизонтальным меню? Заранее спасибо! Александр

    ОтветитьУдалить
  27. И если не затруднит-подскажите как сотворить "живую" картинку с ссылкой?

    ОтветитьУдалить
  28. Александр, здравствуйте!

    О "живой картинке": Если вы загрузили свою через Blogger, перейдите в режим Изменить Html и в коде картинке поменяйте url который находится внутри кавычек после href= на тот который вам нужен.

    Или в общем случае картинка-ссылка выглядит так:
    <a href="http://url сайта куда вы хотите послать читателя"><img src="http://url картинки"/></a>

    Еще рекомендую почитать небольшую статью про ссылки: Blogger: Начала HTML - Ссылки!

    Удачи!
    Света
    PS А про шаблоны с горизонтальной менюшкой, я даже не знаю где взять, зато уже почти готова рассказать как её поставить к себе в блог.

    ОтветитьУдалить
  29. Здравствуйте, Светлана
    а можно сделать так чтоб изменить эти "блоггеровсие" значения ширин 400, 320, 200 на свои ? или это нам недоступно ?

    ОтветитьУдалить
  30. Здравствуйте, Rostom!

    -а можно сделать так чтоб изменить эти "блоггеровсие" значения ширин 400, 320, 200 на свои ? или это нам недоступно ? Конечно, можно - для этого есть параметр width - прописывайте там, что хотите, а height (если есть), вообще, уберите.

    Я часто загружаю свои картинки на http://photobucket.com беру direct link (прямая ссылка для) картинки и самостоятельно пишу описание картинки на Html:
    <img src="http://тот самый директ линк" width="ширина px"/>

    Кстати, очень рекомендую почитать:
    http://blogger4you.blogspot.com/2008/10/blogger-kartinki-dlya-fotohudozhnikov.html

    Удачи, будут вопросы - спрашивайте!
    Света

    ОтветитьУдалить
  31. Данные способы, Светлана, действительно ухудшают качество изображения. Вот способ, который позволяет отображать картинку нужного размера: http://www.bloggertricks.com/2009/06/hack-how-to-post-larger-hq-images-in.html

    ОтветитьУдалить
  32. Ноам, спасибо за ссылку!

    Очень интересный хак, надо будет самой попробовать как это работает! Я же для качественных фотографий использую просто сторонний хостинг, а потом вставляю соответствующий html код.

    Еще раз огромное спасибо!
    Света

    ОтветитьУдалить
  33. Здравствуйте Света! Спасибо за подробные уроки! Извините меня великодушно , но у меня не получается сделать скрытый текст , \когда наводишь курсор на картинку и там появляется текс\. Делаю все по шагово но мой код картинки отличается от Вашего и там совсем другие буковки и скобочки и еще чего-то . Хотела Вам показать , не копируется код, вернее копируется но в мой комментарий не вставляется. Я в расстерянности , помогите пожалуйста.

    ОтветитьУдалить
  34. Света, БОЛЬШОЕ спасибо за объяснения. Нашла ответы на мучивший меня вопрос - как вставить на боковую панель картинку, под которой прячется ссылка на блог. СПАСИБО!

    ОтветитьУдалить
  35. У меня получилось!!!! Еще раз спасибо большое!

    ОтветитьУдалить
  36. Ваш блог очень помогает!)))ыыыы

    ОтветитьУдалить
  37. Я как раз искала эту информацию!!!!Спаисбо!!!

    ОтветитьУдалить
  38. Светлана! а как поиграть с размерами картиинки по превью и в большом формате?
    т.е. у меня в последнем мастреклассе не получается картинку по клику сделать БОЛЬШОЙ, когда храню фото в пикасса, т.е. вГугл аккаунте.
    до этого когда по старнке без пикассы и галерей делала, увеличение работало, хотя неуправлемо.
    Помогите, плиз :)

    ОтветитьУдалить

Популярные сообщения