Skip to Content

Media Image, Diplay Suite and Custom Search for Music Site on Drupal 7

In my quest for a Music (band) web-site based on Drupal 7, I've installed D7, installed and configured Media and Soundmanager2 modules (D7 from Music series). Now it's time for tweaks. Since I've installed and configured the amazing Soundmanager2, I need to look at the image possibilities on D7. I want to be able to present the album cover (as well as song single image) in a nice way.

In D7 this is now a light and enjoyable task. If all optional modules mentioned in Media are installed, it should work out of the box.

For music use, best it to create a separate field for image use in /admin/structure/types/manage/song/fields (song is the content type I added when I installed SM2). 

Add new field

  • Label: Image
  • Field name: field_image
  • Type of data to store: Image
  • Form element to edit the data: Image

Filed settings: Upload destination > Private files
Additional field settings

  • Label (don't touch)
  • Allowed file extensions: usually good as they are
  • File directory: image (meaning: /sites/all/default/files/private/image)
  • image resolution: nothing here
  • Maximum upload size - predetermend by the php.ini file.
  • Enable Alt and  title fields
  • Preview image style is ok
  • File sources
    • Enabled sources (select all three)
    • Autocomplete reference options > Contains string
    • File attach settings - leave as it is
  • Number of values - unlimited (just in case)
  • Upload destination - Private files
  • Save settings

Manage Display options: /admin/structure/types/manage/song/display: here the 'img' option is pre-selected, but on the right we can trim it:

  • For Teaser I choose Image style: thumbnail with Link image to: content
  • for Full View I choose Image style: medium with Link image to: file (full picture)

The sizes of thumbnail and medium (as well as any other sizes) are tweaked  the Image Styles page: /admin/config/media/image-styles.
Here I can add additional thumbnail sizes for search results etc.

Should I wish to insert an occasional image in the body itself, CKEditor's Add Media will do it for me. The good thing is, you can select a preview-size of the image, linked to its original. The not so good thing is - it's not obvious how to link that image to an external link. The answer is - right-click on the image and select Image Properties. go to the Advanced Tab and in Stylesheet Classes, delete the code that appears there. That will allow you to link the image with url you desire.

So now, in page view, Song type content, I have the nice SM2 Audio Player on top, the image sits under it. I would love them to be next to each other, actually. How do I do that?

Diplay Suite is the answer. It's a module that gives a lot of flexibility in displaying the Teaser, Full view and Search Results. So now, in Display Fields of the Song or Album content type, I can arrange the image, its size, the play, the title of the song and many more functions in a wonderful way.

There's a little tweak for this to work: In /admin/structure/ds/search one needs to go to Drupal core and select Form alter. Also, the DS search module needs to be activated in /admin/config/search/settings.

so the search results now appear as I want them: I can use (for example) smaller thumbnails and title font, and with the great SM2 player one can play all the search results as a playlist! It's so amazing.

If only I could set the Search engine to look for Songs and Albums. unless I write blogs in the Music site (I wont), the only content I want to be searchable is the musical content.

Custom Search module is the answer. among the many things, one can select which Content Types are searched and displayed.

It all starts to look pretty nice on my D7 Music site:-)

No votes yet