Customize info view image

[Wildcat]

Hi all,

I just switched from PC to Mac few days ago and "play" with it
I want now of course transfer important stuff I may have in my PC in my Mac.

First thing is my comics collection, and therefore, I use BookPedia.
I made the necessary csv and txt export and import, and have now all my data in BP.

Still, I'd like to customize the info view, especially the image (I use the GreyImage template). I'd like the image in the info view is different from the cover view like this :



On the left : Cover
In the View : one board

(Or if simplier put the board on the left, and the cover in the view)

I guess I have to change html code here in the Template :

<div class="thumb"><a href="[key:amazonLink]"><img src="[key:coverImageURL]" alt="No Image" width="120" border="0"></a><!--IFStatus<div class="status" style="background-color:[backgroundColor];">[key:status]</div>ENDStatus--></div>

I have a whole folder with my board, with strange names for the moment. I guess I first have to create some kind of Index for those images, then refer to it html code.

But I have no idea how to do it…

Any help would be much appreciated

[Conor]

One idea is to use the links feature, if you're not going to use it for links then you can do images only. In the template, change the links to assume the url is an image:

Code: Select all

<!--IFlinks
<div class="boxHolderRight">
[linksBegin]<img src="[link:url]" />
[linksEnd]</div>
ENDlinks-->

This has the advantage that you can do multiple images. But it's nice having the links feature for any type of link and you can already click on the links to view images in the program, so you might want to use a custom field instead and only do one image. They would all be in a folder and the custom field would have the name.

Code: Select all

<img src="file://Users/me/Pictures/MyImages/[key:custom1]" />

[Wildcat]

Brilliant !!

I tried the second option, need to adapte a bit :

Code: Select all

img src="/Users/Viny/Pictures/Planches/[key:custom3]"

'file:/' was not needed.

I may try the one using links later, it's time to go to bed for me

Thank you very much for such fast answer !!

[Wildcat]

Hi Conor,

I tried the link displayed as an image and... I'm not successful with it.
First tests give a question mark in a blue sqaure.
So, I tried to see what was the link behind (where it was pointing at), and found this :

img src="[link:url]"
Gives :
img src="pedia://bruji.com/loadLink=%5BData%20Folder%5D/Downloads/Akiracouleur.jpg"

Guess %5BData%20Folder%5D is the [Data Folder] shown when you click on "move" to move the link in Downloads Folder.

I suppose %5B is [
%20 is space
%5D is ]

What I'm not sure is that pedia://bruji.com/loadLink=%5BData%20Folder%5D is "equal" to /Users/me/Library/Application Support/Bookpedia, which is the place where images seems to be moved to when clicking on 'Move' in Edit options ?

I also tried without moving the file in [Data Folder], and the path seems strange :

file:///Users/me/Documents/Planches/unclesam_10032002.jpg

3 slashes ??

Stranger (to me) is that the link is working : if I click on it, I have the full link's screen with the picture.

Thanks for help.

[Conor]

I forgot about the encoding for URLs, you have to stick to the second option. The URL for the link gets encoded as URLs with the "file://" at the beginning to indicate it's a file URL, just like "http://" indicates a web resource (The third slash is the regular slash of the file path, that indicates root). So the url for a link's href is not the same as that used in the img's src tag. Also as you noticed for those inside the data folder the pedias prefix them with a personal url so that clicking it invokes the program again and it shows you the correct results or opens a movie if necessary. As the percentage encoding (%5B) that is the proper way to encode none valid characters for URLs.

If you really wanted to use the links function in this way you can add a javascript that cleans up the src of the images when the page loads.

Code: Select all

function imageReplacement() {
var elements = document.getElementsByTagName('img');

	for (var i=0;i< elements.length;i++)
	{
		if (x[i].src)
		{
                    x[i].src.replace('pedia://bruji.com/loadLink=%5BData%20Folder%5D','/Users/me/Library/Application Support/Bookpedia');
                    x[i].src.replace('file:///','/');
		}
	}
}
window.onload = imageReplacement;

There is some optimization you can do by picking only the img tags that are links by giving them an id:

Code: Select all

document.getElementById('linkImage')

This is just a rough example as I copy pasted from a web resource.

[Wildcat]

Hi Connor,

I tried, but didn't manage to use the code.
I also checked on the web site, but couldn't find my answer...

I was wondering if this could come from 'x' : nowhere in the code I can see "definition"

element is defined
i is defined
but not x

My only marks are VB (specially Excel), I guess some basics rules are similar, but maybe I'm totally wrong...

Problem is I absolutly don't know anything about java, and even with the 'original' script from quirks, I have no idea how I should do this. I'm quite sure we're (you're ) quite close to the solution. I tried many little changes here and there, but there is no replacement at all (when I make the link appear, it still the pedia one).

Hope you can help

[Conor]

You are right, in the copy paste I did not change the variable name, x should be elements. I also changed it to find the link by name so that links has name="aLink" attribute. However in testing I can get the src and I can replace it and change it, but I can set it back. So it looks like that avenue is not possible.

Code: Select all

function imageReplacement() {
var elements = document.getElementsByName('aLink');

   for (var i=0;i< elements.length;i++)
   {
      if (elements[i].src)
      {
           var newSource = elements[i].src;
           newSource = newSource.replace('pedia://bruji.com/loadLink=%5BData%20Folder%5D','/Users/me/Library/Application Support/Bookpedia');
           newSource = newSource.replace('file:///','/');
           elements[i].src = newSource;  /*This line fails */
      }
   }
}
window.onload = imageReplacement;

Code: Select all

<!--IFlinks
<div class="boxHolderRight">
[linksBegin]<img name="aLink" src="[link:url]" />
[linksEnd]</div>
ENDlinks-->

You can test it in Firefox, and use alert(variable) to print out information, but remember to take out the comments for the <!--IFlinks as otherwise Firefox won't see the img tag. Someone who knows if it's possible to change src on an img tag with Javascript might be able to help you. I am not a Javascript programmer so I know nothing about these things.

[Wildcat]

Hi Conor,

Don't abandon

I have another idea, and I'm quite sure you can help : instead of replacing, why not simply substring?

What I'm looking for in fact is src without "pedia://bruji.com/loadLink="

So, I need to have a "NewLink" which would be the [link:url] minus the 27 first characters.

I found explanations here, but "[link:url]".substring(27) doesn't give anything... I mean it's probably right, but I don't know how to insert it properly.

Any idea?

[Wildcat]

By the way, I found a solution like this :

Code: Select all

<!--IFlinks
<div class="boxHolderRight">
<ul>[linksBegin]<a HREF="[link:url]"><img src="/Users/me/Pictures/Planches/[link:name].jpg" width="80" border="0"></a>
[linksEnd]</ul></div>
</div>
ENDlinks-->

But this is not really "sexy", and I'll have some problems I think if I want to export this in nice web template...

[Conor]

Your are smarter than me, I should have remember that the link name also reflects the file name. So your solution is perfect. If you want to use it online, just change the web template to indicate the folder relative to the file by starting just with "Planches/[link:name].jpg" (an upload that folder with everything else).

Also for the web you can actually use the old version with the URL as the export templates have an include local links setting for upload that copies the files to a folder for you.The "pedia://" prefix is only used internally in the info view not in HTML exports.

Code: Select all

<meta name="includeLocalLinks" content="yes" />

This is the setting and would go in the header of your HTML template.

And the substring function would have been src="javascript:'[link:url]'.substring(27)" but I am not sure if that would have worked not being a link but an image source (not sure javascript is called on loading of sources, unlike a click).

[Wildcat]

Thank you Conor, for the time you spend and this

The aim off all these changes is to have something more dedicaed to comics. Maybe some others also request this, maybe not, but a "comicpedia" may interrest some other people especially in western Europe, FR, BE...

You already have the big advantage that pedia products are translated in multiple languages, the rest is a mater of fields and some inerresting actions like

Split books "To buy" and books "Bougth" in separate screens (I'm quite sur this is already possible, I didn't try for the moment),
Having some more detailed info, like authors photos, quick summary of there life, the other series they worked on
Quotation of the comics (I don't have 1000 EUR Tintin, but some are already around 50 or 70 EUR)
Para-comics information (statues, Exlibris...)
etc...

I don't know if I can (if not please tel me), but you can have a look here and there. This is in French, only for PC, but our "Chief" is looking for mac version of this tool, maybe an agreement is possible... Contacts here