CyberD.org
C:\ Home » Blog » Archive for "Code" (?)

Customizing WordPress MediaElement.js Audio Shortcode Again

Back in 2015 I customized the WordPress MediaElement.js audio shortcode, and some time since then it broke. I tried fixing it. I dug around and did things but... nothing seemed to work. So I finally cleared out the old code and started fresh.

This is what the vanilla version looked like:

Original

This is what my 2015 version looked like:

New!

And now here's the 2018 version:

The New MediaElement Element!

The process was a lot more time-consuming last time - mainly because I'd never done it before, but also because documentation for MediaElement.js in regards to WP was pretty much non-existent. Unfortunately this is still the case, but I did a search and found this new and super helpful post, with a new stylesheet included. I didn't want that particular style, but I used it as reference and experimented with other colors and dimensions, trying to make it somewhat like my own one, and you can see the result above.

I'm pretty happy with the result! Thoughts?

It's a bit buffer now. A bit thicker, and simpler (no gradients... yet), but I was happy to see the loading pattern was a part of the original player, so that part didn't need redoing. Further mods may happen when time allows, but for now: the player's no longer broken! Hurrah.

If you want to make your own modification the link above's a fantastic reference. Super easy to understand, use, and modify. Not all elements are included in the stylesheet, but you can copy in any additional ones from the official one (just check your page source on a player page - there should be a link to the official stylesheet there).

And if you don't: this is all you really need. The barebones; essentials. Much easier than the one I used before.

Hopefully it'll work longer than the last one, too.

Most preferably forever.

Making Images UNresponsive

How do you do it? I can't figure it out. The image in this post just won't stop stretching no matter what I try, and Google gives little help on the topic. Seems people all want responsive images, even if that means upscaling images that are smaller to sizes they shouldn't be. I mean seriously, would you rather see an image like this...

...or like this?

Those spots above would be the places I add in those example images, but since suddenly all images on the blog are responsive I can't even give you an example of how different they'd look. They'd both be just as ugly and blurred as the one in this post.

So what's causing this:

Is it the browser? It shouldn't be. Not unless both FireFox and Chrome made a simultaneous update that causes the same issue. Up till now this hasn't been a problem, and... no, it's showing the same way in Vivaldi too.

I shouldn't need to try more alternatives, but I did. That didn't work either.

Is it my lightbox plugin? No. I tried disabling it, and modifying the settings, and checking to see all traces of it were really gone. That wasn't it.

Is it the WordPress function they added in with 4.4 that automatically makes all images on the blog responsive unless you tell it otherwise? No. Not unless this plugin isn't working. And it should: it's been tested on the latest version. I actually just switched from this other plugin since I assumed that's the one that'd stopped working. But that wasn't it.

Is it just this one post? Nope. It's affecting all others too. All images smaller than the post area are scaled up to match the content area width.

Is it my CSS? It shouldn't be. I went through it to check, and I can't find anything there that should cause anything like this - though if you know code feel free to give it a look too. I tried adding in bits and pieces to combat this issue, but couldn't find anything that worked. The 'initial' value did not work, and though I'm not sure it would have worked I couldn't specify precise image dimensions either, since image sizes often differ between posts - even for smaller versions.

Adding a CSS style to override any potential others directly via the post didn't work either. I fiddled around the with the HTML values for size there too, but no game.

What else could it be? The image just won't stay the right size no matter what. I give up. I'm leaving this here in case someone has any ideas on how to fix this! And if I do (or anyone else lets me know - I'll give credit where due): there will be a follow-up. I hope there will be a follow-up...

...because this is just ridiculous.

The Missing P Tag

I updated this post recently with... an update. If it's a typo or other minor thing I usually don't mention this, but for notable updates I have an update shortcode I usually use. It shows up like so:

UPD: This is an important update!!!

...usually at the bottom of the updated post in question.

This time, however, the shortcode didn't work. The tags appeared as plain text and everything was appended the impending block of text like an ugly tumor.

I checked the spelling. I copied in the tags from another post where it did work. I pondered if maybe I'd added in a filter that prevented shortcodes from running in the front page specifically... but what was strange was that the prepended line break wasn't showing either.

I deleted the shortcode and tried updating the post with just the text. The line break was still missing.

I copied and pasted via Notepad - to get rid of any potentially erroneous formatting. I added multiple line breaks. I added in new paragraphs. I eventually checked the source code to see if there was something I just couldn't see via the text editor... and it was missing a <p> tag.

For some reason no matter how many line breaks I added after the final line it just wouldn't break, shortcode or no. The p tag (that is otherwise inserted automatically each time you break a line in the WP text editor) just was not there.

Why? I have no idea. I Googled: no result. I finally added in extra </p> and <p> tags where the break was supposed to occur and... that works. For now. If in the future that post starts looking weird again, maybe the missing p tags have finally returned.

A Little Random Title Script

I made a little random title script for the movie review pages with more than one review. A little impulsive thing... that took 40 minutes to figure out. Ugh. Here's how it turned out though, in two parts. It's in JS.

First there's the header, that either shows a random title from a specific list, or if the user has JS disabled, a standard one:

<h1><script src="/theme/js/more-reviews.js" type="text/javascript"></script><noscript>More Reviews!</noscript></h1>

Then there's the script with the aforementioned list, and code to cycle through the titles randomly, above refereed to as more-reviews.js:

var r_text = new Array ();
r_text[0] = "More Reviews!";
r_text[1] = "Added Addages!";
r_text[2] = "Ongoing Opinions!";
r_text[3] = "Latter Ramblings!";
r_text[4] = "Future Views!";
r_text[5] = "Later Watches!";

var i = Math.floor(7*Math.random());

if (navigator.appName == "Netscape")
   {
   document.write(r_text[i]);
   }
else
   {
   document.write(r_text[i]);
   }

That's it! Depending on your number of titles you might need to change the formula below the list too. I tried using a solution that didn't rely on numbers at all first, but just couldn't get it working, so this is it.

This is what it looks like in action (reload page to see more):

It's such a simple thing, but I dug through such a huge mess of other methods before finding one that for some reason actually worked, that I felt like I needed to post about it. It's not all that strange this one did, but it's strange the others didn't. I still have no idea why. Something with the way H1 tags work? Something about including a JS script in a header? If you have any knowledge about such limitations I'd be intrigued to hear.

So, stranger who stumbled upon this post, if you're wise then feel free to send me a message, and if you're in the same situation - searching for a solution to the same problem, hopefully this will find you faster than it found me! And hopefully it'll work for you, too. It's just a little random random title script, but it sure took a big effort to get right.

The Anatomy Of XLSX Files

I work with webshops, and as such I work with .XLSX files a lot, and convert these to .CSV prior to import/export. It's the OS-independent format. The big standard. Also: the much bigger file! A 821KB XLSX is 87MB large as a CSV!! Considering the difference - even though they supposedly contain the same data, I thought I'd dig into the file format a bit, using this particular file as my example, and see how it really works and what they really contain.

I used to think XLSX files used some smart algorithms or formulas to effectivise the way they store data, like finding similar instances and grouping them together as one entity, or skipping delimiter symbols altogether, and instead using spaces or line breaks (which I assume take less space), but as it turns out it's nothing like that. They just use heavy compression, and if you change the filename you can see exactly what they contain - which is not just the worksheet itself (apparently only 8MB big, though, in XML format), but a lot of other resources, and even the image file for the script icon! Some very unnecessary things, I feel, but the file size does decrease drastically with compression.

Looking at the files, the worksheet I'm currently working with (it's a workbook with only one worksheet) contains these:

Read on...

Customizing WordPress MediaElement.js Audio Shortcode

I just spent something like 4 hours changing the default...

Original

...to this...

New!

...using this base stylesheet (don't miss pull requests #1 and #2 if you do the same), fetching certain snippets of code (all those related to color/background) from this custom skin made before WP had native ME support, cutting out an alignment bug in the vertical volume slider thing by changing the top:-21 to top:-11 somewhere in the code (you'll figure it out), and a few site-suitable margin and alignment adjustments later... it's not looking all that bad!

The documentation for MediaElement.js in regards to WP seems to be pretty much non-existent, and it took me quite a bit of research to finally figure out how to even change the width on these new shortcodes - much less do anything wild like adding rounded borders and different colors. This mostly because all styles and scripts related to ME are hidden within wp-includes, there's no official documentation, and the original code (at least the stylesheet) isn't at all structured with modding in mind.

I found a few pages advertising workarounds such as very specific CSS rules or using !important to override certain rules, but the best option is clearly to first dequeue the 'official' core-included MediaElement stylesheet (via your theme's functions.php), copy this stylesheet to your theme folder where it can be modified, and then include this CSS again either via a link in functions.php, via @import, or directly into your main .css file. I'm assuming one of the latter two options would cut down on requests while loading site resources... personally I settled for @import. The only caveat with this technique is that any updates to the core file, you'll have to make manually.

How to dequeue the official stylesheet is mentioned in the Read Me! for that basic stylesheet, and you can use the same method for any other parts of the ME library, like the JS files. There's some useful info on such files here, along with info on custom event handlers, etc.

Also, if you want playlists with download links, see this. And if you want playlists in the first place, there's this plugin. Hopefully this post will serve as useful reference for others than myself! You can see a live version of the custom player here.

Privacy   Copyright   Sitemap   Statistics   RSS Feed   Valid XHTML   Valid CSS   Standards

© CyberD.org 2018
Keeping the world since 2004.