Thread

Hey everybody,

Im developing a DJ’s website and their mixes/albums page is displayed in multiple rows with 4 columns: 4 albums on each row with a tracklist that display toggles under each row
(see attached reference image)

so each row (top - album art & bottom - tracklist) are inside their each channel entries tag, pulling the same content from the most recent 4 entries.

my problem is how do i loop the 2 sets of channel entries tags to repeat in multiples of 4: 1 to 4, 5 to 8, 9 to 12 and so on

my original code:

<div class="row mixrows"><!-- TOP ROW -->

{exp:channel:entries channel="mixtapes" limit="4"}

     <div class="span_1 col">
         {mixtape_album_art}
        <div class="mixgrid">
         <a href="http://toggle"><span class="mixtitle">{title}</span> </a><i class="fa jp-play mixright"></i>
        </div>
     </div>
{/exp:channel:entries}
  </div><!-- END OF TOP ROW -->


{exp:channel:entries channel="mixtapes" limit="4"}

<div class="mixdropdown" id="newboxes{count}"><!-- BOTTOM ROW -->
   <div class="row span_4 col">

    {embed="includes/music_player"}

<div class="row span_4 colnopadding">
 <ol class="songlist">
  {mixtape_tracklist}
  <li><span class="list-song">{mixtape_tracklist:mixtape_song}</span><span class="list-artist">{mixtape_tracklist:mixtape_artist}</span></li>
  {/mixtape_tracklist}
 </ol>
</div><!-- row -->

   </div><!-- row -->
 </div><!-- END OF BOTTOM ROW -->
{/exp:channel:entries}

I’ve tried using a third-party loop tag, looping the offset with increments of 4, but that didn’t work at all, i think because im looping the a value inside the original channel entries tag

ATTEMPT WITH THIRD PARTY LOOPING:

{exp:for_loop start="0" increment="4"}

 <div class="row mixrows"><!-- TOP ROW -->

{exp:channel:entries channel="mixtapes" limit="4" offset="{index}"}

     <div class="span_1 col">
         {mixtape_album_art}
        <div class="mixgrid">
         <a href="http://toggle"><span class="mixtitle">{title}</span> </a><i class="fa jp-play mixright"></i>
        </div>
     </div>
{/exp:channel:entries}
  </div><!-- END OF TOP ROW -->


{exp:channel:entries channel="mixtapes" limit="4" offset="{index}"}

<div class="mixdropdown" id="newboxes{count}"><!-- BOTTOM ROW -->
   <div class="row span_4 col">

    {embed="includes/music_player"}

<div class="row span_4 colnopadding">
 <ol class="songlist">
  {mixtape_tracklist}
  <li><span class="list-song">{mixtape_tracklist:mixtape_song}</span><span class="list-artist">{mixtape_tracklist:mixtape_artist}</span></li>
  {/mixtape_tracklist}
 </ol>
</div><!-- row -->

   </div><!-- row -->
 </div><!-- END OF BOTTOM ROW -->
{/exp:channel:entries}

{/exp:for_loop}

Any help or alternatives would be greatly appreciated!

Another approach that I’ve tried is to use 1 single channel:entries tag and switch the opening/closing divs of the top row to produce the top row with 4 columns:

(TOP ROW with switch)

but now im trying to figure out how to add in the bottom row, but have it appear after the 4 columns/iterations of the top row but still be part of the single channel:entries tag loop, so that it pulls from the same 4 iterations of the channel:entries tag.

I thought about using an {if} statement using multiples of 4, but that only will produce 1 bottom row per 4 channel:entries tag loops, when i need there to be 4 albums in top row and 4 lists in bottom row (see previously attached)

bump, hopefully i can get some assistance on this one from someone out there… :D

This one is actually quite tricky as you’re amalgamating 3 sets of data
- the playlist entry
- the album
- the songs

Luckily the docs show something similar in the Sports league example - http://ellislab.com/expressionengine/user-guide/add-ons/channel/relationships.html#id20

What I’d do is set up 3 channels
- playlists
- albums
- songs

Songs channel fields
- title (eg Shine on you crazy diamond)
- mp3 file {cf_song_file}
..other relevant data fields

Albums channel fields
- title (eg Dark side of the Moon)
- album art {cf_album_art}
- multi select relationship field to select songs from the Songs channel {cf_album_songs}

Playlist channel fields
- title (eg Playlist #123)
- multi select relationship field to select albums from the Albums channel {cf_playlist_albums}

Add entries for your songs
Add entries for albums, remembering to assign songs to the album

Now when you publish a Playlist entry select the 4 albums you want to feature from your relationship field.

The code, not tested but should be nearly there…

{exp:channel:entries channel="playlists" limit="1"}
<div class="playlist">
<h1>{title}</h1>

    <h2>Albums</h2>
<p>    <div class="mixgrid"><br />
        <ul class="teams"><br />
        <!-- output album covers --><br />
        {cf_playlist_albums}<br />
        <li>{teams:cf_album_art}</li><br />
        {/cf_playlist_albums}<br />
        </ul><br />
    </div></p>

<p>    </p><h2>Songs</h2>
<p>    <!-- start the albums loop again to get songs  --><br />
    {cf_playlist_albums}<br />
    <div class="mixdropdown" id="newboxes{cf_playlist_albums:count}"><br />
    <ol class="songlist"><br />
        <!-- get song titles --><br />
        {cf_playlist_albums:cf_album_songs}<br />
            <li>{cf_playlist_albums:cf_album_songs:title}</li><br />
         {/cf_playlist_albums:cf_album_songs}<br />
    </ol><br />
    </div><br />
     {/cf_playlist_albums}</p>

<p></div><br />
{/exp:channel:entries}

Hi Rob,

thanks so much for your reply/attempt!

I don’t think i explained my problem clear enough, my bad

so the DJ has ‘albums’ but which are just single songs that has a tracklist for each song, may be easier to just think of them as single songs with cover art and written tracklist

so in EE the user will input the cover art/mp3/and tracklist (in a grid) for each post, these are all in the same channel

What i need to have is the songs be displayed in a row of 4 (for desktop, 2 for tablet and 1 for mobile, but that’s for later) and have the tracklist display toggle underneath each row of 4

so to reference the attached image, when you click on album art #1, the tracklist #1 displays (undernearth albums #1-#4) and when you click on album #5, tracklist #1 hides and the #5 tracklist shows underneath the row with albums #5-#8)

So far I’ve had to loop
- the first row of 4 albums
- set of 4 tracklists underneath
- second row of 4 albums (offset by 4 and manually change my switches:
- set of 4 tracklists underneath
each in their own channel entries tag

website for reference:
http://www.djdivsa.com/mixtapestest/test#

code for reference:

Since my problem is not as complex as having single tracks and multiple albums, maybe there is an easier way to solve this, but can’t seem to figure it out…

Ah ok, so the tracklist is just a list, but with a single audio file that plays all songs from the album?

In that case I think you’re overcomplicating your HTML structure 😉

What I’d do then in that case is output each album + songlist as separate entries instead of trying to run multiple loops, then use CSS to style/position things. So…

By doing it this way each album+playlist keeps it’s logical and semantic structure, eg

Album
Playlist
Album
Playlist
Album
Playlist
...

That then makes it relatively easy to use some media queries to display albums in 4/row, 2/row or a single column, you could in theory do 8 per row if you felt inclined!

The trick then is in some clever CSS!

Oooo, this is looking super promising Rob…! Im glad you could truly understand my problem and thanks for your help~

if it’s outputted by
Album
Playlist
Album
Playlist

how would css be able to have the set of 4 playlists clear the 4 albums above ?

(the playlists 1-4 underneath the 1-4albums..and same with 5-8, 9-12 etc etc)

is it a matter of playing with absolute and relative positioning?

this could be a super life saver instead of having to offset everything each time (silly me)

ps.
Also, im hoping that this solution will enable me to keep the “newboxselect#” and “newboxes#” in a simple {count} so i won’t have to use a switch, they need to be numbered by the amount of submitted post

i just used switch 1|2|3|4 and 5|6|7|8 because of the loops i was using, but keeping them in a simple {count} would be ideal

Quick note you can use {entry_id} for newboxselect and newboxes I’d to give you unique ID’s for each album!

Ok so for the album art

CSS

/* basic x4 grid tinker to suit */
.col { float: left; width: 22%; height: 300px; margin-right: 4%;  }
.col1 { clear: left; }
.col4 { margin-right: 0; }

For the playlist

Rough CSS assuming div mixdropdown is hidden on page load…

position: absolute; 
top: 320px; /* height of album art */
clear: left; 
width: 100%;
overflow: hidden;

...something like that! You may need to add an extra album container and add CSS position:relative to get position absolute to play nice. Haven’t really got time to actually test this but hope it points you in the right direction 😊

Nice!

It’s working well, just the albums #1-3 are getting pushed down when each of their tracklists are displayed

http://www.djdivsa.com/mixtapestest/test

I tried using absolute and relative positioning, with no luck, I had this same problem when i was first coding this site. This is why i tried the double loops

Is there another way this can be solved?

How about using a lightbox for the playlist and audio player?

Will a lightbox help the shuffling issue im having?

or will it showcase the tracklist in a fixed position? (ie. bottom of page)

because my client wants each of the tracklists underneath their respective albums

but perhaps i can convince him that the lightbox is the way to go

Well a traditional lightbox will overlay on top of the content and bring it into focus rather than forcing the visitor to scroll down, though you may be able to show the lightbox below the album data - am thinking of something like http://jquerytools.org/demos/overlay/index.html - that would solve the problem of shuffling…

This may be the best solution at the moment, instead of trying to get the elements to shuffle

I will test and update you with my progress

Thanks again Rob!

Ps. hopefully the lightbox query won’t interfere with the jplayer jquery…but we’ll see! :D

Quick proof of concept - http://www.bluedev.co.uk/albums.html - I’ll leave it up for a while, feel free to save the html somewhere

Basically wherever you are in the albums list it will always show the playlist under the selected album,