Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Шаблоны (TPL) Как организовать вывод картинки в шапке сайта при просмотре полной новости?

Как организовать вывод картинки в шапке сайта при просмотре полной новости?


     22.01.2016    Шаблоны (TPL)    595

вопрос
Всем привет, как сделать при просмотре полной новости отдельным тегом, чтоб в шапке сайта (то есть в main) была первая картинка из fullstory?
В чем принцип: я хочу при просмотре новости сделать фон шапки первой картинкой которая есть в полном описание.

Ответа пока нет


Комментарии пользователей (14)

lehasta
1

35 | 8

lehasta - 22 января 2016 22:42 - Юзер

можно закинуть в какой-нибудь .js файл или main.tpl
<script>
$(document).ready(function(){
  var img = document.querySelector('#maincont img').src;
  document.querySelector('#image').innerHTML = '<div style="background-image: url(' + img + ');width: 800px;height: 400px;background-size:100% auto;background-position: 50% 50%"></div>';
  });
</script>

вывод фона
<div id="image"></div>

fullstory.tpl

<div id="maincont" class="maincont">{full-story}    </div>


Как-то так.

Heaven_Lord
4

54 | 4

Heaven_Lord - 22 января 2016 23:02 - Юзер

Ваш принцип понятен возможно я неправильно объяснил.
у меня в main.tpl есть
<div id="featured">
    <div class="container">    
        <div id="et-featured-posts" class="clearfix">
           [not-aviable=showfull]    
           {include file="slider_main.tpl"}
                      [/not-aviable]    
                  
            [aviable=showfull]
           {include file="slider_mini.tpl"}
           [/aviable]
          
           </div> <!-- #et-featured-posts -->
    </div> <!-- .container -->    
</div> <!-- #featured -->


а в slider_mini.tpl
<div class="post-thumbnail">
<img src="{imagelarge-1} " alt="{title}">
            <h1 class="post-heading">{title}</h1>
    </div> <!-- .post-thumbnail -->
    </div>


возможна ли сделать чтоб из slider_mini.tpl работал в фуллстори и вставилась {image-1}

Heaven_Lord
4

54 | 4

Heaven_Lord - 22 января 2016 23:17 - Юзер

fuf получилось сделать но как сделать чтоб он брал имена {image-1}

lehasta
1

35 | 8

lehasta - 22 января 2016 23:19 - Юзер

Ну если принцип понятен, то вот это " + img + " и есть {image-1},  выводиться - <div id="image"></div>. если Вам нужно использовать как фон, то 
[aviable=showfull]
<div id="image">{include file="slider_mini.tpl"}</div>
[/aviable]

только {full-story} нужно обернуть id="maincont", что бы вытащить картинку.

а здесь поправить стили
<div style="background-image: url(' + img + ');width: 800px;height: 400px;background-size:100% auto;background-position: 50% 50%"></div>

Heaven_Lord
4

54 | 4

Heaven_Lord - 23 января 2016 00:00 - Юзер

вопросик работает всю на ура но теперь получается что {image-1} дублируется в шапке и новости можно ли как нибудь исправить ?

Heaven_Lord
4

54 | 4

Heaven_Lord - 22 января 2016 23:22 - Юзер

нашел промашку спс вам :)

lehasta
1

35 | 8

lehasta - 23 января 2016 00:13 - Юзер

Можно с помощью CSS. Например

<div id="maincont" class="maincont">{full-story}</div>
CSS
.maincont img {display: none;} /*Убираем первую картинку в новости*/
.maincont img + img {display: block;} /*показываем вторую и последующие картинки.*/

lehasta
1

35 | 8

lehasta - 23 января 2016 00:26 - Юзер

лучше даже
.maincont img {display: none;} /*прячем первую картинку в новости*/
.maincont img + img {display: inline-block;} /*под размер картинки.*/

Heaven_Lord
4

54 | 4

Heaven_Lord - 23 января 2016 00:29 - Юзер

ага ясненько это работает но появляется другой вопрос почему не видно <h1 class="post-heading">{title}</h1> из slider_mini.tpl ?

Heaven_Lord
4

54 | 4

Heaven_Lord - 23 января 2016 01:11 - Юзер

и вот что заметил
.maincont img {display: none;} /*Убираем первую картинку в новости*/
.maincont img + img {display: block;} /*показываем вторую и последующие картинки.*/

убирает не только 1 картинку а все

lehasta
1

35 | 8

lehasta - 23 января 2016 01:57 - Юзер

По первому:
если Вы {include file="slider_mini.tpl"} вставляете в main.tpl, то <h1 class="post-heading">{title}</h1> из slider_mini.tpl показываться не будет. {title} - для краткой и полной новости.


По второму:
Попробуйте так

.maincont img:first-child {display: none;} /*прячем первую картинку в новости если она не [thumb]*/
.maincont a img:first-child {display: block;}/*показываем все [thumb]*/

Короче со стилями нужно эксперементировать

Heaven_Lord
4

54 | 4

Heaven_Lord - 23 января 2016 10:18 - Юзер

С титле ясно но вот с первой картинке так и не решил проблему.

Heaven_Lord
4

54 | 4

Heaven_Lord - 23 января 2016 10:35 - Юзер

может ли быть причиной что я использовал поправки из данной стати Full Image

Heaven_Lord
4

54 | 4

Heaven_Lord - 23 января 2016 12:17 - Юзер

вопрос решен спс вам lehasta :)

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы