Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#21 2020-05-23 04:35:47

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,358
Website

Re: Magician website

hilaryaq wrote #323176:

For anyone following this, I was just hesitant to set parameters in the url as Google can pick those up (you can instruct it not to).. so I found very handy code at https://codereview.stackexchange.com/questions/216103/block-youtube-iframes-until-user-consents-with-cookies

Which is just showing how to load an image first with no cookies until consent is clicked, without setting any parameter value or re-loading the page. Handy code!

Thanks for all your help above :)

Nice!


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#22 2020-05-23 08:39:29

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,976
Website

Re: Magician website

Nice site! :-) The lightning effect is magic!

On the video poster image thingy, you can retrieve the poster images in different sizes with php as discussed on this stackoverflow thread. The same principle also works for vimeo videos.

You can use that to display the preview with your own title, notice and play buttons that start the actual video (from the nocookies site 😏) with autostart switched on. On some browsers, the video then starts when you click play, on other browsers you have to click play a second time. A small penalty for not tracking regular site guests.


TXP Builders – finely-crafted code, design and txp

Offline

#23 2020-05-23 12:35:50

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 277
Website

Re: Magician website

Very handy link thanks Jacob! :)


…………………
I <3 txp
…………………

Offline

#24 2020-05-23 17:22:11

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,429
Website

Re: Magician website

Hi Hilary.

May I suggest you one little thing?
From my Firefox on PC, I noticed a vertical scrollbar display due to the 3D rotation of the cards with images.

Here is the minimum correction needed within the Image scroll element:

ul.imagescroll{
	...
	margin:.85em 0;
	...
}

And if you haven’t any other cards to show into your section outside this box, you could remove the horizontal scrollbar:

section#leader {
	...
	/* overflow-x: scroll */
	...
}

If you change the links place here in order to surround the list elements, you would get entire clickable cards (never mind where your visitors click or tap on it):

<ul class="imagescroll">
<li><a href="https://www.davidpeacemagic.ie/wedding/">
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
     <img src="https://www.davidpeacemagic.ie/images/60t.jpg" alt="Image " loading="lazy">
      <h4 class="caption">Wedding</h4>
    </div>
    <div class="flip-card-back">
      <h3>Wedding <i class="fas fa-angle-double-right"></i></h3> 
      <p>David Peace can perform at your wedding, learn more here!</p>
    </div>
  </div>
</div>

<meta itemprop="width" content="800">
<meta itemprop="height" content="533">
<meta itemprop="url" content="https://www.davidpeacemagic.ie/images/60.jpg">

</a></li>
<li><a href="https://www.davidpeacemagic.ie/corporate/">
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
     <img src="https://www.davidpeacemagic.ie/images/61t.jpg" alt="Image " loading="lazy">
      <h4 class="caption">Corporate</h4>
    </div>
    <div class="flip-card-back">
      <h3>Corporate <i class="fas fa-angle-double-right"></i></h3> 
     <p>David Peace can perform at your corporate event, learn more here!</p>
    </div>
  </div>
</div>

<meta itemprop="width" content="800">
<meta itemprop="height" content="533">
<meta itemprop="url" content="https://www.davidpeacemagic.ie/images/61.jpg">

</a></li>
<li><a href="https://www.davidpeacemagic.ie/show/">
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
     <img src="https://www.davidpeacemagic.ie/images/16t.jpg" alt="Image " loading="lazy">
     <h4 class="caption">Show</h4>
    </div>
    <div class="flip-card-back">
      <h3>Show <i class="fas fa-angle-double-right"></i></h3> 
<p>See details of David Peace's latest show, brochure available on request!</p>
    </div>
  </div>
</div>

<meta itemprop="width" content="1080">
<meta itemprop="height" content="720">
<meta itemprop="url" content="https://www.davidpeacemagic.ie/images/16.jpg">

</a></li>
</ul>

If you remove the 2 unedeed attributes into your video élément (governed by CSS instead), you could have a 100% W3C valid website.

Finally, checking your site through an online tool like Gmetrix will give you compressed images (for example): a chance to gain supplementary points for Google Speed Insights score. ;)

Last edited by Pat64 (2020-06-01 03:41:44)


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

#25 2020-05-23 17:41:51

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 277
Website

Re: Magician website

Thanks Patrick! :)


…………………
I <3 txp
…………………

Offline

Board footer

Powered by FluxBB