Style an A-Z Asset Listing

(Hopkinsd1) #1

Hello,

 

I have an asset listing that list links. I have chosen the List format to be A-Z listing and have noticed that you are limited in terms of styling the output.

 

I would like to have the asset listing to output code similar to this. 

  <section class="dictionary-letter" id="letter-a">
<h1 class="dictionary-letter-title">A</h1>
<ul class="dictionary-terms">
  <li class="dictionary-term"><a href="#">item one</a></li>
  <li class="dictionary-term"><a href="#">item two</a></li>
</ul>
  </section>

  <section class="dictionary-letter" id="letter-b">
<h1 class="dictionary-letter-title">B</h1>
<ul class="dictionary-terms">
  <li class="dictionary-term"><a href="#">item one</a></li>
</ul>
  </section>

</article>

So I would like to be able to wrap each letter within a <section>.

 

Currently I can only get the HTML to look like this: 

  <section class="dictionary-letter" id="letter-a">
<h1 class="dictionary-letter-title">A</h1>
<ul class="dictionary-terms">
  <li class="dictionary-term"><a href="#">item one</a></li>
  <li class="dictionary-term"><a href="#">item two</a></li>
</ul>
  </section>

  <section class="dictionary-letter" id="letter-b">
<h1 class="dictionary-letter-title">B</h1>
<ul class="dictionary-terms">
  <li class="dictionary-term"><a href="#">item one</a></li>
</ul>
  </section>

</article>

Is there anyway to change this?

 

Thanks

David

(Nic Hubbard) #2

There unfortunately isn't a way to change this outside of using javascript to add the markup that you are needing.

(Bart Banda) #3

What Nic said.

 

Another option you could try would be to not use an A-Z listing but rather group the assets by their first letter using the grouping function, then you'll have more control of the styling. 

(Hopkinsd1) #4

Thanks for the replies.

 

Bart, I had looked at a grouping but couldn't figure out how I group by just the first letter of an item. I have had a look at the keyword modifiers but there doesn't appear to be one that I can use to just get the first letter.

 

Thanks

David

(Bart Banda) #5

You should be able to do it with the maxchar modifier.

 

So group by keyword and use %asset_name^maxchars:1%

 

Does that help?

(Hopkinsd1) #6

Hi,

 

Yep, works great thanks.

 

David