Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#13 2020-05-22 08:51:34

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

Re: Magician website

It seems like it’s because I’m logged into YouTube on chrome maybe.. so in Firefox I see no cookies at all in the nocookie mode under the inspector panel, but in chrome I can but it is possible they have followed me from YouTube as a logged in person.. according to Firefox the nocookie is empty and according to chrome I see cookies but I wonder is that because I consented to that on the YouTube side. There’s a login_info cookie and a cookie labelled consent dated 2017.. which looks like I consented on the YouTube side maybe.


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

Offline

#14 2020-05-22 09:06:24

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,060
Website GitHub Mastodon Twitter

Re: Magician website

hilaryaq wrote #323143:

That’s strange, why wouldn’t they show in the inspector>console then?

Is it saying it’s from the YouTube video?

Here they are:)

  • ajax.googleapis.com
  • use.fontawesome.com
  • fonts.googleapis.com
  • yt3.ggpht.com
  • fonts.gstatic.com
  • www.youtube-nocookie.com
  • www.youtube.com
  • i.ytimg.com
  • s.ytimg.com

and these are from the home page

  • ajax.googleapis.com
  • use.fontawesome.com
  • fonts.googleapis.com
  • www.youtube-nocookie.com
  • www.youtube.com
  • s.ytimg.com

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#15 2020-05-22 09:09:30

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,210
GitHub

Re: Magician website

Well done! I spotted a small snag with the ‘Book Me’ button in the header – see below:

https://youtu.be/xIYZFB01SPY

Video is unlisted, let me know when you want me to delete it.

Near the smaller breakpoint ‘Book Me’ splits over two lines. I only found this out with Tor when I was buying heaps of illegal narcotics cookie sleuthing, so it’s not likely to be a common occurrence, I don’t think.

I can’t test it here to say for sure, but a &nbsp; may fix it.

Offline

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

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

Re: Magician website

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


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

Offline

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

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

Re: Magician website

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


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

Offline

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

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,210
GitHub

Re: Magician website

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

Offline

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

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

Re: Magician website

Great resource! Site is improved thank you :)


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

Offline

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

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

Re: Magician website

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


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

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,060
Website GitHub Mastodon Twitter

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 | hblack.art | EMAP | A Sea change | Toolkit of Care
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: 4,702
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: 335
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,626
GitHub Twitter

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

Board footer

Powered by FluxBB