Jump to content

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


 Share

Recommended Posts

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

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.

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites
В 25.08.2022 в 13:46, Александр Христич сказал:

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

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

Link to comment
Share on other sites

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

если <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

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

Link to comment
Share on other sites
Posted (edited)

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

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

Edited by Александр Христич
Link to comment
Share on other sites

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

Link to comment
Share on other sites
Posted (edited)

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

Edited by Александр Христич
Link to comment
Share on other sites

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

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

{{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 с любыми значениями имеет разную величину !

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

 

Link to comment
Share on other sites
10 часов назад, Александр Христич сказал:

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

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

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

 

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

Edited by TemKa_SD
Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites
10 часов назад, Александр Христич сказал:

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

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

Link to comment
Share on other sites

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

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

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

<div class='ipsGrid_span3 ipsSpacer_bottom'>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

Messenger

    ×
    ×
    • Create New...

    Important Information

    By using our site you agree to our Privacy Policy