BL 4 new panel-metadata layout issue

Backlight Customization
#1

The new metadata panel that allows multiple items of metadata to be displayed is a welcome addition but, at least for me and probably many others it would be better to layout the data in a table with the item description/title in the left column and the metadata item itself in the right hand column (somewhat like the single-image metadata is displayed on reefimages.com where I use spacing to approximate a table look). If the new metadata panel was used as it is now designed for this data there would be 12 text lines instead of 6 plus more white space between each pair of lines to keep the title and data item togther visually and it text would need to be very small if it was all to be on the main screen and readable next to the image above it.

My question is can a table layout be coded for the panel-metadata entry using custom.css and perhaps a phplugin function and, if so, how could this be coded. I am not a good enough coder to tackle this without at least a general guide of how and where it can be done so I am hoping that others who are more adept than I am would also like to see this table approach for what is otherwise a long list that either trails off the bottom of the single image screen or severely restricts the screen real estate usable for the image itself.

#2

The structure of the metadata panel is a Description List (dl). And as a list, it probably isn’t designed to appear tabular.

I tried making some css changes in the inspector but it looked bad. It may be possible to style it to your liking but it seems like it might be a deep rabbit hole.

#3

A tabular layout would occupy too much screen real estate, especially when viewing albums on mobile devices. Bear in mind that Backlight’s albums are designed responsively, and are meant to be viewed on devices ranging in size from mobile phone to full desktop.

#4

I beg to differ. Backlight can certainly handle that. For example, please look at https://reefimages.com/?page=oceansci to see a table that is rendered to be scaleable from desktop to cell phone. Most views of that page on my web site come from mobile devices and I have never had any complaints.

#5

One thing to note is that Doug uses the single-page view as the display mode.

#6

Updated…

Since Matt properly structured the metadata, it is possible to display it as a table!

Following custom css code is designed to show the metadata as a table when using using the single-image view! For small devices and for the fancybox viewer, the current layout is maintained.

I randomly selected 800px as breaking point.

/* Metadata customization for single-page view mode*/
@media screen and (min-width: 800px){

   .content dl.panel-metadata dd {
	  display: inline-block;
 	  width: 80%;
   }

   .content dl.panel-metadata dt {
	  display: inline-block;
	  width: 20%;
   }
}
3 Likes
#7

Yes, but not really what I want to do with the slideshow side panel.

That makes more sense.

#8

Yes, Matthew. You will note that I was not asking for you to change the entire implementation. I was asking for some pointers as to how I could implement something that works for my particular needs. It looks like Daniel Leu has just done that - Thanks, Daniel - so I will work from that and any other suggestions that might be made by others. I am grateful for your hard work to provide the basic platform that works for most people and I think you should be happy that the community can come together and help customize it to special needs like mine…

3 Likes
#9

Update for anyone who reads this thread because they are interested in a table version of the new metadata options. Thanks to Daniel Leu’s help, I have now been able to set up the metadata as a table and it looks great. I am also adding scalable text that is scaled separately within a number of screen size ranges (to avoid oversmall or overlarge text). I need to optimize this and have other priorities for my time right now but it will be included in my next site update probably within a few weeks. Finally, again with very helpful input from Daniel, I am turning some of the metadata entries into links to enable the planned addition of hundreds of video clips of photo subject species that I will add in the next year or so.

2 Likes