1 (2017-01-24 10:25:28 отредактировано ravilr)

Тема: Повторяемый html блок с входными данными

Специально написал пример, чтобы было видно, почему удобно пользоваться "гибридными" текстовыми редакторами, а не полноценными.

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

1. Создаем сниппет,  назовем его gallary

<?
Shortcode::add('foo', 'foo');

function foo($attributes, $content) {
extract($attributes);

$html  = '<div class="row">';
$html .= '<div class = "text-center col-sm-12 botton color-red">';
$html .= '  <div class="row">';
$html .= '    <div class="col-sm-6"><img src="'.$image.'" alt=""></div>';    
$html .= '    <div class="col-sm-6">'.Filter::apply('content', $content).'</div>';
$html .= '  </div>';    
$html .= '</div>';    
$html .= '</div>';    

return $html;
    
}

?>

2. На странице просто пишем шоткоды с параметрами. Пример ниже

{snippet get="gallary"}

{foo image="/public/upload/image/picture1.jpg"}
тут один текст
много строк
{/foo}

{foo image="/public/upload/image/picture2.jpg"}
тут второй текст много строк
строк строк
{/foo}


На выходе получим

<div class="row">
<div class="text-center col-sm-12 botton color-red">
<div class="row">    
<div class="col-sm-6"><img src="/public/upload/image/picture1.jpg" alt=""></div>    
<div class="col-sm-6"><p>тут один текст много строк</p>
</div>
</div>
</div>
</div>

<div class="row">
<div class="text-center col-sm-12 botton color-red">  
<div class="row">    
<div class="col-sm-6"><img src="/public/upload/image/picture2.jpg" alt=""></div>    
<div class="col-sm-6">
<p>тут второй текст много строк строк строк</p>
</div>  
</div>
</div>
</div>

А в итоге клиенту трудно будет сломать что то. Если сломает... то увидит. Если не увидит, то хоть подправить можно.

Ну и конечно это только пример, но пример из жизни. Как сделать красиво подручными средствами, но при этом не использовать плагины статичных данных или галерей.

Поделиться