Перейти к содержанию

CSS фреймворк Макет: сетки


 Поделиться

Рекомендуемые сообщения

Пытаюсь сделать такой вывод

10337760_2022-08-2222-47-15.thumb.png.597197e35c443414e31b29abd9d9308b.png

с помощью разметки

<div class='ipsGrid ipsGrid_collapsePhone' data-ipsGrid-equalHeights='row'>
  <div class='ipsGrid_span7'>{block="anonse"}</div>
  <div class='ipsGrid_span5'>{block="anonse_2"}</div>
</div>

В документации CSS фреймворк > Макет: сетки указано что при использовании data-ipsGrid-equalHeights='row'  все ipsGrid_span становятся одинаковыми по высоте, не зависимо от их содержимого. 

Подскажите что делаю не так,почему

  <div class='ipsGrid_span7'>{block="anonse"}</div>
  <div class='ipsGrid_span5'>{block="anonse_2"}</div>

разные по высоте?

И что в документации означает

Цитата

Для сеток, у которых элементы могут иметь разную ширину или высоту, рассмотрите использование виджета ips.ui.grid widget.

Об этом ничего нигде не сказано.

Ссылка на комментарий
Поделиться на другие сайты

Здравствуйте, как минимум, код должен быть такой: data-ipsgrid data-ipsgrid-equalheights="row".

Ссылка на комментарий
Поделиться на другие сайты

TemKa_SD так ведь такой и есть,разметка предоставлена сразу под скрином.

Ссылка на комментарий
Поделиться на другие сайты

TemKa_SD К тому же data-ipsgrid в данном случае вообще не нужен,т.к он выравнивает все ipsGrid_span*  по ширине.

Ссылка на комментарий
Поделиться на другие сайты

Перед кодом data-ipsGrid-equalHeights='row' нужно добавить data-ipsGrid

Ссылка на комментарий
Поделиться на другие сайты
В 25.08.2022 в 13:46, Александр Христич сказал:

TemKa_SD К тому же data-ipsgrid в данном случае вообще не нужен,т.к он выравнивает все ipsGrid_span*  по ширине.

Этот код подключает JS фреймворк.

Ссылка на комментарий
Поделиться на другие сайты

Кирилл Тогда рушится страница,не знаю почему.

если <div class='ipsGrid ipsGrid_collapsePhone' data-ipsGrid-equalHeights='row'>,то

1309874031_2022-08-2812-21-28.thumb.png.234d887b3562f6ab9b9527b9da227f9b.png

 

а вот если <div class='ipsGrid ipsGrid_collapsePhone' data-ipsGrid data-ipsGrid-equalHeights='row'>,то

983481116_2022-08-2812-20-52.thumb.png.cac919f716366b1acfb72ce0bf3d0330.png

Причем все это на "чистом и пустом" движке.

Ссылка на комментарий
Поделиться на другие сайты

В документации сказано,что

data-ipsGrid

<div class='ipsGrid' data-ipsGrid>
  ...
</div>

Такая запись позволяет задать одинаковую ширину дочерним ipsGrid_spanX, например, код

<div class='ipsGrid' data-ipsGrid>
  <div class='ipsGrid_span5'></div>
  <div class='ipsGrid_span7'></div>
</div>

На самом деле будет вот такой:

<div class='ipsGrid' data-ipsGrid>
  <div class='ipsGrid_span5'></div>
  <div class='ipsGrid_span5'></div>
</div>

То есть все дочерние ipsGrid_span будут такие же, как первый ipsGrid_span.

А так как в моем случае разметка

<div class='ipsGrid_span7'></div>

<div class='ipsGrid_span5'></div>

то ipsGrid_span5 принимает значение ipsGrid_span7 и ,соответственно,ломает всю страницу.

И какое все-таки решение?

К тому же в док-ции ничего не сказано об обязательном  data-ipsGrid...

Изменено пользователем Александр Христич
Ссылка на комментарий
Поделиться на другие сайты

Какое все-таки решение? Как реализовать разметку с разными ipsGrid_span* и чтобы высота блоков выравнивалась?

Ссылка на комментарий
Поделиться на другие сайты

Вот такой код у вас не работает?

<div class="ipsList_reset ipsGrid" data-ipsgrid data-ipsgrid-equalheights="row">

 

Ссылка на комментарий
Поделиться на другие сайты

Кирилл <div class='ipsGrid ipsGrid_collapsePhone ipsGrid_collapseTablet' data-ipsGrid data-ipsGrid-equalheights='row'>
<div class='ipsGrid_span7'>{block="anonse_img"}</div>
<div class='ipsGrid_span5'>{block="anonse_txt"}</div>
</div>

{block="anonse_img"} выводит одну запись с изображением.

{block="anonse_тхт"} выводит заглавия 5-ти записей.

 

по высоте выравниваются при условии что обе секции ipsGrid_span равны 6.

Изменено пользователем Александр Христич
Ссылка на комментарий
Поделиться на другие сайты

Итак,продолжаем.

Создал шаблон блока

{{if !empty( $records ) }}
    {{if $orientation == 'vertical'}}
        <div class='ipsPad_half ipsWidget_inner'>
            <ul class='ipsDataList ipsDataList_reducedSpacing ipsContained_container'>
                {{foreach $records as $record}}
                    <li class='ipsDataItem'>
                        <div class='ipsDataItem_icon ipsPos_top'>
                            {template="userPhoto" group="global" app="core" params="$record->author(), 'tiny'"}
                        </div>
                        <div class='ipsDataItem_main cWidgetComments'>
                            <div class="ipsCommentCount ipsPos_right {{if ( $record->record_comments ) === 0}}ipsFaded{{endif}}" data-ipsTooltip title='{lang="num_replies" pluralize="$record->record_comments"}'>{expression="$record->record_comments"}</div>
                            <div class='ipsType_break ipsContained'>
                                <a href="{$record->url( "getPrefComment" )}" title='{lang="view_this_cmsrecord" sprintf="\IPS\Member::loggedIn()->language()->addToStack( 'content_db_lang_sl_' . $record::$customDatabaseId, FALSE ), $record->_title"}' class='ipsDataItem_title'>{$record->_title}</a>
                            </div>
                            <p class='ipsType_reset ipsType_medium ipsType_blendLinks'>
                                <span>{lang="byline_nodate" htmlsprintf="$record->author()->link( NULL, NULL, $record->isAnonymous() )"}</span><br>
                                <span class="ipsType_light">{datetime="$record->mapped('date')"}</span>
                            </p>
                        </div>
                    </li>
                {{endforeach}}
            </ul>
        </div>
    {{else}}
<div class='ipsGrid ipsGrid_collapsePhone ipsGrid_collapseTablet' data-ipsGrid data-ipsGrid-equalheights='row'>        
    {template="recordRow" group="anonse_commenting" location="database" app="cms" themeClass="IPS\cms\Theme" params="null, null, $records"}
</div>
    {{endif}}
{{endif}}

для вывода статей создал шаблон

{{$rowIds = array();}}
{{foreach $rows as $row}}
    {{$idField = $row::$databaseColumnId;}}
    {{$rowIds[] = $row->$idField;}}
{{endforeach}}
{{$iposted = $table ? $table->contentPostedIn : array();}}
{{foreach $rows as $row}}
    {{$idField = $row::$databaseColumnId;}}
<div class='ipsGrid_span3 ipsSpacer_bottom'>
    <article class='cCmsCategoryFeaturedEntry ipsClear ipsClearfix ipsBox {{if $row->hidden()}}ipsModerated{{endif}}'>
    {{if \count( $row->customFieldsForDisplay('listing') )}}
        <div class='ipsDataItem_meta'>
        {{foreach $row->customFieldsForDisplay('listing') as $fieldId => $fieldValue}}
            {{if $fieldValue}}
                {$fieldValue|raw}
            {{endif}}
        {{endforeach}}
        </div>
    {{endif}}
 
 
            {{$location = $row != NULL ? $row : ($row->post != NULL ? $row->post : $row);}}
                {{$field_content = $row->post == NULL ? 'field_'.$location->database()->field_content : $row->post; $field_content = $row->post == NULL ? $location->$field_content : $field_content;}}
                {{if \preg_match( '#<fileStore.core_Attachment>\S+(?:jpg|jpeg|png|webp)#', $field_content, $image_url )}}
                {{$image_url = \str_replace('<fileStore.core_Attachment>', \IPS\File::getClass('core_Attachment')->baseUrl(), $image_url[0]);}}
              {{if settings.lazy_load_enabled}}
                <a href="{$row->url( "getPrefComment" )}" title="{lang="read_more_about" sprintf="$row->_title"}" >
                <img class='ipsImage' src='{expression="\IPS\Text\Parser::blankImage()"}' alt='{wordbreak="$row->_title"}' data-src='{file="$image_url" extension="core_Attachment"}'>
                </a>
               {{else}}
               <a href="{$row->url( "getPrefComment" )}" title="{lang="read_more_about" sprintf="$row->_title"}" >
                <img class='ipsImage' alt='{wordbreak="$row->_title"}' src='{file="$image_url" extension="core_Attachment"}'>
              </a>
               {{endif}}
      {{endif}}
          <header>

            <span class='ipsType_sectionHead ipsPadding ipsContained_container'>    
                <span class='ipsType_break ipsContained'>
                    <a href="{$row->url( "getPrefComment" )}" title="{lang="read_more_about" sprintf="$row->_title"}">{wordbreak="$row->_title"}</a>
                </span>
            </span>
    </header>
      <div class='ipsItemControls'>
                <ul class='ipsComment_controls ipsClearfix ipsItemControls_left'>

                  <li><a href='{$row->url()}#comments' title='{lang="view_comments"}'><i class='fa fa-comment'></i> {$row->record_comments}</a></li>
            
                    <li><i class="fa fa-eye"></i> {$row->record_views}</li>
               </ul>
      </div>                     
</article>
        </div>
{{endforeach}}

Заходим на страницу и видим что

437124037_2022-08-2920-44-37.thumb.png.be3f82037b0d24863f6e9b627565a1fa.png

секции ipsGrid_span3 имеют разную высоту ! Причем ipsGrid_span с любыми значениями имеет разную величину !

Так все-таки есть решение или нет? Или я что-то не так делаю?

 

Ссылка на комментарий
Поделиться на другие сайты

Здравствуйте. Попробуйте убрать у картинок lazyLoad, должно заработать.

Ссылка на комментарий
Поделиться на другие сайты

TemKa_SD и каким образом lazyLoad ,т.е отложенная загрузка изображений,влияет на разметку?

Ссылка на комментарий
Поделиться на другие сайты
10 часов назад, Александр Христич сказал:

TemKa_SD и каким образом lazyLoad ,т.е отложенная загрузка изображений,влияет на разметку?

Я не могу точно сказать, только предположить. JS фреймворк ipsGrid загружается до того, как на странице появятся изображения lazyLoad и поэтому он не может правильно всё это обработать. У меня были проблемы как у вас, я убрал из кода data-src и оставил только src и всё заработало как надо.

Возможно @Кириллподскажет, так как мне тоже интересно, почему так плохо работает с lazyLoad изображениями.

 

P.S.: При этом, в коде к изображениям явно указаны ширина и высота.

Изменено пользователем TemKa_SD
Ссылка на комментарий
Поделиться на другие сайты

TemKa_SD Да я уже все варианты испробывал:и data-src менял,и отключал в настройках ленивую загрузку медиа,и т.д.

14 часов назад, TemKa_SD сказал:

P.S.: При этом, в коде к изображениям явно указаны ширина и высота.

Это вы про что?

Ссылка на комментарий
Поделиться на другие сайты
10 часов назад, Александр Христич сказал:

Да я уже все варианты испробывал:и data-src менял,и отключал в настройках ленивую загрузку медиа,и т.д.

Дайте ссылку на сайт, можно в ЛС.

Ссылка на комментарий
Поделиться на другие сайты

TemKa_SD он на локалке

Ссылка на комментарий
Поделиться на другие сайты

Нужно из этой строки:

<article class='cCmsCategoryFeaturedEntry ipsClear ipsClearfix ipsBox {{if $row->hidden()}}ipsModerated{{endif}}'>

Убрать класс ipsBox и добавить его в строку выше:

<div class='ipsGrid_span3 ipsSpacer_bottom'>

 

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
 Поделиться

×
×
  • Создать...

Важная информация

Используя наш сайт вы соглашаетесь с нашей Политикой конфиденциальности