Adding a download button to the playlist items

Hi Robert,

Thank you for the suggestion. We will add it to our dev list and see if it can be done.

-Mike Dell
Blubrry Support

Hi Mike,

Thank you for looking into it.

Robert

Hello Robert,

Are you talking about the playlist when you use the [powerpress_playlist] shortcode?

Thanks,
Angelo

Hello Angelo,

Yes, absolutely !

Robert

Hey Robert,

Good! Mike added this to the feature TODO list but you could also add and style what you want to happen to your theme’s functions.php file.

You may be able to add such behavior to your theme if you are knowledgable about HTML/CSS, that playlist is actually the built-in WordPress play list, PowerPress simply adds an HTmL in <script> tags in the footer for the WordPress native playlist to use. You could override it and style it how you like. Your theme could add code to your fucntions.php, something like…

add_action( 'powerpress_playlist_scripts', 'themename_powerpress_playlist_scripts' );
function themename_powerpress_playlist_scripts($type ) {
   remove_action( 'wp_footer', 'powerpress_underscore_playlist_templates', 0 );
   add_action( 'wp_footer', 'themename_underscore_playlist_templates', 0 );
}
function themename_underscore_playlist_templates() { ?>
   // Copy then modify what is found in powerpress_underscore_playlist_templates() in powerpress-playlist.php
<?php }

The “data.src” variable found in the templates script sections should be the media URL.

What ever HTML you add, you will need to style it. You could simply add an <a> tag and use the special character ? “\u21E9” underlined to indicate a download button.

Thanks,
Angelo

Hey Angelo,

I am a little knowledgeable now about HTML/CSS, I might be able to implement what you suggest – I will try in the next days.

Thanks !
Robert

Hey Robert,

Don’t forget to make a backup of any files before you change them. The CSS changes may be rather complicated as you want to leave the existing CSS in place as well as add some CSS to style your new download link. I would take this in stages, simply make you new function and add a word somewhere in the title area that way when you implement it, you can see that your version of the HTML is being used for the playlist. Once you are that far then you can introduce the actual download link tag you want to add then it is just a matter of getting the CSS to cooperate.

One other detail you may want to add a tag attribute download=”podcast”, this will allow most browsers (except Firefox) to prompt for a download save-as when you click the download link. Otherwise folks need to know to right click and select ‘save-as’, which for someone who does save downloads they should be aware of this in their browser.

Thanks,
angelo

Hey Angelo,

Thanks a lot for your suggestions for being careful ! I really appreciate that ! I also really appreciate your spirit, and using such good methods : obviously you have not been “dumbed down” !
I have grown to be careful too; I have duplicated my whole website into a staging website at my hosting company, so that I can experiment on the staging website without endangering my production site. As I am the only tech guy in our little team, I document a lot : I document PHP, CSS, and I write in a document the changes I make – if ever somebody would have to take over after me.

I am intrigued and interested by your suggestion of the tag download=”podcast” : I actually had the problem with the player on each post page where we add an mp3, the “Download” link “misbehaves” as you said, as the browsers take over and may not provide the expected download dialog; where they are hosted, the mp3s can be downloaded with an URL ending with ?dl=1 which triggers some code which forces the browser to provide the expected download dialog. So I found a plugin which changes the HTML code of a web page on the fly (they use the PHP output buffering, as far as I remember) and with this I add ?dl=1 at the end of the mp3’s URL : it is not pretty, but it works. I will test your tag very soon !

Maybe you could document your tag in your official documentation ? Or did I miss it ?

Robert

Hi Angelo,

I have been partially successful; first of all, I took example from this post before, when I was experimenting with WordPress genuine playlist :

audio – Adding a download link to native WordPress playlist – WordPress Development Stack Exchange
https://wordpress.stackexchange.com/questions/292585/adding-a-download-link-to-native-wordpress-playlist

I am adding the code in my functions.php in my staging site.

I must tell you that the hosting company where my mp3s are hosted provides a special query in order to force the download popup for any browser :

?dl=1

So, following the example in the above post, I added

Download &#x21e9

at the end of your script

<script type=”text/html” id=”tmpl-wp-playlist-item”>

after the
<div class=”wp-playlist-item”> … </div>

section; there the download starts, but the “Download” text for an item appears below the line separating the items, so it looks like it belongs to the item below : this is confusing – unfortunately I cannot post a snapshot : it looks like :

“Item title”
————————————————————–
Download
“Item title”
————————————————————–
Download

If I move this line INSIDE the
<div class=”wp-playlist-item”> … </div>

section, then the “Download” text is placed above the separation line, so there it is placed consistently, but clicking on it begins playing the mp3 and does not trigger the download.

Here my tiny skills stop. Could you help me fix this ?

Robert

I improved my situation : I kept your “\u21E9”, kept my download line outside the ”wp-playlist-item”, and added

.wppp-download {
margin-top: -22px;
padding-left:5px;
position: absolute;
}

This is working – but for people with poor eyesight, I am afraid that the special character is too small. The download icon from Font Awesome seems preferable, but I cannot figure out how to make this code work :

<i class=”fa fa-download” title=”Download” aria-hidden=”true”></i>

their icon is either above the item title or below, but never on the same line ?? I am using WordPress 5.3.2

`<a href=”{{ data.src }}” class=”wpse-download” download=””><i class=”fa fa-download” title=”Download” aria-hidden=”true”></i></a>

But this does not work when title lines are very long, as I have enabled the text wrapping, for our members to see the whole line ??

Hello Robert,

It looks like you are close. Can you send a link to the site where you are testing this, I could take a look and play with some CSS in the browsers’ inspector.

If its in a test environment, you can do some experimenting with the browsers’ inspector and try to use styling to get the link where you want it. First thought is to add a thick margin to the right of the styling for the line that shows the “Item title”, then the div or HTML tag where both the “item title” and “download” element are children, make sure it has the CSS property position: relative, then make the download element a position: absolute; top: 0; right: 0; style and put it where the extra margin was added to the item title. Sorry if that’s confusing, it is hard to explain CSS without CSS. The right value may need to be -20px or something too, been a while since I did absolute positioning. I live in a bootstrap CSS world now.

Thanks,
Angelo

Hi Angelo,

Here is the link to my test playlist :

https://wordpress-65751-1111518.cloudwaysapps.com/new-podcast-playlist/

This morning I was about to say : there is worse. But first things first :

in the previous css which I borrowed :

.wppp-download {
margin-top: -22px;
padding-left:5px;
position: absolute;
}

I figured it out : “margin-top: -22px;” : this is “cheating” : actually, the whole

<div class=”wp-playlist-item”>

element is CLICKABLE; but when you click on it, it is the main item which provides the target links; so if I add my download HTML code inside this element, clicking on the download button won’t work : this is why the guys from the post above added the download code OUTSIDE the item element, and then, through styling (-22px !), they bring graphically the download icon at the right place ABOVE : but this is a trick. And this does not work with my long lines, because it will be mixed up with the wrapped text on the second line of the item title.

Now, this morning, in the web inspector, I saw “something”, and tonight I have lost it : it was not in the “layout” tab : it was on top of another “pane”, I saw a couple of Javascript files, from mediaelement, with a “remove” button to remove them : removing them one at a time, I figured that making that whole “div” clickable was done in the second Javascript file; but then I was in a hurry, left quickly – and tonight I am not able to find this again.

So meanwhile, here is what I did :

I added this code OUTSIDE the wp-playlist-item :
<i class=”fa fa-download” title=”Download” aria-hidden=”true”></i>

then, I am removing the separation line between items :
.wp-playlist-item {
…
border-bottom-style: none !important;
}

and moving it below the download icon :
.wppp-download {
padding-left:5px;https://wordpress-65751-1111518.cloudwaysapps.com/new-podcast-playlist/
border-bottom: 1px solid #ccc;
display: block;
}

This is working – but I am not fully satisfied : I would like to have the download button on the same line as the item’s title. But for this, I must first find the disappeared place where I found those Javascript files mentioned.

Any comment ? Any hint ?

Robert

Sorry, I must get used to this input window :

“I added this code OUTSIDE the wp-playlist-item :”
<a href="{{ data.src }}?dl=1" class="wppp-download" download=""><i class="fa fa-download" title="Download" aria-hidden="true"></i></a>

and

and moving it below the download icon :
.wppp-download {
padding-left:5px;
border-bottom: 1px solid #ccc;
display: block;
}