This one was already posted in the old forum, however those pages are currently lost to us (hopefully not for too much longer) but I'm quite proud of this one so here it is again.

Background:

I wanted something more visually appealing than just a list of links to represent the different sections of my notes. On my iPad I have lots of apps and there I group them into folders, that works well for me so I started to wonder if I could do something similar for groups of notes.

Code:

LogoView.lua

pageList=args[1]
headerCategory=args[2]
returnValue=""

function split(stringarray, sep)
  array={}; i=1
  if stringarray then
  for str in string.gmatch(stringarray, "[^"..sep.."]+") do
    array[i]=str; i=i+1
  end
  end
  return array
end

pages=split(pageList,";")
if headerCategory == null then
  headerCategory = ""
end

returnValue='{{stylesheet LogoView.css}}'

for p = 1, #pages do

  title = pages[p]:gsub("?",":")
  link = headerCategory..title:gsub("%s","") 
  image = "no_link.png"
  title = title:gsub("File:",""):gsub(".png","")
  icon = title:gsub("%s","")..".png" 

  if wiki.exists(link) then 
    image = "no_image.png"
    title = "<I>"..title.."</i>"
  end

  if wiki.exists("File:"..icon) then 
    image = icon
  end
    
  returnValue = returnValue .. '<div class="cell"><div class="cell-image">'
  returnValue = returnValue .. '[[' .. link .. '|<img src = "files/' .. image .. '" class = "icon" />]]'
  returnValue = returnValue .. '</div><div class="cell-text">' .. title .. '</div></div>'

end

returnValue = returnValue .. '<div class = "abort-grid"></div>'

return returnValue

LogoView.css

/* default settings = smallest screen */
/* iPod 4, iPhone 4 & earlier : 480x320 */

.cell {
  width: 25%;
  float: left;
  margin: 5px 0 0 0;
}

.icon {width: 65;}
.cell-image {text-align: center;}
.cell-checkbox {
text-align: center;
height:40px;
}
.cell-text {
text-align: center;
height: 40px;
}

/* default setting + landscape */
@media (orientation: landscape) {
.cell {width: 16.6%;}
.icon {width: 50;}
}

/* iPhone 5, iPod 5 : 568x320 */
@media (orientation: portrait) and (min-device-height: 568) {
.icon {width: 65;}
.cell {width: 33%;}
}
@media (orientation: landscape) and (min-device-height: 568) {
.icon {width: 65;}
.cell {width: 16.6%;}
}

/* iPad 2 : 1024x768 */
@media (min-device-height: 1024px) and (orientation: portrait) {
.icon {width: 175;}
.cell {width: 33%;}
}
@media (orientation: landscape) and (min-device-height: 1024px) {
.icon {width: 165;}
.cell {width: 25%;}
}

.abort-grid {clear: both;}

Icons:

You need some software which can generate suitable .pgn icons based on a photo always cropping to the same size & shape. I've been using an app called Icon Designer & saving my icons as 144x144 which it says is suitable for an iPad with retina display.

Find or make your own default icons that are to be shown when no page specific icon exists. Call these no_link.png and no_image.png (or something else & modify the code) - for my no_image.png I decided to use a Trunk Notes logo, this works well for me.

For each page you are going to view via LogoView.lua where you don't want to see the default logo simply create and upload your desired logo and name it after the page. i.e. if the page is called ToDoList then name the image ToDoList.png

Usage:

{{lua LogoView.lua, Page 1;Page 2;Page 3;Page 4}}

Notes:

The layout I've used is best suited to sets of 12 pages per set. More or less than 12 pages works ok but there will either be scrolling or blank space & with 12 it all just fits perfectly.

Image sizes and images per row are optimised based on the device used and the orientation in which it's being held. So for the ideal set of 12 image links on a page ...

• iPad2 Landscape > large images & 3 rows by 4 columns
• iPad2 Portrait > large images & 4 rows by 3 columns
• 5th Gen iPod Touch Landscape > medium images & 2 rows by 6 columns
• 5th Gen iPod Touch Portrait > medium images & 4 rows by 3 columns
• 4th Gen iPod Touch Landscape > small images & 2 rows by 6 columns
• 4th Gen iPod Touch Portrait > small images & 4 rows by 3 columns

Other device screen sizes and resolutions can easily be catered for within the CSS code

Example Images:

Still unsure how to include images here, so for now see my Picasa Folder