I am trying to include a jpg to a geoext popup.

There are various shapefiles, but only one needs to load pictures. With only openlayers it was easy to do, I just used the content.ftl from geoserver 2.4. However, we switched to geoext and sadly I am not able to figure out how to do it now.

Can somebody give me a hint how to force GeoExt.Popup to use the different content.ftl of geoserver - or is there another way?

  • By the way, my script for popup is as following: controls.push(new OpenLayers.Control.WMSGetFeatureInfo ({ autoActivate: true, infoFormat: "application/vnd.ogc.gml", maxFeatures: 3, eventListeners: { "getfeatureinfo": function(e) { var items = []; Ext.each(e.features, function(feature) { items.push ({ xtype: "propertygrid", title: feature.fid, source: feature.attributes }); }); new GeoExt.Popup ({ title: "Feature Info", width: 200, height: 200, layout: "accordion", map: app.mapPanel, location: e.xy, items: items }).show(); } } }) );
    – Frederik
    Aug 30, 2013 at 7:05

2 Answers 2


you can modify this example:


and add there the JPG, for example, with iFrame (http://www.w3schools.com/tags/tag_iframe.asp) or LightBox (http://lokeshdhakar.com/projects/lightbox2/)

Hope this helps,

  • Thanks for the idea ... however, they are just using one layer in your example - so everything is handled the same way. That is working quite well with my map too. What I need is an way to handle different layers in different ways (meaning the getfeatureinfo - popup) or using the content.ftl of geoserver (which will differentiate the layers by itself)
    – Frederik
    Aug 29, 2013 at 9:46

its working by now. Just in case someone needs the idea:
if + feature request + indexOf solved the problem ...

controls.push(new OpenLayers.Control.WMSGetFeatureInfo({
autoActivate: true,
infoFormat: "application/vnd.ogc.gml",
maxFeatures: 3,
"getfeatureinfo": function(e){
var items = [];
Ext.each(e.features, function(feature){
xtype: "propertygrid",
title: feature.fid,
source: feature.attributes});});
var varindexof=0;
var stationidpicture="";
Ext.each(e.features, function(feature){
var s=feature.fid;
var x=String(s);
var stationid=String(feature.attributes.stationid).toUpperCase()
stationidpicture=String('<a href="http://xxx.xxx.xxx.xxx/Image/Data_Plot/'+stationid+'.jpg" target="_blank"><img src="http://xxx.xxx.xxx.xxx/Image/Data_Plot/'+stationid+'.jpg" width="250" height="250"></a>')});
if (varindexof == -1){
new GeoExt.Popup({
title: "Feature Info",
width: 200,height: 200,
layout: "accordion",
map: app.mapPanel,
location: e.xy,
items: items}).show();}
new GeoExt.Popup({
title: "Feature Info",
width: 260,height: 305,
layout: "accordion",
map: app.mapPanel,
location: e.xy,
html: "click image for bigger version" + stationidpicture }).show();}}}}));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.