SoundCloud Field

The SoundCloud custom field gives you the ability to display a SoundCloud Track at your frontend by filling out the Track ID of the SoundCloud Track.

How to add a SoundCloud Custom Field to Joomla! Articles

The SoundCloud field provides you all of the customization options of the player which will display the track at your frontend.

acf-soundcloud-field-settings

Let's see what each option does.

Name Description
Name The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title.
Label The label of the field to display.
Description A description of the field that will be displayed in the label tooltip.
Required Is this a mandatory field?
Player Width The Width of the Player
Player Height The Height of the Player

Pro Only

Name Description
Autoplay Whether you want the track to start playing when the player loads
Hide Related Whether you want to display related tracks within the player
Show Comments Whether you want to display the comments that have been made to that specific track
Show User Whether you want to display the name of the uploader inside the player
Show Reposts Whether you want to dislay how many times this track has been reposted
Use Visual Embed Whether you want to use the second alternative look and feel of the player
UI Color Choose which UI Color you would prefer for the player

Usage

Once you are in your Article's Edit screen, choose the "Fields" Tab to see the SoundCloud custom field as you can see in the screenshot below.

acf-SoundCloud-field-usage

In the SoundCloud section you can type in the Track ID or the Playlist ID of the SoundCloud track / playlist that you are interested in as well as select whether the ID concerns a Playlist instead of a track.

How to find the Track ID

In order to find the track ID we will need the embed code of the track we are interested in.

To get the embed code we need to navigate to that track on Soundcloud.com and click the Share button.

acf-soundcloud-embed-dialog

As you can see from the screenshot above, in the dialog that opens up after you click the Share button, you need to choose the "Embed" option and then copy and paste the embed code into a text editor so you can extract the Track ID like in the screenshot below.

acf-soundcloud-track-id

Frontend Display

Take a look at the screenshot below to see how it could be displayed in your frontend.

acf-soundcloud-frontend

Frequently Asked Questions

I have added a playlist ID but only the first SoundCloud track appears. How can I display the full playlist?

In order to display the full SoundCloud playlist, you need to increase the height of your SoundCloud Custom Field in order to give space for the tracks in the playlist to appear so your users can freely select which track to play. To do this, you need to go to your custom field > Height setting and increase it to fit your needs.

How can I override the layout of "ACF - SoundCloud" custom field?

To override the "ACF - SoundCloud" custom field, read here: How to override the "ACF - SoundCloud" custom field.
Last updated on Nov 26th 2024 12:11