New Skin CSS Grid/Flex based + Vanilla JS File

[dpDesignz]

If anyone is interested I rebuilt the index.html page and css file(s) using CSS Grid and Flex to make a responsive theme based off the original.

Files updated are index.html to have a better structure and also style.css. iPhone stylesheet no longer exists as the media-queries are built into styles. I also made a few alterations to plex.js to add a couple of bits of markup.

UPDATE I have now uploaded my own repo for the skin and there is also an option to use a re-written vanilla javascript file which removes the jquery requirement!

[mkaand]

Hi @dpDesignz

Check my PLEX Export page https://plex.dogan.org Instead of using index.html I made index.php and If data.js updates (my cron runs on every sundays) Automatically changed footer of page. The only issue is search bots cannot index this kind of website. I am looking for solution for this.

[dpDesignz]

Hi @dpDesignz

Check my PLEX Export page https://plex.dogan.org Instead of using index.html I made index.php and If data.js updates (my cron runs on every sundays) Automatically changed footer of page. The only issue is search bots cannot index this kind of website. I am looking for solution for this.

Very cool! Why change to a php file? What changes in your file that doesn't already?

Also, what benefit would serach bot indexing give you?

[mkaand]

Hi @dpDesignz

I changed it because original file was html as I know and I need to update my footer as dynamic. If my Plex Export updated data file updated. I added this code:

`

Kaan's Plex Media Archive | Copyright | Plex Export

</div><!-- end #footer -->`

And here is the auto_copyright function:

function auto_copyright($year = 'auto'){ if(intval($year) == 'auto'){ $year = date('Y'); } if(intval($year) == date('Y')){ echo intval($year); } if(intval($year) < date('Y')){ echo intval($year) . ' - ' . date('Y'); } if(intval($year) > date('Y')){ echo date('Y'); } } ?>

I want to search bots came to my website and index it. Because maybe I will sell my archive online if someone search and find me. I already fixed this also. You can check Google cache:

http://webcache.googleusercontent.com/search?q=cache%3Ahttps%3A%2F%2Fkaan.dogan.org%2Fplex%2F%231&pws=0&gl=us&gws_rd=cr

Right click and view source.

[mkaand]

Can you share your vanilla_js demo website? Maybe I can switch to yours.

[dpDesignz]

Hi @dpDesignz

I changed it because original file was html as I know and I need to update my footer as dynamic. If my Plex Export updated data file updated. I added this code:

<div id="footer"> <p><a href="https://plex.dogan.org">Kaan's Plex Media Archive | Copyright <?php auto_copyright("2000");?></a> | <a href="https://plex.dogan.org">Plex Export</a> <span id="last_updated"></span></p> </div><!-- end #footer -->

And here is the auto_copyright function:

function auto_copyright($year = 'auto'){ if(intval($year) == 'auto'){ $year = date('Y'); } if(intval($year) == date('Y')){ echo intval($year); } if(intval($year) < date('Y')){ echo intval($year) . ' - ' . date('Y'); } if(intval($year) > date('Y')){ echo date('Y'); } } ?>

I want to search bots came to my website and index it. Because maybe I will sell my archive online if someone search and find me. I already fixed this also. You can check Google cache:

http://webcache.googleusercontent.com/search?q=cache%3Ahttps%3A%2F%2Fkaan.dogan.org%2Fplex%2F%231&pws=0&gl=us&gws_rd=cr

Right click and view source.

Interesting. So it's only to dynamically display the date. Why not just change your copyright text to something like `Copyright 2000 - ``? That will do the same thing since I'm assuming you won't be changing the first year you and you want the second year to dynamically show the current year? Save having to generate the content server-side. 😄

How do you mean sell your archive online? As in your media files? Yes, it has been shown that Google does read generated javascript content now which is helpeful!

Can you share your vanilla_js demo website? Maybe I can switch to yours.

I've update my repo readme with a link to a demo. I need to strip a whole heap of data though as it's currently over 10mb so takes a bit to load which is a bit overkill for a demo. 😄

[mkaand]

Hi,

I can do that with javascript yes you right but I am good at php and also another function checks visitors IP and If the IP belongs to GOOGLE it shows plain text crawler friendly page. :)

[dpDesignz]

Hi,

I can do that with javascript yes you right but I am good at php and also another function checks visitors IP and If the IP belongs to GOOGLE it shows plain text crawler friendly page. :)

Ah, so there are other functions in there too. Makes sense then 😄 very cool

[mkaand]

Thanks, I like your archive. But I couldn't find major changes for skin. I mean mine also responsive. I don't have any issue on mobile or tablet. But IF you can add crawler friendly version Plex-Export it will be great. I made my own solution but not looks good crawler page includes only text. Actually I can add photos tumbs too but layout is not ok. search engines should easily index these pages. This is good for creating movie website content.

[dpDesignz]

Thanks, I like your archive. But I couldn't find major changes for skin. I mean mine also responsive. I don't have any issue on mobile or tablet. But IF you can add crawler friendly version Plex-Export it will be great. I made my own solution but not looks good crawler page includes only text. Actually I can add photos tumbs too but layout is not ok. search engines should easily index these pages. This is good for creating movie website content.

The major changes are around the mobile and tablet experience and utilising the full-screen width. I didn't want to completely re-write the skin, just reduce the number of files and code and tidy it up a bit. I just checked your site again and it breaks if you switch between portrait and landscape mode, and also your TV show item popups can't handle season and episode information on phones very well, it just breaks out of the popup (this was one of the main things I fixed as font sizing also wasn't standardised). I'm not sure if it's your code or the original code handling this. Since mine is using grid and flex it adapts no matter what. (not trying to rip into your code at all. It's pretty cool)

How are you outputting your crawler friendly version currently? Is it PHP or Javascript? If you add an issue to my repo with what you're trying to achieve I'll see if I can put something together. No point clogging up this issue board 😄