Magician website

hilaryaq · 2020-05-22 09:11:36

haha, thanks for the video! I’ll set the breakpoint higher is the easiest way out of it, and the right way, thanks!

hilaryaq · 2020-05-22 10:35:00

I’ve just got rid of YouTube completely until I can implement the solution above, no time right now! There should be no cookies now bar necessary ones. I think a google font cdn link would count as ok, if we can’t load them it’s back to web default fonts :(

gaekwad · 2020-05-22 10:36:31

hilaryaq wrote #323159:

I think a google font cdn link would count as ok, if we can’t load them it’s back to web default fonts :(

For when you have time: google-webfonts-helper.herokuapp.com/fonts

hilaryaq · 2020-05-22 12:13:20

Great resource! Site is improved thank you :)

hilaryaq · 2020-05-22 17:59:06

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 :)

colak · 2020-05-23 04:35:47

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!

jakob · 2020-05-23 08:39:29

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.

hilaryaq · 2020-05-23 12:35:50

Very handy link thanks Jacob! :)

Pat64 · 2020-05-23 17:22:11

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)

hilaryaq · 2020-05-23 17:41:51

Thanks Patrick! :)

Textpattern CMS

Textpattern CMS support forum

#16 2020-05-22 09:11:36

Re: Magician website

#17 2020-05-22 10:35:00

Re: Magician website

#18 2020-05-22 10:36:31

Re: Magician website

hilaryaq wrote #323159:

#19 2020-05-22 12:13:20

Re: Magician website

#20 2020-05-22 17:59:06

Re: Magician website

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

Re: Magician website

hilaryaq wrote #323176:

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

Re: Magician website

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

Re: Magician website

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

Re: Magician website

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

Re: Magician website

Board footer