ПафНутиЙ-Блог » Статьи » Добавление картинок в новость через дополнительные поля

Добавление картинок в новость через дополнительные поля

7.09
125
47815
Самый простой и в тоже время самый эффективный способ сделать так, чтобы картинки в новости были одинакового размера, независимо от того, кто и насколько прямыми руками их к новости прикреплял - сделать добавление картинок через дополнительное поле.
Плюсы очевидны: можно регулировать вывод размера изображения, его положение в новости; экономится место на сайте т.к. картинки можно заливать на сайты типа Радикал-Фото; проше сделать вывод новостей в 2 колонки.
Есть и минусы, но все они связаны как правило с кривыми руками юзеров, добавляющих новости.

Итак приступим.

1. Идём в Панель управления - другие разделы - Дополнительные поля новостей и добавляем новое дополнительное поле с параметрами как на картинке:

Добавление картинок в новость через дополнительные поля


Разделы можете указать на свой выбор.
Значение по умолчанию в данном примере является ссылкой на дефолтную картинку на случай если пользователь не станет добавлять картинок к новости. Но это поле можно оставить и пустым, оно нам особо и не нужно сейчас.

Жмём кнопку "Сохранить", всё наше поле добавлено.

2. Открываем shortstory.tpl и в нужное место добавляем следующий код:
[xfgiven_image][full-link]<img src="[xfvalue_image]" alt="{title}" width="200" height="150" border="0">[/full-link][/xfgiven_image]


Остановимся подробнее на этой строчке.
- тег [xfgiven_image] - нужен для скрытия пустого места, если нет картинки в новости.
- тег [full-link] - для того чтобы картинка была одновременно ссылкой на полную новость.
- src="[xfvalue_image]" - сама картинка
- &alt="{title}" - описание картинки - оно же название новости.
- width="200" height="150" ширина и высота картинки - можно править под себя.
- border="0" - для тех у кого не задан CSS-стиль для тега <img>

Вот собственно и всё.

Теперь чтобы добавить картинку в новость, нам нужно просто вставить прямую ссылку на изображение в дополнительное поле при написании новости.

P.S.
Дальше включаем фантазию и делаем свой варезник сайт ещё краше :pleasantry:

Похожие материалы

  • Произвольное оформление новостей в DLE
  • Выводим дополнительные поля в похожих новостях или немного о новых возможностях модуля Block.Pro.2
  • Мультиязычный сайт на DLE (или как добавить английский язык)
  • Block.Pro.2.5
Закрыть

Комментировать могут только зарегистрированные пользователи

+

Комментарии

Schardt
Schardt 22 сентября 2009 12:46
Ответов: 0 #44
а как сделать что бы картинка была слева, а текст справа ???
ПафНутиЙ
ПафНутиЙ 22 сентября 2009 13:08
Ответов: 0 #45
в шаблон новости:
<div class="image">[xfgiven_image][full-link]
;<img src="[xfvalue_image]" alt="{title}" width="200" height="150" border="0">[/full-link][/xfgiven_image]
</div>
<div class="post">shortstory</div>

пишем в css
    .image {
    float: left;
    clear: both;
    width: 220px;
    padding: 10px 10px 10px 0;}

Либо верстаем таблицей.
Schardt
Schardt 22 сентября 2009 13:30
Ответов: 0 #46
Помоги пожулуйста как с таблицей?? yahoo
Schardt
Schardt 22 сентября 2009 13:41
Ответов: 0 #47
Цитата: ПафНутиЙ
Либо верстаем таблицей.

Можно поподробнее ?? dance2
ПафНутиЙ
ПафНутиЙ 22 сентября 2009 14:20
Ответов: 0 #48
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>[xfgiven_image][full-link]&a
mp;lt;img src="[xfvalue_image]" alt="{title}" width="200" height="150" border="0">[/full-link][/xfgiven_image]
</td><td>{sortstory}</td></tr&a
mp;gt;
</table>
Schardt
Schardt 23 сентября 2009 12:31
Ответов: 0 #49
Цитата: ПафНутиЙ
<div class="image">[xfgiven_image][full-link];<img src="[xfvalue_image]" alt="{title}" width="200" height="150" border="0">[/full-link][/xfgiven_image]</div><div class="post">shortstory</div>

А куда сдесь вставить [thumb][/thumb] чтобы каринка увеличивалась по клику ???
ПафНутиЙ
ПафНутиЙ 23 сентября 2009 14:47
Ответов: 0 #50
[thumb][/thumb] вставлять в дополнительное поле
Schardt
Schardt 23 сентября 2009 18:48
Ответов: 0 #53
а как это в shortstory прописать??
ПафНутиЙ
ПафНутиЙ 23 сентября 2009 18:53
Ответов: 0 #54
[xfgiven_image] smile
Schardt
Schardt 23 сентября 2009 18:57
Ответов: 0 #55
нет куда в шотстори ставить [thumb] что бы постоянно в добавлении новости не писать ?? Помоги пожалуйста???
ПафНутиЙ
ПафНутиЙ 23 сентября 2009 19:18
Ответов: 0 #56
Загружаешь картинку при публикации новости, тыкаешь в уменьшенную копию, в поле для краткого содержания или для полного содержания вставляется [thumb]картинка[/thumb] копируешь строчку и вставляешь в доп поле (в админке, в Настройка системы>Настройки безопасности скрипта должен быть отключён Безопасный режим для дополнительных полей)
Всё.
mkden
mkden 24 сентября 2009 10:57
Ответов: 0 #59
здраствуйте а как в css прописать чтоб на эту картинку добавлялась сверху другая картинка.Или как прописать накладывание дополнительного водяного знака на картинку чтоб дополнительный вод знак был на вся длину и ширину загружаемой картинки?
Schardt
Schardt 24 сентября 2009 11:13
Ответов: 0 #60
Разрешить наложение водяных знаков:
При загрузке или копировании картинки на сервер, на нее будет наложен водяной знак. В админки на это ответь да!!
mkden
mkden 24 сентября 2009 16:45
Ответов: 0 #61
вы не поняли как в этой css
.image {
float: left;
clear: both;
width: 220px;
padding: 10px 10px 10px 0;}

добавить поверх картинку
(например я загрузил картинку для дополнинетьного поля,и на эту картинку сверху должна накладоваться другая постоянная картинка с размерами width="200" height="150" )
ПафНутиЙ
ПафНутиЙ 24 сентября 2009 18:34
Ответов: 0 #63
Цитата: mkden
(например я загрузил картинку для дополнинетьного поля,и на эту картинку сверху должна накладоваться другая постоянная картинка с размерами width="200" height="150" )

А смысл??
Не проще ли включить наложение водяных знаков? Но это если нужно чтоб не тырили картинки, а если нужно просто наложить поверх картинки ещё одну, то
делаем чтото наподобие:
<div style=" background: url([xfvalue_image]); width: 100px; height: 100px;"><img src="image.png"  width="50" height="50" border="0"></div>
TCSE
TCSE 22 октября 2009 21:33
Ответов: 0 #82
Цитата: ПафНутиЙ
А смысл??Не проще ли включить наложение водяных знаков?


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

кстати, позвольте заметить.
в дополнительно поле для клиента все же нагляднее вставлять [thumb]ссылка_на_картинку[/thumb] которая автоматом генериться при загрузке на сайт чем выдергивать прямую ссылку на картинку...
ПафНутиЙ
ПафНутиЙ 22 октября 2009 22:22
Ответов: 0 #84
HTML:
<div class="frame-block">
  <span> </span>
  <img src="sample.jpg" width="575" height="335" alt="" />
</div>

CSS:
.frame-block{
  position: relative;
  display: block;
  width: 575px;
  height:335px
}
.frame-block span {
  background: url(frame.png) no-repeat center top;
  width: 575px;
  height:335px;
  display: block;
  position: absolute
}


И будет картинка в рамке из картинки smile

Цитата: TCSE
кстати, позвольте заметить.в дополнительно поле для клиента все же нагляднее вставлять [thumb]ссылка_на_картинку[/thumb] которая автоматом генериться при загрузке на сайт чем выдергивать прямую ссылку на картинку...


Лучший вариант - реализовать возможность вставки картинки в доп. поле таким же образом как и в краткое или полное содержание новости.
Schardt
Schardt 20 ноября 2009 17:17
Ответов: 0 #92
Цитата: ПафНутиЙ
в шаблон новости:<div class="image">[xfgiven_image][full-link];<img src="[xfvalue_image]" alt="{title}" width="200" height="150" border="0">[/full-link][/xfgiven_image]</div><div class="post">shortstory</div>пишем в css     .image {    float: left;    clear: both;    width: 220px;    padding: 10px 10px 10px 0;}


Привет, помоги пожалуйста, если картинку не ставить, то текст всё равно отступает! Как исправить? ,чтобы если не ставишь картинку текст шёл с самого начала?
ПафНутиЙ
ПафНутиЙ 20 ноября 2009 17:32
Ответов: 0 #93
Цитата: Schardt
Привет, помоги пожалуйста, если картинку не ставить, то текст всё равно отступает! Как исправить? ,чтобы если не ставишь картинку текст шёл с самого начала?

[xfgiven_image]<div class="image">[full-link]<img src="[xfvalue_image]" alt="{title}" width="200" height="150" border="0">[/full-link]</div>[
/xfgiven_image]<div class="post">shortstory</div>
Schardt
Schardt 20 ноября 2009 19:06
Ответов: 0 #94
Спасибо, то, что нужно. Кстати вот мой сайт о кпк micro-device.com
ПафНутиЙ
ПафНутиЙ 20 ноября 2009 19:09
Ответов: 0 #95
наздоровье :)
sasha
sasha 23 ноября 2009 19:53
Ответов: 0 #97
Кто может помочь , добовляю вот это
<div class="screenshots">[xfgiven_screenshots][full-link]
<img src="[xfvalue_screenshots] "alt="Редактирование комментария" width="200" height="150" border="0">[/full-link][/xfgiven_screenshots]

Потом когда в дополнительном поле добавляю картинку она нормально добавляеться когда хочу ее сделать [thumb][/thumb] то картинка добавляеться но становиться не по размеру и пишет рядом с картинкой
[[картинки нет]]


Подскажите где мне поправить шаблон
ПафНутиЙ
ПафНутиЙ 23 ноября 2009 19:58
Ответов: 0 #98
[xfgiven_screenshots]
[xfvalue_screenshots][/xfgiven_screenshots]

просто когда двиг видит тег [thumb] то он выставляет сам размеры изображения и теги, поэтому выходит такой косяк :)
sasha
sasha 23 ноября 2009 20:12
Ответов: 0 #99
и как избавиться от этого ?
ПафНутиЙ
ПафНутиЙ 23 ноября 2009 20:13
Ответов: 0 #100
от [thumb] ?
- не вставлять в доп поля [thumb] :)
sasha
sasha 23 ноября 2009 20:16
Ответов: 0 #101
а если надо без него не как , допутим это скриншот к игре ты же его не будешь делать размером 200*150 , хочеться размерчик в районе 1600*1200
ПафНутиЙ
ПафНутиЙ 23 ноября 2009 20:21
Ответов: 0 #102
[xfgiven_screenshots]<a href="[xfvalue_screenshots]" onclick="return hs.expand(this)"><img src="[xfvalue_screenshots] "alt="Редактирование комментария" width="200" height="150" border="0"></a>[/xfgiven_screenshots]
sasha
sasha 23 ноября 2009 20:26
Ответов: 0 #103
Спасибо все тип топ
ПафНутиЙ
ПафНутиЙ 23 ноября 2009 20:27
Ответов: 0 #104
Рад был помочь smile
zipler
zipler 26 декабря 2009 12:52
Ответов: 0 #115
Спасибо за очень полезный урок! Все пучком, только вот на полной новости картина не отображается smiles На краткой картинка есть а на полной нет, хоть и fullstory.tpl прописал [xfgiven_img].. Помогите плиз, почему не отображается картинка?

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.