cubecolour

The plugin was originally created for <a href="https://davedrapercreations.co.uk/" title="Dave Draper" rel="nofollow ugc">Dave Draper’s</a> website where it is used on the music pages. For an example, please see the page for the <a href="http://davedrapercreations.co.uk/music/the-wild-bunch/" title="The Wild Bunch" rel="nofollow ugc">Wild Bunch album</a> featuring Dave on vocals and bass.
Audio Album uses the default audio capabilities of mediaelement.js included with core WordPress files and enables you to style a group of audio files (MP3 etc) as single block formatted as an album. The colours can be customized in the Audio Album section of the WordPress customizer.
You can display as many Audio Albums as you need on your site, with multiple albums on each page.
<h4>Usage:</h4>
There are two shortcodes that can be used <code>[audioalbum]</code> and <code>[audiotrack]</code>
<pre><code>[audioalbum]
</code></pre>
This shortcode is required and can be used as a header before the <code>[audiotrack]</code> shortcodes.
<ul>
<li>title</li>
<li>detail</li>
<li>
date
[audiotrack] 
This acts as a wrapper to the WordPress [audio] shortcode so uses the same parameters as the [audio] shortcode, plus the following which are specific to this plugin:
</li>
<li>
title
</li>
<li>width</li>
<li>height</li>
<li>songwriter</li>
<li>buttontext</li>
<li>buttonlink</li>
</ul>
The following attributes can also be used in the <code>[audiotrack]</code> shortcode in the same way in which they are used in the default WordPress [audio] shortcode:
<ul>
<li>src</li>
<li>mp3</li>
<li>ogg</li>
<li>wma</li>
<li>m4a</li>
<li>wav</li>
<li>loop</li>
<li>autoplay</li>
<li>preload</li>
</ul>
<h4>Example</h4>
<pre><code>[audioalbum title="The Album Title" detail="Some other Details" date="2022"]

[audiotrack title="Song One" songwriter="credit" mp3="http://domain.com/wp-content/uploads/audiofile1.mp3"]

[audiotrack title="Song Two" songwriter="credit" mp3="http://domain.com/wp-content/uploads/audiofile2.mp3"]
</code></pre>
<h4>Lyrics / other info in a popup window</h4>
There are some additional parameters which can be added to the [audioalbum] shortcode to optionally add a button to allow a visitor to open a link on each audio track to open a page in your site within a popup window.
You need to first create the page, post, or custom post type post and make a note of the post/page id.
There are four parameter/value pairs which can be added to the [audiotrack] shortcode to make a popup link
<ul>
<li>buttonlink</li>
<li>buttontext</li>
<li>width</li>
<li>height</li>
</ul>
Enter the page/post id of the target page as the value for the buttonlink parameter. A button will only be shown when a value is set for the buttonlink parameter.
The buttontext attribute is optional, if no value is specified, the default label of ‘lyrics’ will be shown on the button.
The dimensions of the popup window can also be specified using optional width and height attributes. If no values are given, default values of 520px (width) and 400px (height) will be used.
If your site is using a Genesis child theme, as a little bonus, a landing-page template without a masthead, menus, sidebars or other distractions will be applied to the popup page.
<h4>Example with default ‘lyrics’ button</h4>
<pre><code>[audiotrack title="Song One" songwriter="credit" mp3="http://domain.com/wp-content/uploads/audiofile1.mp3" buttonlink="808"]
</code></pre>
<h4>Example with custom button and custom popup window dimensions</h4>
<pre><code>[audiotrack title="Song Two" songwriter="credit" mp3="http://domain.com/wp-content/uploads/audiofile2.mp3" buttonlink="909" buttontext="linklabel" width="300" height="500"]
</code></pre>
The parameters used with the standard native WordPress audio shortcode outlined in the codex: <a href="https://codex.wordpress.org/Audio_Shortcode" title="Audio Shortcode" rel="nofollow ugc">Audio Shortcode</a> page can also be used in the <code>[audiotrack]</code> shortcode.

Audio Album

Terrific Plugin. Easy to style, fork, etc.

Sent donation a few moments ago.

Terrific Plugin

5-star plugin

Displays a collection of audio tracks as an audio album using the native WordPress audio features. Includes a customizer section.

Pratik Jain

Anoop Ranawat

WP OnlineSupport

Ketan Patel

Essential Plugin

Piyush Patel

Riddhi Shukla

✅ Now that you have your website ready then why don’t you download and try out this Album grid/slider to give it better functionality.
By downloading our WordPress Album and Image Gallery plus Lightbox on your website, you are in a way giving a very professional touch to it.
<a href="https://demo.essentialplugin.com/album-and-image-gallery-plus-lightbox-demo/?utm_source=WP&utm_medium=Album-Gallery&utm_campaign=Read-Me" rel="nofollow ugc">FREE DEMO</a> | <a href="https://demo.essentialplugin.com/prodemo/album-and-image-gallery-plus-lightbox-pro/?utm_source=WP&utm_medium=Album-Gallery&utm_campaign=Read-Me" rel="nofollow ugc">PRO DEMO</a>
Your customer might like the professional and fancy vibe of your site with Album sliders
✅ This plugin display your album using :
<ul>
<li>Image Gallery, </li>
<li>Image Album</li>
</ul>
Download Now it today and explore all the features.
<h4>✅ Features :</h4>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/sUwCefECla8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
When you want to makeover your WordPress website theme with something extraordinary and creative, you must consider the album grid/slider plugin.
Display Album and Image Gallery on the fronted side of your website in a Grid, Slider OR carousel view with the help of shortcode. With the help of the gallery plugin, you can add multiple images for an attractive look to your website. A quite simple yet spontaneous plugin feature that helps with wonders for your web space..
Gallery Plugin enables you to create several media such as image gallery, photo albums, portfolio and also simple picture to an image slider or image lightbox and image carousel.
The plugin work with shortcode so you can easily display album show anywhere on your site.
Also added Gutenberg block support.
<h4>✅ Here is the plugin shortcode example</h4>
Album Grid
<pre><code>[aigpl-gallery-album]
</code></pre>
Album Slider
<pre><code>[aigpl-gallery-album-slider]
</code></pre>
Gallery Grid
<pre><code>[aigpl-gallery]
</code></pre>
Gallery Slider
<pre><code>[aigpl-gallery-slider]
</code></pre>
To display only album 5 post: 
 [aigpl-gallery-album limit=”5″] 
Where limit define the number of posts to display.
If you want to display Album by category then use this short code:
<pre><code>[aigpl-gallery-album category="category_ID"]
</code></pre>
<h4>✅ Here is Template code</h4>
<pre><code><?php echo do_shortcode('[aigpl-gallery-album]'); ?> 
<?php echo do_shortcode('[aigpl-gallery-album-slider]'); ?> 
<?php echo do_shortcode('[aigpl-gallery]'); ?> 
<?php echo do_shortcode('[aigpl-gallery-slider]'); ?> 
</code></pre>
<h4>✅ Use Following Gallery parameters with shortcode</h4>
<pre><code>[aigpl-gallery]
</code></pre>
<ul>
<li>ID: [aigpl-gallery id=”5″] (Gallery id for which you want to display images.)</li>
<li>Grid: [aigpl-gallery grid=”1″] (Number of columns for image gallery. Values are 1 to 12)</li>
<li>Link Behaviour: [aigpl-gallery link_target=”self”] (Choose link behaviour. Values are “self” OR “blank”)</li>
<li>Gallery Height: [aigpl-gallery gallery_height=”400″] (Control height of the image. You can enter any numeric number. You can set “auto” for auto height.)</li>
<li>Display Title: [aigpl-gallery show_title=”true”] (Display image title or not. Values are “true” OR “false”)</li>
<li>Display Description: [aigpl-gallery show_description=”true”] (Display image description. Values are “true” OR “false”)</li>
<li>Display Caption: [aigpl-gallery show_caption=”true”] (Display image caption. Values are “true” OR “false”)</li>
<li>Image Size: [aigpl-gallery image_size=”full”] (Choose appropriate image size from the WordPress. Values are “full”, “medium”, “large” OR “thumbnail”.)</li>
<li>Popup: [aigpl-gallery popup=”true”] (Display gallery image in a popup. Values are “true” OR “false”)</li>
</ul>
<h4>✅ Use Following Gallery Slider parameters with shortcode</h4>
<pre><code>[aigpl-gallery-slider]
</code></pre>
<ul>
<li>ID: [aigpl-gallery-slider id=”5″] (Gallery id for which you want to display images.)</li>
<li>Link Behaviour: [aigpl-gallery-slider link_target=”self”] (Choose link behaviour. Values are “self” OR “blank”)</li>
<li>Gallery Height: [aigpl-gallery-slider gallery_height=”400″] (Control height of the image. You can enter any numeric number. You can set “auto” for auto height.)</li>
<li>Display Title: [aigpl-gallery-slider show_title=”true”] (Display image title or not. Values are “true” OR “false”)</li>
<li>Display Description: [aigpl-gallery-slider show_description=”true”] (Display image description. Values are “true” OR “false”)</li>
<li>Display Caption: [aigpl-gallery-slider show_caption=”true”] (Display image caption. Values are “true” OR “false”)</li>
<li>Image Size: [aigpl-gallery-slider image_size=”full”] (Choose appropriate image size from the WordPress. Values are “full”, “medium”, “large” OR “thumbnail”.)</li>
<li>Popup: [aigpl-gallery-slider popup=”true”] (Display gallery image in a popup. Values are “true” OR “false”)</li>
<li>Slider Columns: [aigpl-gallery-slider slidestoshow=”2″] (Display number of images at a time in slider.)</li>
<li>Slides to Scroll: [aigpl-gallery-slider slidestoscroll=”2″] (Scroll number of images at a time.)</li>
<li>Slider Pagination and Arrows: [aigpl-gallery-slider dots=”false” arrows=”false”]</li>
<li>Autoplay: [aigpl-gallery-slider autoplay=”true”] (Start slider automatically. Values are “true” OR “false”.)</li>
<li>Autoplay Interval: [aigpl-gallery-slider autoplay_interval=”3000″] (Delay between two slides.)</li>
<li>Slider Speed: [aigpl-gallery-slider speed=”3000″] (Control speed of slider.)</li>
<li>Loop: [aigpl-gallery-slider loop=”true”] (Infinite Loop.)</li>
<li>lazyload : [aigpl-gallery-slider lazyload=”ondemand”] (Add lazy load to the images. By defaults there is no lazy load. Two options can be passed. ‘ondemand’, ‘progressive’)</li>
</ul>
<h4>✅ Use Following Gallery Album parameters with shortcode</h4>
<pre><code>[aigpl-gallery-album]
</code></pre>
<ul>
<li>Limit: [aigpl-gallery-album limit=”5″] (Gallery id for which you want to display images.)</li>
<li>Album Grid: [aigpl-gallery-album album_grid=”3″] (Number of columns for image album. Values are 1 to 12.)</li>
<li>Link Behaviour: [aigpl-gallery-album album_link_target=”self”] (Choose link behaviour whether to open in a new tab or not. Values are “self” OR “blank”)</li>
<li>Album Height: [aigpl-gallery-album album_height=”400″] (Control height of the album. You can enter any numeric number.)</li>
<li>Album Title: [aigpl-gallery-album album_title=”true”] (Display album title. Values are “true” or “false”.)</li>
<li>Album Description: [aigpl-gallery-album album_description=”true”] (Display album description. Values are “true” or “false”.)</li>
<li>Album Full Content: [aigpl-gallery-album album_full_content=”true”] (Display album full description. Values are “true” or “false”.)</li>
<li>Words Limit: [aigpl-gallery-album words_limit=”40″] (Display number of words for album description.)</li>
<li>Content Tail (Continue Reading): [aigpl-gallery-album content_tail=”…”] (Display three dots as a continuous reading.)</li>
<li>Display Specific Album: [aigpl-gallery-album id=”5,10″] (Display specific album.)</li>
<li>Display By Category: [aigpl-gallery-album category=”category_id”] (Display album by their category ID.)</li>
<li>Total Photo Label: [aigpl-gallery-album total_photo=”{total} Photos”] (Control photo count label. “{total}” will replace the number of album photos.)</li>
<li>Popup: [aigpl-gallery-album popup=”true”] (Display gallery image in a popup. Values are “true” OR “false”)</li>
<li>Grid: [aigpl-gallery-album grid=”1″] (Number of columns for image gallery. Values are 1 to 12)</li>
<li>Gallery Height: [aigpl-gallery-album gallery_height=”400″] (Control height of the image. You can enter any numeric number. You can set “auto” for auto height.)</li>
<li>Display Caption: [aigpl-gallery-album show_caption=”true”] (Display image caption. Values are “true” OR “false”)</li>
<li>Link Behaviour: [aigpl-gallery-album link_target=”self”] (Choose link behaviour. Values are “self” OR “blank”)</li>
<li>Display Title: [aigpl-gallery-album show_title=”true”] (Display image title or not. Values are “true” OR “false”)</li>
<li>Display Description: [aigpl-gallery-album show_description=”true”] (Display image description. Values are “true” OR “false”)</li>
<li>Popup: [aigpl-gallery-album popup=”true”] (Display gallery image in a popup. Values are “true” OR “false”)</li>
<li>Image Size: [aigpl-gallery-album image_size=”full”] (Choose appropriate image size from the WordPress. Values are “full”, “medium”, “large” OR “thumbnail”.)</li>
</ul>
<h4>✅ Use Following Gallery Album Slider parameters with shortcode</h4>
<pre><code>[aigpl-gallery-album-slider]
</code></pre>
<ul>
<li>Limit: [aigpl-gallery-album-slider limit=”5″] (Gallery id for which you want to display images.)</li>
<li>Link Behaviour: [aigpl-gallery-album-slider album_link_target=”self”] (Choose link behaviour whether to open in a new tab or not. Values are “self” OR “blank”)</li>
<li>Album Height: [aigpl-gallery-album-slider album_height=”400″] (Control height of the album. You can enter any numeric number.)</li>
<li>Album Title: [aigpl-gallery-album-slider album_title=”true”] (Display album title. Values are “true” or “false”.)</li>
<li>Album Description: [aigpl-gallery-album-slider album_description=”true”] (Display album description. Values are “true” or “false”.)</li>
<li>Album Full Content: [aigpl-gallery-album-slider album_full_content=”true”] (Display album full description. Values are “true” or “false”.)</li>
<li>Words Limit: [aigpl-gallery-album-slider words_limit=”40″] (Display number of words for album description.)</li>
<li>Content Tail (Continue Reading): [aigpl-gallery-album-slider content_tail=”…”] (Display three dots as a continuous reading.)</li>
<li>Display Specific Album: [aigpl-gallery-album-slider id=”5,10″] (Display specific album.)</li>
<li>Display By Category: [aigpl-gallery-album-slider category=”category_id”] (Display album by their category ID.)</li>
<li>Total Photo Label: [aigpl-gallery-album-slider total_photo=”{total} Photos”] (Control photo count label. “{total}” will replace the number of album photos.)</li>
<li>Popup: [aigpl-gallery-album-slider popup=”true”] (Display gallery image in a popup. Values are “true” OR “false”)</li>
<li>Grid: [aigpl-gallery-album-slider grid=”1″] (Number of columns for image gallery. Values are 1 to 12)</li>
<li>Gallery Height: [aigpl-gallery-album-slider gallery_height=”400″] (Control height of the image. You can enter any numeric number. You can set “auto” for auto height.)</li>
<li>Display Caption: [aigpl-gallery-album-slider show_caption=”true”] (Display image caption. Values are “true” OR “false”)</li>
<li>Link Behaviour: [aigpl-gallery-album-slider link_target=”self”] (Choose link behaviour. Values are “self” OR “blank”)</li>
<li>Display Title: [aigpl-gallery-album-slider show_title=”true”] (Display image title or not. Values are “true” OR “false”)</li>
<li>Display Description: [aigpl-gallery-album-slider show_description=”true”] (Display image description. Values are “true” OR “false”)</li>
<li>Popup: [aigpl-gallery-album-slider popup=”true”] (Display gallery image in a popup. Values are “true” OR “false”)</li>
<li>Image Size: [aigpl-gallery-album-slider image_size=”full”] (Choose appropriate image size from the WordPress. Values are “full”, “medium”, “large” OR “thumbnail”.)</li>
<li>Slider Columns: [aigpl-gallery-album-slider album_slidestoshow=”2″] (Display number of images at a time in slider.)</li>
<li>Slides to Scroll: [aigpl-gallery-album-slider album_slidestoscroll=”2″] (Scroll number of images at a time.)</li>
<li>Slider Pagination and Arrows: [aigpl-gallery-album-slider album_dots=”false” album_arrows=”false”]</li>
<li>Autoplay: [aigpl-gallery-album-slider album_autoplay=”true”] (Start slider automatically. Values are “true” OR “false”.)</li>
<li>Autoplay Interval: [aigpl-gallery-album-slider album_autoplay_interval=”3000″] (Delay between two slides.)</li>
<li>Slider Speed: [aigpl-gallery-album-slider album_speed=”3000″] (Control speed of slider.)</li>
<li>Loop: [aigpl-gallery-album-slider loop=”true”] (Infinite Loop.)</li>
<li>lazyload : [aigpl-gallery-slider lazyload=”ondemand”] (Add lazy load to the images. By defaults there is no lazy load. Two options can be passed. ‘ondemand’, ‘progressive’)</li>
</ul>
✅ Checkout demo for better understanding
<a href="https://demo.essentialplugin.com/album-and-image-gallery-plus-lightbox-demo/?utm_source=WP&utm_medium=Album-Gallery&utm_campaign=Read-Me" rel="nofollow ugc">FREE DEMO</a> | <a href="https://demo.essentialplugin.com/prodemo/album-and-image-gallery-plus-lightbox-pro/?utm_source=WP&utm_medium=Album-Gallery&utm_campaign=Read-Me" rel="nofollow ugc">PRO DEMO</a>
✅ Essential Plugin Bundle Deal
<a href="https://www.essentialplugin.com/pricing/?utm_source=WP&utm_medium=Album-Gallery&utm_campaign=Read-Me" rel="nofollow ugc">Annual or Lifetime Bundle Deal</a>
<h4>✅ Features include:</h4>
<ul>
<li>Added Gutenberg support</li>
<li>Gallery Grid</li>
<li>Gallery Slider</li>
<li>Image Album Grid</li>
<li>Image Album Slider</li>
<li>Category wise album</li>
<li>Also work with Gutenberg shortcode block.</li>
<li>Elementor, SiteOrigin and Beaver Page Builder native support.</li>
<li>Easy Drag & Drop image feature</li>
<li>Strong shortcode parameters</li>
<li>Slider RTL support</li>
<li>Fully responsive</li>
<li>100% Multi language</li>
</ul>
<h4>How to install :</h4>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/tv5vymtalS4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h4>Privacy & Policy</h4>
<ul>
<li>We have also opt-in e-mail selection , once you download the plugin , so that we can inform you and nurture you about products and its features.</li>
</ul>

Album and Image Gallery plus Lightbox

A quick, easy way to display responsive image gallery and image album in a grid or slider with light box. Also work with Gutenberg shortcode block.

Audio Album vs Album and Image Gallery plus Lightbox