Forums

Build question

Permalink 1 user found helpful
I'm building a site for a client that has multiple video pages with multiple videos on each page. The pages have rows of videos with a video thumbnail on the left and descriptions on the right (see screenshot - each video has a class, which includes a play button with a hover state.) I'm using the Bootstrap framework, so on desktop the thumbnail image is 3 col, and the description is 9. When the user clicks on the thumbnail image, the video plays in lightbox. Each video page will have a different number of videos (I don't know how many each page will have.) The client will be entering their content. What is the best way for me to build this section to make it easy for the client to add their video thumbnail image and description? I currently have a row for each video thumbnail/description, but since I don't know how many videos will be on each page, I can't add an area for each video. (I hope this makes sense.)

Thanks in advance!!

1 Attachment

Smireles
 
rge replied on at Permalink Reply
I believe the best approach is to make a block. In the block your client will be enable to add a:
image,
video,
description.

If you don't want to program the block you can use block designer. You will first need to check if it fits your needs.
https://www.concrete5.org/marketplace/addons/block-designer...

You can edit the generated block and add the lightbox and html structure.
pixeljunkie replied on at Permalink Reply
pixeljunkie
Hi,
You could build a custom layout preset in your page_theme.php to show whenever your client needs to enter an extra row. It will show in the dropdown-box after you've hit "Add layout". This will give you control of the columns and is convenient for your customer to use.

public function getThemeAreaLayoutPresets()
      {
         $presets = array(
            array(
               'handle' => 'three_columns',
               'name' => 'dreispaltig',
               'container' => '<div class="row"></div>',
               'columns' => array(
                  '<div class="col-xs-12 col-sm-6 col-md-4"></div>',
                  '<div class="col-xs-12 col-sm-6 col-md-4"></div>',
                  '<div class="col-xs-12 col-sm-6 col-md-4"></div>'
               ),
            ),
            array(
               'handle' => 'two_columns',
Viewing 15 lines of 25 lines. View entire code block.


Make sure to include this line

use Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface;


underneath your namespace.
Smireles replied on at Permalink Reply
Smireles
Thanks — those are both good solutions!!