1 dark4000

  • dark4000
  • Бывалый!
  • Карма: 0 / 0

Тема: [DLE 9.6] Как автоматически изменить размер изображения через CSS

Суть вот в чём. 
В настройках сайта, выставлен размер изображения 155х200 рх. 

Короче, я хочу что бы в кратком описании изображение было  155х200 рх, а в полном описании поста 500 рх, и что бы это дело ставилось автоматом, потому что постеры заливают новости сторонними прогами, типа AddNews.

Господа, выручайте.

2 ПафНутиЙ

  • ПафНутиЙ
  • Делаю всякие полезности для DLE и не только
  • Карма: 51 / 1

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

Herb вырвать таким постерам, и на сайт не пускать (моё мнение).
Я так понимаю на контент вам начхать, поэтому поставьте размер картинок такой, какой требуется в полной новости.
а для коротких новостей в css припишите:

.news img {max-width: 155px;}

где .news - класс, в который заворачивается новость.

+ dark4000

3 dark4000 (08.09.2012 05:11 отредактировано dark4000)

  • dark4000
  • Бывалый!
  • Карма: 0 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

.news img {max-width: 155px;}

Благодарю за исчерпывающий ответ! Я конечно извиняюсь, но этот ответ спецам понятен.
Понимаю, вставить в styles.css, ну хотя бы намёк дайте, прописать после или перед какой строкой. В этом деле я ДУБ, изучать нету времени.

Может сделаем вот так. Если Вас конечно не затруднит посмотреть и показать.
Вот мой styles.css. Куда этот код прописать?

/* ---- story ---- */
.story{padding:15px 0 10px 0; background:url(../images/ssep2.png) repeat-x bottom;}
.sheading{padding:0 10px 8px 10px; background:url(../images/ssep.png) repeat-x bottom;}
    .sheading .dbg, .sheading .dltop, .sheading .drtop, .sheading .dbtm, .sheading .dlbtm, .sheading .drbtm{width:100%; height:100%;}
    .sheading .dbg{background:#05475d url(../images/shedbg.png) repeat-x;}
    .sheading .dltop{background:url(../images/shedltop.png) no-repeat;}
    .sheading .drtop{background:url(../images/shedrtop.png) no-repeat 100% 0;}
    .sheading .dbtm{background:url(../images/shedbtm.png) repeat-x bottom;}
    .sheading .dlbtm{background:url(../images/shedlbtm.png) no-repeat 0 100%;}
    .sheading .drbtm{background:url(../images/shedrbtm.png) no-repeat 100% 100%;}
    .sheading .dtitle{background:url(../images/stitle.png) no-repeat 10px 10px; padding:11px 16px 9px 30px; display:block; font-size:1.2em;color:#f0f5f7;}
    .sheading a{color:#f0f5f7; text-decoration:none;}
        .sheading a:hover{color:#f1b813; text-decoration:none;}

.sdate, .sdate span{background:url(../images/sdate.png) no-repeat; height:41px; float:right; display:inline; margin-right:8px; line-height:33px; color:#3f93b1;}
    .sdate span{ background-position:100% -41px; padding:0 55px; float:left;}    
.ratebox{width:85px; height:17px; float:left; padding-left:10px; padding-top:16px; overflow:hidden;}
.stext{padding:15px;}
    .stext img{padding:5px;}        
.storybtm{height:39px; padding:0 10px 8px 10px;}
    .storybtm .dbg, .storybtm .dleft{width:100%; height:100%; background:url(../images/sbtm.png) no-repeat;}

4 Kanra (07.09.2012 08:55 отредактировано Kanra)

  • Kanra
  • Adsumus! Adsumus!
  • Карма: 25 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

В файле style.css найти

.stext img{padding:5px;}

заменить на

.stext img{padding:5px;max-width:155px;max-height:200px;}
+ dark4000

5 dark4000

  • dark4000
  • Бывалый!
  • Карма: 0 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

Kanra пишет:

В файле style.css найти
.stext img{padding:5px;}   
заменить на
.stext img{padding:5px;max-width:155px;max-height:200px;}

Нашёл, поменял, но картинки в кратком и полном описании ложатся по500 рх.
Ещё вопросец:
style.css рабочего шаблона или Default style.css?

6 wovanich (07.09.2012 11:59 отредактировано wovanich)

  • wovanich
  • Уже не новичок
  • Карма: 2 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

Конечно рабочего шаблона, Default тут нипричём. И если маленькая картинка нужна в краткой новости, то и {max-width: 155px;} нужно прописывать для стилей краткой новости.
Я бы для стиля краткой новости прописал так -
.stext img { float: left; width: 155px; padding:5px} тогда картинка в короткой новости будет слева и маленькая и не важно какое выравнивание поставит постер.
И нужно смотреть если стили для короткой и полной новости одинаковые, то надо создать отдельные стили.

+ dark4000

7 dark4000

  • dark4000
  • Бывалый!
  • Карма: 0 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

wovanich, а в html полной новости можно как то прописать? Я вот что нашёл в инете:

Sisyphus, спасибо большое, помог ваш совет, только я прописал в самом файле вывода полной новости вот это:
<style type="text/css">
.news img {max-width:500px; hight:auto;}
</style>
И применил контейнер news ко всей новости и всё заработало!


Но где он прописал именно, там не написано.
Блин, плохо быть деревянным.
Заранее благодарю.

8 wovanich (07.09.2012 12:21 отредактировано wovanich)

  • wovanich
  • Уже не новичок
  • Карма: 2 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

Посмотри если у тебя в короткой новости стиль такой же как в полной т.е этот <div class="stext">. Тогда в файле CSS добавь стиль:
.stext1{padding:15px;}
.stext1 img{float: left; width: 155px; padding:5px}

а в шаблоне короткой новости исправь <div class="stext"> на <div class="stext1">

Добавлено: 07-09-2012 12:30:20

а в html полной новости можно как то прописать?

Можно: <div style="float: left; width: 155px; padding:5px">

А в примее который ты привёл это прописывалось в шаблоне main.tpl перед тегом </head>,
это то же самое что и в файле CSS

9 dark4000

  • dark4000
  • Бывалый!
  • Карма: 0 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

Благодарю всех!
Не хрена не получается.

10 Kanra

  • Kanra
  • Adsumus! Adsumus!
  • Карма: 25 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

Эх. Файлы shortstory.tpl, fullstory.tpl и style.css в архив и залейте на файлообменник, ссылку сюда.

11 dark4000

  • dark4000
  • Бывалый!
  • Карма: 0 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

Давай сделаем так, Вот файлы: http://letitbit.net/download/28652.2936 … а.rar.html

  • Roma
  • Ололошеньки)
  • Карма: 0 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

dark4000 пишет:

Давай сделаем так, Вот файлы: http://letitbit.net/download/28652.2936 … а.rar.html

оооо, не думаю что тебе помогут, залей хоть бы на RGHOST.RU .

13 dark4000 (07.09.2012 14:03 отредактировано dark4000)

  • dark4000
  • Бывалый!
  • Карма: 0 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

Что за байда: Ссылка: http://letitbit.net/download/28652.2936 … 0.rar.html

14 wovanich

  • wovanich
  • Уже не новичок
  • Карма: 2 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

Попробуй вот файлы

http://narod.ru/disk/60647667001.55f2bb … y.rar.html

+ dark4000

15 dark4000

  • dark4000
  • Бывалый!
  • Карма: 0 / 0

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

wovanich, большущее тебе СПАСИБО!
Вопрос закрыт!
Ещё раз спасибо.

Добавлено: 08-09-2012 07:35:13

А это для остальных, особо одарённых как я, что бы не мучили ВОПРОСАМИ участников форума, куда да что прописывать:
Файл style.css: 

/* ---- story ---- */
.story{padding:15px 0 10px 0; background:url(../images/ssep2.png) repeat-x bottom;}
.sheading{padding:0 10px 8px 10px; background:url(../images/ssep.png) repeat-x bottom;}
    .sheading .dbg, .sheading .dltop, .sheading .drtop, .sheading .dbtm, .sheading .dlbtm, .sheading .drbtm{width:100%; height:100%;}
    .sheading .dbg{background:#05475d url(../images/shedbg.png) repeat-x;}
    .sheading .dltop{background:url(../images/shedltop.png) no-repeat;}
    .sheading .drtop{background:url(../images/shedrtop.png) no-repeat 100% 0;}
    .sheading .dbtm{background:url(../images/shedbtm.png) repeat-x bottom;}
    .sheading .dlbtm{background:url(../images/shedlbtm.png) no-repeat 0 100%;}
    .sheading .drbtm{background:url(../images/shedrbtm.png) no-repeat 100% 100%;}
    .sheading .dtitle{background:url(../images/stitle.png) no-repeat 10px 10px; padding:11px 16px 9px 30px; display:block; font-size:1.2em;color:#f0f5f7;}
    .sheading a{color:#f0f5f7; text-decoration:none;}
        .sheading a:hover{color:#f1b813; text-decoration:none;}

.sdate, .sdate span{background:url(../images/sdate.png) no-repeat; height:41px; float:right; display:inline; margin-right:8px; line-height:33px; color:#3f93b1;}
    .sdate span{ background-position:100% -41px; padding:0 55px; float:left;}    
.ratebox{width:85px; height:17px; float:left; padding-left:10px; padding-top:16px; overflow:hidden;}
.stext{padding:15px;}
    .stext img{padding:5px;}    
.stext1{padding:15px;}      /* ---- Вот 1 строка ---- */
    .stext1 img{float:left; width:155px; padding:5px;}    /* ---- Вот 2 строка ---- */
.storybtm{height:39px; padding:0 10px 8px 10px;}

файл shortstory.tpl

</div>
            [rating]<div class="ratebox">{rating}</div>[/rating]
            <div class="clr"></div>                            
        </div></div></div></div></div></div>
    </div>
    <div class="stext1"> /* ---- Меняем div class="stext" на div class="stext1" ---- */
        {short-story}
        <div class="clr"></div>

    </div>

16 TITAN-UZ (08.09.2012 07:45 отредактировано TITAN-UZ)

  • TITAN-UZ
  • Уже не новичок
  • Карма: 0 / 2

Re: [DLE 9.6] Как автоматически изменить размер изображения через CSS

С image-x

<img src="{image-x}" width="155" height="200">

С доп. поля

[xfgiven_x]<img src="[xfvalue_x]" width="155" height="200">[/xfgiven_x]