Add a logo in the 'details' popup in a shortlist map

3129
5
06-10-2014 04:53 AM
MatthieuDe_Boose
New Contributor II
Hi,

I am making a map using the shortlist template that shows location of administrative buildings for a small town. I have no experience in coding so I am learning one step at the time, I am not sure of what is possible to do and ever so, if I???ll be able to do it.
I am using the ???details??? popup and I would like to add a logo in the popup, under the url.
Is there a way to do it?

Thanks.

Matthieu
0 Kudos
5 Replies
MarkCooney
Occasional Contributor III
Hi Matthieu,

This is certainly doable, but would require adding a bit of javascript code to the main.js file.  Specifically, you would have to alter the showDetails function found around line 1153.  First, add an attribute (that is a url to the image of the logo(s) you are interested in displaying in the details panel) to each feature in your data.  Then, use similar code to:
        var logoDiv = $('<img src="'+graphic.attributes.getValueCI(FIELDNAME_LOGOURL)+'">');
var logoFrame = $('<div class="logoFrame"></div>');
$(logoFrame).append(logoDiv);
$(leftDiv).append(logoFrame);

and place it after line 1182 (after the website info is appended to the leftDiv).

You will have to add whatever css rules you will want to apply in the style.css file to achieve your desired look and feel.

-Mark
0 Kudos
MatthieuDe_Boose
New Contributor II
Hi Mark,

Thanks a lot for your fast answer!
It works just fine!
As my map is still a work in progress, here is a screenshot of what it looks like:

[ATTACH=CONFIG]0[/ATTACH]

I just needed to add a <br /> on the previous line to avoid my logo to be stuck with the link.
And as you can see, I added a second logo (almost) without troubles.

Thanks again!

Matthieu
0 Kudos
MatthieuDe_Boose
New Contributor II

Hello,

I come back to you as it seems that some .js have changed in the shortlist template and it made my logos disappeared!

I added the previous code around the line 2110 of the new main.js but it is obviously not enough.

Thank you in advance

Matthieu

0 Kudos
MarkCooney
Occasional Contributor III

Hi Matthieu,

Do you have a link to your shortlist that we can take a look at?  Your custom code should work fine in the updated versions of Shortlist, but we can help you take a look and see whats going on.

-Mark

0 Kudos
MatthieuDe_Boose
New Contributor II

Hello,

I am sincerely sorry to say that I bothered you for nothing.

The code works perfectly fine, I made a mistake, I was working in a file and testing an other!

Thank you.

Matthieu

0 Kudos