Customize Avalon Homepage

What you see as the home page is separated into several *.html.erb files:

and they're all put together in the avalon layout: app/views/layouts/avalon.html.erb.

Avalon uses Blacklight for its layout, so if you need to look up how to do something specific to the look, you can search the Blacklight documentation.

Changing the featured items

An *.html.erb file is just an HTML file with some embedded ruby. Whenever you see a <%= some_code %>, that is ruby code to be executed and will show up on the page. Similarly, <% some_code %> is also ruby code, but will not show anything, just execute.

Here is a snippet from the Indiana University production environment's app/views/modules/_header.html.erb, which you can see here: media.dlib.indiana.edu
The snippet sets up the featured items on the front page.

<div id="featured_content" class="row">
  <div class="col-md-4">
    <p><%= link_to media_object_path("avalon:6674") do %>
      <strong>Featured Film</strong>
    <% end %></p>
    <p><%= link_to media_object_path("avalon:6674") do %>
      <%= image_tag "featured/masters.png", alt: "Featured Film", class: 'thumbnail' %>
    <% end %></p>
    <p><%= link_to 'The Masters of Disaster (1985)', media_object_path("avalon:6674") %></p>
  </div>
  <div class="col-md-4">
    <p><%= link_to catalog_index_path('f[collection_ssim][]' => 'IUL Moving Image Archive') do %>
      <strong>Featured Film Collection</strong>
    <% end %></p>
    <p><%= link_to catalog_index_path('f[collection_ssim][]' => 'IUL Moving Image Archive') do %>
      <%= image_tag "featured/minnieMouse.png", alt: "Featured Video Collection", class: 'thumbnail' %>
    <% end %></p>
    <p><%= link_to catalog_index_path('f[collection_ssim][]' => 'IUL Moving Image Archive') do %>
      Indiana University Libraries Moving Image Archive
    <% end %></p>
  </div>
  <div class="col-md-4 hidden-phone">
    <p><%= link_to catalog_index_path('f[collection_ssim][]' => 'Birch Bayh Senatorial Papers') do %>
      <strong>Featured Audio Collection</strong>
    <% end %></p>
    <p><%= link_to catalog_index_path('f[collection_ssim][]' => 'Birch Bayh Senatorial Papers') do %>
      <%= image_tag "featured/birchBayhHearings.png", alt: "Featured Audio Collection", class: 'thumbnail' %>
    <% end %></p>
    <p><%= link_to catalog_index_path('f[collection_ssim][]' => 'Birch Bayh Senatorial Papers') do %>
      Birch Bayh Senate Hearings
    <% end %></p>
  </div>
</div>

The first links to a specific media object using the item's pid, the second links to a search for a collection.

The image_tag looks in app/assets/images/ for its images. We put our pictures into app/assets/images/featured/.