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

Question

[Иван Медведев]

Добрый день!
Есть задача сделать несколько вариантов разметки страницы в зависимости от значения переменной.

Допустим, есть строка (.row), в которой есть три блока (width=33%) и в каждом по изображению. Необходимо, чтобы число блоков в строке можно было изменить, просто заменив значение переменной. Ниже опишу логику:

Переменная other_photo = 3

Если other_photo = 4, то в строке вывести 4 блока (width=25%)
иначе, если other_photo = 3, то вывести три блока (width=33%), а четвертый не показывать
иначе, если other_photo = 2, то вывести два блока (width=50%) - остальные скрыть
иначе, если other_photo = 1, то вывести один блок (width=100%) - остальные скрыть

Это надо написать на PHP. Логику понимаю, а синтаксиса не знаю. Прошу помощи!

Спасибо!

Answer 1

[Антон Литвиненко]

вы же сами все написали.
Получаем значение переменной, как я понимаю из настроек темы.
а в разметке проверяем ее значение и выводим ту разметку которую надо

<?php if($other_photo == 4) : ?>
  разметка
<?php elseif($other_photo == 3) : ?>
  другая разметка
<?php elseif($other_photo == 2) : ?>
  третья разметка
<?php else : ?>
  минимальная разметка
<?php endif; ?>

итд
можно через switch

Comments

[Иван Медведев]

Это лендинг без использования WP. Чистая верстка без движков. Как получить значение переменной и в какой части кода. Допустим, код следующий (с применением вашего ответа):

<section id="catalog">
        <div class="container">
            <div class="row">
                <?php elseif($other_photo == 4) : ?>
                    <div class="col-md-3">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                    <div class="col-md-3">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                    <div class="col-md-3">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                    <div class="col-md-3">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                <?php elseif($other_photo == 3) : ?>
                    <div class="col-md-4">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                    <div class="col-md-4">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                    <div class="col-md-4">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
            </div>
        </div>
    </section>

В каком месте получать значение переменной?

[Антон]

Иван Медведев, А причем тут пхп вообще? Вы сами в чистой верстке знаете, сколько у вас фоток, или эти фотки откуда то тащятся? Откуда?

[Иван Медведев]

Как мне сказали, это будет шаблон. И нужно, чтобы была переменная, изменив которую (значение), можно изменить вид этого блока сайта.

[Иван Медведев]

Антон, я вот так вот сверстал, но страница не грузится, выдает ошибку:

<section id="catalog">
        <div class="container">
            <div class="row">
                <?php $other_photo = 3; ?>
                <?php elseif ($other_photo = 1): ?>
                    <div class="col-lg-12 catalog-item">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                    </div>
                <?php elseif ($other_photo = 2): ?>
                    <div class="col-lg-6 catalog-item">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                    <div class="col-lg-6 catalog-item">
                        <img src="images/extra/2.jpg" alt="">
                    </div>
                    </div>
                <?php elseif ($other_photo = 3): ?>
                    <div class="col-lg-4 catalog-item">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                    <div class="col-lg-4 catalog-item">
                        <img src="images/extra/2.jpg" alt="">
                    </div>
                    <div class="col-lg-4 catalog-item">
                        <img src="images/extra/3.jpg" alt="">
                    </div>
                <?php elseif ($other_photo = 4): ?>
                    <div class="col-lg-3 catalog-item">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                    <div class="col-lg-3 catalog-item">
                        <img src="images/extra/2.jpg" alt="">
                    </div>
                    <div class="col-lg-3 catalog-item">
                        <img src="images/extra/3.jpg" alt="">
                    </div>
                    <div class="col-lg-3 catalog-item">
                        <img src="images/extra/4.jpg" alt="">
                    </div>
                <?php else: ?>
                    <div class="col-lg-4 catalog-item">
                        <img src="images/extra/1.jpg" alt="">
                    </div>
                    <div class="col-lg-4 catalog-item">
                        <img src="images/extra/2.jpg" alt="">
                    </div>
                    <div class="col-lg-4 catalog-item">
                        <img src="images/extra/3.jpg" alt="">
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>

[Иван Медведев]

Решил проблему. Вначале условия elseif поставил вместо if и знак сравнения добавил в условии - все работает. Спасибо за участие!

[Антон]

Иван Медведев,

<?
$class_index = 12 / 6; // 1, 2, 3, 4, 6
?>
<section id="catalog">
	<div class="container">
		<div class="row">
				<div class="col-lg-<?= $class_index?> catalog-item">
					<img src="images/extra/1.jpg" alt="">
				</div>
				<div class="col-lg-<?= $class_index?> catalog-item">
					<img src="images/extra/1.jpg" alt="">
				</div>
				<div class="col-lg-<?= $class_index?> catalog-item">
					<img src="images/extra/1.jpg" alt="">
				</div>
				<div class="col-lg-<?= $class_index?> catalog-item">
					<img src="images/extra/1.jpg" alt="">
				</div>
				<div class="col-lg-<?= $class_index?> catalog-item">
					<img src="images/extra/1.jpg" alt="">
				</div>
				<div class="col-lg-<?= $class_index?> catalog-item">
					<img src="images/extra/1.jpg" alt="">
				</div>
				<div class="col-lg-<?= $class_index?> catalog-item">
					<img src="images/extra/1.jpg" alt="">
				</div>
				<div class="col-lg-<?= $class_index?> catalog-item">
					<img src="images/extra/1.jpg" alt="">
				</div>
				<div class="col-lg-<?= $class_index?> catalog-item">
					<img src="images/extra/1.jpg" alt="">
				</div>					
		</div>
	</div>
</section>