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

[Александр Христич 11]

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

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

<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.

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

[TemKa_SD 8]

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

[Александр Христич 11]

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

[Александр Христич 11]

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

[Кирилл 191]

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

[TemKa_SD 8]

В 25.08.2022 в 13:46, Александр Христич сказал:

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

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

[Александр Христич 11]

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

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

 

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

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

[Александр Христич 11]

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

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...

Изменено 28 августа, 2022 пользователем Александр Христич

[Александр Христич 11]

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

[Кирилл 191]

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

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

 

[Александр Христич 11]

Кирилл <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.

Изменено 29 августа, 2022 пользователем Александр Христич

[Александр Христич 11]

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

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

{{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}}

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

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

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

 

[TemKa_SD 8]

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

[Александр Христич 11]

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

[TemKa_SD 8]

10 часов назад, Александр Христич сказал:

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

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

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

 

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

Изменено 31 августа, 2022 пользователем TemKa_SD

[Александр Христич 11]

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

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

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

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

[TemKa_SD 8]

10 часов назад, Александр Христич сказал:

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

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

[Александр Христич 11]

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

[Кирилл 191]

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

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

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

<div class='ipsGrid_span3 ipsSpacer_bottom'>