Механизм выражений и CSS - PullRequest
Новая
       2

Механизм выражений и CSS

0 голосов
/ 11 февраля 2011

Я учился с помощью Expression Engine. Одна вещь поставила меня в тупик, хотя.

У меня есть макет, который использует сетку из четырех столбцов (см. http://training.customstudio.co.uk/services).). Здесь используются три класса CSS: один для элемента столбца, один для последнего элемента столбца и один для строки, чтобы добавить горизонтальное правило .

Я использовал переключатель класса EE для создания последнего класса столбца и столбца (см. http://training.customstudio.co.uk/portfolio), но я не могу понять, как заставить EE создать класс строки. Я мог бы сделать это вручную , но нужно, чтобы страница была динамичной, поэтому, если в ней 16 элементов, под каждой будет по 4 строки.

Я использовал следующий код: 

<div class="content-main">
                        <h1>Portfolio</h1>
                            {exp:channel:entries channel="portfolio" status="open|Featured" orderby="title" sort="asc"}
                            <div class="{switch='col|col|col|col-last'}">
                                <h4><a href="{title_permalink='portfolio'}">{title}</a></h4>
                                <p>{project_description}</p>
                            </div><!-- /end #col -->
                            {/exp:channel:entries}
                    </div>
<!-- /end #content-main -->

Буду очень признателен за любую помощь!

Заранее спасибо,

Том Перкинс

Ответы [ 2 ]

0 голосов
/ 09 апреля 2015

Вы также можете сделать это с помощью оператора модуля, который может вернуть n-й элемент. (https://ellislab.com/blog/entry/the-modulus-operator)

<div class="content-main">
    <h1>Portfolio</h1>
        {exp:channel:entries channel="portfolio" status="open|Featured" orderby="title" sort="asc"}
        {!-- Every 4th item add in a div with the class of row --}
        {if count == 1 OR count % 4 == 1}<div class="row">{/if}
        <div class="{switch='col|col|col|col-last'}">
            <h4><a href="{title_permalink='portfolio'}">{title}</a></h4>
            <p>{project_description}</p>
        </div><!-- /end #col -->
        {if count % 5 == 0 OR count == total_results}</div>{/if}
        {/exp:channel:entries}
</div>
0 голосов
/ 01 ноября 2011

Если вы оборачиваете свои столбцы div в операторы switch, которые содержат div 'row' каждые четыре итерации, вы должны получить то, что ищете: 

                <div class="content-main">
                    <h1>Portfolio</h1>
                        {exp:channel:entries channel="portfolio" status="open|Featured" orderby="title" sort="asc"}
                        {switch='<div class="row">|||'}
                        <div class="{switch='col|col|col|col-last'}">
                            <h4><a href="{title_permalink='portfolio'}">{title}</a></h4>
                            <p>{project_description}</p>
                        </div><!-- /end #col -->
                        {switch='|||</div>'}
                        {/exp:channel:entries}
                </div>
...