Forum

Thread tagged as: Question

Online Tutorials Page

Hey there,

Tuts page - https://www.helensianindia.com/tutorials.php

I was just wondering if there was a better way to build this page that I have done using the youtube plugin for perch. I suppose ideally i could do with putting the videos in rows.

Essentially i am using a content template

<div class="panel panel-default blog-post">
    <div class="panel-body">
        <h2><perch:content id="video" type="youtube" label="YouTube video URL" output="title" /></h2>
        <div class="video-wrapper">
            <perch:content id="video" type="youtube" label="YouTube video URL" output="embed" />
        </div>
        <div class="date-holder">
            <p class="post-date"><span class="glyphicon glyphicon-calendar"></span> Posted on - <perch:content id="posted_on" type="date" label="Date" format="D d F" /></p>
        </div>
        <div class="vid-btn-holder">
            <a target="_blank" href="<perch:content id="video" type="youtube" label="YouTube video URL" />" class="btn btn-default btn-sm">View on YouTube..</a>
        </div>
    </div>
</div>

Then it is getting echoed out in tutorials page:

<div class="col-sm-8 blog-left">
                    <h1>Welcome to my Online Tutorials</h1>

                    <?php perch_content('Add Video'); ?>
</div>

This isn't working particularly well being responsive. Any tips on making this pages functionality a bit better would be much appreciated.

Thanks guys!
Martin Murphy

Martin Murphy 0 points

  • 6 years ago
Robert Ketter

Robert Ketter 103 points

6 years ago

Martin, The best thing I can think is to use a thumbnail which links to the youtube video. Otherwise, is there some settings that will take away a lot of the youtube plugin effects on the small images...
Martin Murphy

Martin Murphy 0 points

6 years ago

I suppose I am more worried that it isn't laid out properly. Is there a way I can code this better so that I can put these into rows and then limit it to 2 items per row. Because it isn't scaling very well especially on tablets. Also maybe making this into more of a blog would be better, then having a seperate page for each video because the page is loading quite slowly at the moment with multiple videos loading on the page. Any thoughts?

Martin
Martin Murphy

Martin Murphy 0 points

6 years ago

Bump - Is there anyone that might be able to help me out?

Thanks :)
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

What are you trying to achieve in your HTML?
Martin Murphy

Martin Murphy 0 points

6 years ago

So in the html i am looking to try and get 2 posts into a row, then the next 2 posts into a new row and so on? Also using pagination and limiting each page to a certain amount of posts.

Currently all the posts are just being floated and stacking next to and under each other, which means its not scaling properly and causing issues making the site responsive.

Thanks for the help, I hope that makes sense.. :)
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

This really sounds like a web design question. You need to figure out what you need to output to your page, and then we can answer any templating questions you have about how to achieve that output.
Robert Ketter

Robert Ketter 103 points

6 years ago

Martin, maybe this is your answer in this Perch Forum Post

Robert Ketter