Editing HTML For Details View Templates

[njan]

Perhaps this is not the place to ask but I have never used HTML (though I have some experience programming from my undergrad days and I've scripted FileMaker)
I tried opening some of the html Details view files using the Mac Text editor, and it does not seem to have all the html details.
Can one edit HTML using the basic text editor, or using Word? If not what would you suggest,
If there is a quick and easy guide to customizing the details html files (beyond what is on the Bruji web page under extras) I would be most grateful for a heads up.

[quote="Conor"]
4. There is an exclusive editor field. Books with value in this field would then be an Edited Book. As Fine Wine suggested there is a lot of flexibility in the details view that can be coded in HTML by users, you could add a text/badge/image/color change for edited books with:

Code: Select all

<!--IFEditor Edited ENDEditor-->

[FineWine]

First off I split the Topic in two and started a new Topic more appropriate for this question and placed it in the 'Support' forum.

I use a Free HTML/CSS editor called "Brackets" which you can download from here.

The easiest way to get started with modifying Details View Templates is to play around with an existing default template.

• 1 - You will need to Copy an existing default template to a new location
  2 - Fire up Finder and locate the Bookpedia.app in the Applications folder - Right click select Show Package Contents > Contents > Resources > InfoTemplates > en (to start with I would just play with the non-tabbed templates)
  3 - Copy your chosen Template to: ~/Library > Application Support > Bookpedia > InfoTemplates
  4 - Now have a read of - Creating a Template and All Tags which shows you how Conor has created the pedia Templates.
  5 - The greatest resouce on the web is the W3Schools.com for learning HTML & CSS coding from Grade 1 through to Grade 12 schooling. It is a brilliant site and is constantly updated to reflect the latest international standards.
  6 - Brackets also has a very basic tutorial page on how to use Brackets have a read.
  7 - Once you think you have the slightest grip on things right click on your chosen Template > Open With > Brackets
  8 - And finally your best resource are these forums and the Extra site pages where members have contributed their own Templates, which you can do as well

Happy and Fun coding

[njan]

Splendid thanks again FineWine ... this is super helpful

[njan]

Hi FineWine,
many thanks again on the intro to HTML use.
I just got Brackets and am learning the rudiments fo HTML, just for fun... reminds me of my Basic, Lisp and C++ days some 30 odd years ago.

Before I wade into all the HTML commands ... just a quick question.
Can one display status badges (ie the wish list star) in the Details View?
(Im assuming that there is only one status icon per title)

In most detail views, a books title appears in the top header in large font and it is also a URL link. Can one set the link to open the attachment link instead of the url?

What I'd like to see in my customized Details view (when I learn enough of the commands) is to have
the Top header as follows
Title (large font), Author or Editor, Year (Release) — Status Badge — Ratings (not justified to the far left)
Change color of header if book is edited book.
Then various details below TBD.

If anyone is able to write a basic set of HTML commands and is willing to give me a head start... id be most grateful

[FineWine]

... reminds me of my Basic, Lisp and C++ days some 30 odd years ago.

Oh those were the days. In the mid eighties I accepted the nomination for Secretary for our Ten Bowling League only if I could computerise the league scoring and table records, so I wrote a spread sheet program in Basic, what fun

Before I wade into all the HTML commands ... just a quick question.
Can one display status badges (ie the wish list star) in the Details View?
(Im assuming that there is only one status icon per title)

There is no published Tag for this ability (I think)

In most detail views, a books title appears in the top header in large font and it is also a URL link. Can one set the link to open the attachment link instead of the url?

Yes you can and this is written within a <div> element as a class attribute within the <body> of the HTML Document:

Code: Select all

<div class="header">
	<div class="title">
            <a href="[link:url]">[key:title]</a>

What I'd like to see in my customized Details view (when I learn enough of the commands) is to have
the Top header as follows
Title (large font), Author or Editor, Year (Release) — Status Badge — Ratings (not justified to the far left)
Change color of header if book is edited book.
Then various details below TBD.

Most formatting (fonts, colours, postion, size, etc) are written as attributes within <style type="text/css"> </style> HTML element area at the beginning of the HTML Document between the <head> </head> area and before the <body> area. So the <style> area defines what the Document is going to look like while the <body> area is where all the action happens.

If anyone is able to write a basic set of HTML commands and is willing to give me a head start... id be most grateful

As I stated previously above, open up some Templates and even go to the Bruji Extra page and download and install and open up some Detail View Templates myself and others have written. Some are complex to do complex things while some a simple. But the most basic ones are the default Templates that come with Bookpedia.

Remember HTML are the building blocks of the Document whilst CSS is the style of the Document. Think of it as a house with the HTML as the walls and rooms, whilst CSS is the wallpaper and paint and furniture You can then come along and buy an existing house and renovate it and put your own stuff inside. (that is terribly simplistic)

[Conor]

1. There is a [key:year] you can use in the header.
2. Hasn't come up before, but something that can be included. There is a [key:status] but it's a string, saying if the book is overdue or released soon.
3. If editor is set you can change the color, as you can add HTML based on the presence of a value.

Code: Select all

<div class="header" style="<!--IFeditor background-color:red; ENDeditor-->">
</div>

4. Javascript can be very useful for more advanced things. As the export is limited to showing a bit of HTML and changing the value. With Javascript you can do things based on that value. It's also not as intimidating with a little Google search for examples. For example this script here looks at the value of the output of the [key:collectionNames] and if it includes the "Wish List" it then finds the element on your page with the id "Wishlist" and makes it visible. So you can drop that into the header for example to show an icon when on the wish lit.

Code: Select all

<script type="text/javascript">
var collections = "[key:collectionNames]";

if (collections.includes("Wish List")) {
    document.getElementById('Wishlist').style.display='block';
}
</script>


<img id="Wishlist" src="wishlist.png" style="display:none;"/>

5. The links i a bit more complicated as there can be many of them. So there is a loop and it exports all the links. If you know there is always one, then it would work.

Code: Select all

<!--IFlinks
[linksBegin]<a href="[link:url]" /> All the title and header bit here
[linksEnd]</a>
ENDlinks-->

But there are functions inside Bookpedia for this. Clicking on the Link toolbar button will launch the first link. And if you set the preference to load links externally, it will load in your preferred program (whatever would happen if you had launched it in the Finder) instead of inside Bookpedia. Shortcut is also "command-l".

6. You can also use the values in the fields, to control images. For example using the value of custom 1 to load an image named after it.

Hope that helps a bit, to get the most of Bookpedia. All the code above was written here, o there might be issues. But if you end up using some of it and it's not working, don't hesitate to send me the template so I can look at it.

[njan]

Once again thanks so much for your feedback ... I know you have better things to do then help a newbie with HTML...
This HTML thing is quite fun... but also frustrating.

So far Ive been able to move the ratings to the left side and rearrange the Header in Easy.html details style to this format
***** Author (Year) — Tilte
I was able to add a png badge next to the author, but opted for now to simply put ed. next to the author if it was an edited book.
However inserting [link:url] in place of [key:url] at the title, does not work.... (it works below where the IF links loop is)
Here is what I have:

<div class="header">
<div class="title">
<span class="author"><!--IFauthor [key:author]ENDauthor-->
<!--IFeditor ed.ENDeditor-->
</span>
<span class="year"><!--IFyear ([key:year])ENDyear--></span>
<a href="[link:url]"> — [key:title]</a>
</div>
</div>

I was trying to change the header color to say red using the code you suggested... but clearly I'm doing something wrong, because it doesn't work.
I can change it up where the header is defined in the body, but cannot seem to find a way to change it IF there is an editor field.

Where do these instructions that you sent
<div class="header" style="<!--IFEditor background-color:red; ENDEditor-->"> </div>
go? In the body?

it just produces another banner (of the same color regardless of the editor field... to change the header color where do I insure the background color command?

Given that I can barely get the link in the header to work as I want, Im quite weary of trying to insert another foreign language, Java, into this mix.
Ill try to improve this incrementally... but for now just getting the banner to change color and the link to work is proving quite challenging.

[FineWine]

Any element can have a style attribute where you can set CSS. To change the color add the following to the header bit: (Possible colors)

Code: Select all

<div class="header" <!--IFeditor style="background:Coral;" ENDeditor-->>
<div class="title">
<span class="author"><!--IFauthor [key:author]ENDauthor--> 
<!--IFeditor ed.ENDeditor-->
</span>
<span class="year"><!--IFyear ([key:year])ENDyear--></span>
<a href="[link:url]"> — [key:title]</a>
</div>
</div>

It's important to make sure the <!--BeginRepeat--> comes before the header class. It's one line below in the original Easy template, just move it up, as it does not really matter on a single page result.

For the link, if you know that there is only ever one link, then you are just missing the repeat bits.

Code: Select all

<div class="header" <!--IFeditor style="background:Coral;" ENDeditor-->>
<div class="title">
<span class="author"><!--IFauthor [key:author]ENDauthor--> 
<!--IFeditor ed.ENDeditor-->
</span>
<span class="year"><!--IFyear ([key:year])ENDyear--></span>
<!--IFlinks
[linksBegin]<a href="[link:url]"> — [key:title]</a>[linksEnd]
ENDlinks-->
</div>
</div>

What I would do, is maybe add a little icon after the title to be the link, like Wikipedia does. This way if you do have more than one link, it will still look okay, with several links at the end:

Code: Select all

[code]<div class="header" <!--IFeditor style="background:Coral;" ENDeditor-->>
<div class="title">
<span class="author"><!--IFauthor [key:author]ENDauthor--> 
<!--IFeditor ed.ENDeditor-->
</span>
<span class="year"><!--IFyear ([key:year])ENDyear--></span> — [key:title]
 :) <!--IFlinks[linksBegin]<a href="[link:url]">#</a>[linksEnd]ENDlinks-->
</div>
</div>

[/code]

[FineWine]

You bet me to it and as usual yours is so much more stylist.

In the <---IFeditor argument would not the [translate:ed.] be valid ?

Code: Select all

<!--IFeditor
<style="background:Coral;"> <span[translate:ed.]:</span>
ENDeditor-->

In the last block of code third line up from the bottom I corrected <!--Flings to <!--IFlinks

[njan]

Thank you so, so much... you guys are incredible.
I'll (implement this over the weekend.
And I'll hold myself from asking for more help, only because I know you will, and you surely have better things to do!

But if I'm in a rut .... i'll call out.
I just remembered how much fun it is to code, debug, debug, debug.... and then see it work... baby steps for me here... but at least I can now say hello in HTML.

[Conor]

Secret menu for you and others that might be playing with the HTML, hold down the option key and click on the "Help" menu. There is a "Show Details View HTML". Lets you export the HTML after it's been rendered. It's helpful in debugging and changing the style as you can open that directly in Safari and see changes you do to the file live and then work backwards to add it to the template. For me useful when I am guessing at spacing.

[FineWine]

Thank you Conor - forgot about that little gem.

[smithloo]

interesting topic
I would recommend an article that you can review to learn more knowledge on HTML for beginners