DVDpedia: Show links as images and link in InfoView

[bateman23]

Hi everyone,

I'm using DVDpedia and i'd like to modify the InfoView, so that links (images) attached to a record are shown as image AND other file-types as links.
I already got the following code, but either the first block of <!--IFlinks or (if this one is removed) the second block works.
Both blocks of code in the file and the images are not shown.

Is there any way to show both?
Background: I have images and video-files attached to a record. I want the images to be shown as "<img src", the videos as "<a href".

Thanks in advance.
bateman23

Code: Select all

<!--IFlinks
<div class="links" ref="[link:type]">
<ul>
[linksBegin]<li><a href="[link:url]">[link:name]</a></li>
[linksEnd]
</ul>
</div>
ENDlinks-->

<!--IFlinks
[linksBegin]<img src="[link:url]" alt="[link:name]">
[linksEnd]
ENDlinks-->

In the header i put the java-script:

Code: Select all

<script type="text/javascript">
function removeUnwantedPrefix() {
// pedia://bruji.com/loadLink= is the prefix that we want to remove from img tags
   links = document.getElementsByTagName('img');
   
        for (indexX in links) {
      nextLink = links[indexX];
      if (nextLink.src.indexOf('pedia://bruji.com/loadLink=') !=-1) {
         nextLink.src = nextLink.src.substring(27, nextLink.src.length);
      }
   }
}
</script>

[Conor]

The template system only expect one single link area, and only does the first link section it encounters.

I think the best solution would be to have a single link area and then handle the change in the JavaScript. You can update the JavaScript to not only remove the pedia prefix but also look for say .jpg and then change the element from an "a" tag to a "img". Not sure how JavaScript would handle changing an entire element, but you could try leaving the "a" tag and then changing the source inside the a tag to <img src="" /> for the images.

Something along the lines of:

Code: Select all

<!--IFlinks
<div class="links">
<ul>
[linksBegin]<li><a id="aLink" href="[link:url]">[link:name]</a></li>
[linksEnd]
</ul>
</div>
ENDlinks-->

<script type="text/javascript">
function showImageLinks() {

   links = document.getElementsById('aLink'); // You could use the [link:type] to only get "images" if your confident all your images are labeled correctly

  for (indexX in links) {
      nextLink = links[indexX];
      url = nextLink.href;
      if (url.indexOf('pedia://bruji.com/loadLink=') != -1 && url.indexOf('.jpg') != -1) {
         // I am making all this up as a I go, so it would need figuring out
         url = url.substring(27, url.length);  //Remove prefix
         imageTag = '<img src="' + url + '" />';  // make img tag
         nextLink.innerText = imageTag;   // set image tag as inside of the link
      }
   }
}
</script>

[bateman23]

Hi,
thanks for this valuable input. I adapted your code, but it's not working
I tried this code as webpage debugging with firebug, and there it's working fine, so i think i'm missing some pedia-template stuff.
Perhaps there is some additional code being created? btw: Is there any way to show the source or debug the InfoView?

JavaScript:

Code: Select all

<script type="text/javascript">
function showImageLinks() {

	// Change links of type "image" from "<a href" to "<img src"
	links = document.getElementsByTagName("DIV");
	
	for (i=0;i<=links.length;i++) {
		nextLink = links[i];
		
		if ( nextLink.id == "link" ) {		
			
			node = nextLink;
    		while (node.nextSibling) {
        		node = node.firstChild.nextSibling;
        		if (node.nodeName === 'A' && node.id === 'image') {
        			
        			// Remove Pedia Prefix
					var url = node.href.substring(27, node.href.length);
					// Change Link to be a Picture
                	nextLink.innerHTML = "\n<img src='"+ url +"'>\n";
        		} // end if
    		} // end while
		} // end if
	} // end for

</script>

Template:

Code: Select all

<!--IFlinks
<div class="links" id="links">
[linksBegin]<a id="image" href="[link:url]">[link:name]</a>
[linksEnd]
</div>
ENDlinks-->

Thanks a lot in advance

edit: Just thinking about this issue again. And as the [linksBegin]-Tag is a loop actually my code will not work for more than one link anyway.. So i need t think of something else. Perhaps search for an upcoming "<a"-Tag..