Openlayers popups links in Cartaro with Images inside the popup

Hi friedjoff
Is there any example I can use to understand.

I also want to path trough some special fields to appear in the popup, like image with desired image style from the node with the geospatial field containing also an image.

I understood Drupal.theme.prototype.openlayersPopup was in profiles/cartaro/modules/contrib/openlayers/plugins/behaviors/openlayers_behavior_popup.js
and : profiles/cartaro/modules/contrib/openlayers/plugins/behaviors/openlayers_behavior_cluster.js

But I don't know what to do in it and where?

Actually I'm using Geofield and Views but is too slow and it cause to generate more than 1Mo of code in my page. and I really want to quit to store all in PostGis instead.

In advance thank you for your help

I'm trying to make an Openlayers behavior module to override the popup basic fonctions.
I want to display the image of my node in the popup and have the link on the title and the image.
I have a node called "frontmap" with the following fields (machine name):

title
body
field_loc (the geospatial data field)
field_image

My sql in my layer admin/structure/geoserver/layers/list/frontmap/ is like this:

DROP VIEW IF EXISTS geoserver_frontmap_view;
CREATE VIEW geoserver_frontmap_view AS SELECT node.nid AS id, node.nid, node.title AS name, field_data_field_loc.delta, field_data_field_loc.field_loc_geometry, field_image_fid, field_image_alt, field_image_title, field_image_width, field_image_height, body_value AS description, body_summary, body_format
FROM node LEFT JOIN field_data_field_loc ON node.nid = field_data_field_loc.entity_id
LEFT JOIN field_data_field_image ON node.nid = field_data_field_image.entity_id
LEFT JOIN field_data_body ON node.nid = field_data_body.entity_id
WHERE node.type = 'frontmap' and node.status = 1 and field_data_field_loc.deleted = 0;
CREATE OR REPLACE RULE geoserver_frontmap_view_update AS ON UPDATE TO geoserver_frontmap_view DO INSTEAD
  UPDATE field_data_field_loc SET field_loc_geometry = NEW.field_loc_geometry WHERE entity_id = NEW.id;
CREATE OR REPLACE RULE geoserver_frontmap_view_insert AS ON INSERT TO geoserver_frontmap_view DO INSTEAD (
    INSERT INTO field_data_field_loc VALUES ('node', 'frontmap', 0, nextval('node_nid_seq'), currval('node_nid_seq'), 'und', 0, NEW.field_loc_geometry);
    INSERT INTO node VALUES (currval('node_nid_seq'), currval('node_nid_seq'), 'frontmap', 'und', '', 0, 1, extract(epoch from now())::int, extract(epoch from now())::int, 0, 0, 0, 0, 0);
    INSERT INTO node_revision VALUES (currval('node_nid_seq'), currval('node_nid_seq'), 0, '', '', extract(epoch from now())::int, 1, 0, 0, 0);
  );
CREATE OR REPLACE RULE geoserver_frontmap_view_delete AS ON DELETE TO geoserver_frontmap_view DO INSTEAD
  DELETE FROM field_data_field_loc  WHERE entity_id = OLD.id and delta = OLD.delta;

in profiles/cartaro/modules/contrib/openlayers/plugins/behaviors/openlayers_behavior_popup.js
the original Drupal.theme.prototype.openlayersPopup is like this

Drupal.theme.prototype.openlayersPopup = function(feature) {
  var output = '';

  if (feature.attributes.name && feature.attributes.id) {
    output += '<div style="font-weight:bold; margin: 5px 0;"><a href="' + Drupal.settings.basePath + 'node/' + feature.attributes.id + '">' + feature.attributes.name + '</a></div>';
  } else if (feature.attributes.name) {
    output += '<div style="font-weight:bold; margin: 5px 0;">' + feature.attributes.name + '</div>';
  }
  if (feature.attributes.description) {
    output += '<div style="margin: 5px 0; max-width: 480px;">' + feature.attributes.description + '</div>';
  }
  if (feature.attributes.image) {
    output += '<img src="' + Drupal.settings.basePath + 'sites/default/files/styles/thumbnail/public/' + feature.attributes.image + '" />';
  }

I changed it to:

Drupal.theme.prototype.openlayersPopup = function(feature) {
  var output = '';

  if (feature.attributes.name && feature.attributes.id) {
    output += '<div style="font-weight:bold; margin: 5px 0;"><a href="' + Drupal.settings.basePath + 'node/' + feature.attributes.id + '">' + feature.attributes.name + '</a></div>';
  } else if (feature.attributes.name) {
    output += '<div style="font-weight:bold; margin: 5px 0;">' + feature.attributes.name + '</div>';
  }
  if (feature.attributes.description) {
    output += '<div style="margin: 5px 0; max-width: 480px;">' + feature.attributes.description + '</div>';
  }
  if (feature.attributes.image) {
    output += '<img src="' + Drupal.settings.basePath + 'sites/default/files/styles/thumbnail/public/' + feature.attributes.image + '" />';
  }

I don't see no image.
I have no link on the title.

Please help

I'm trying to make an Openlayers behavior module to override the popup basic fonctions.
I want to display the image of my node in the popup and have the link on the title and the image.
I have a node called "frontmap" with the following fields (machine name):

title
body
field_loc (the geospatial data field)
field_image

My sql in my layer admin/structure/geoserver/layers/list/frontmap/ is like this:

DROP VIEW IF EXISTS geoserver_frontmap_view;
CREATE VIEW geoserver_frontmap_view AS SELECT node.nid AS id, node.nid, node.title AS name, field_data_field_loc.delta, field_data_field_loc.field_loc_geometry, field_image_fid, field_image_alt, field_image_title, field_image_width, field_image_height, body_value AS description, body_summary, body_format
FROM node LEFT JOIN field_data_field_loc ON node.nid = field_data_field_loc.entity_id
LEFT JOIN field_data_field_image ON node.nid = field_data_field_image.entity_id
LEFT JOIN field_data_body ON node.nid = field_data_body.entity_id
WHERE node.type = 'frontmap' and node.status = 1 and field_data_field_loc.deleted = 0;
CREATE OR REPLACE RULE geoserver_frontmap_view_update AS ON UPDATE TO geoserver_frontmap_view DO INSTEAD
  UPDATE field_data_field_loc SET field_loc_geometry = NEW.field_loc_geometry WHERE entity_id = NEW.id;
CREATE OR REPLACE RULE geoserver_frontmap_view_insert AS ON INSERT TO geoserver_frontmap_view DO INSTEAD (
    INSERT INTO field_data_field_loc VALUES ('node', 'frontmap', 0, nextval('node_nid_seq'), currval('node_nid_seq'), 'und', 0, NEW.field_loc_geometry);
    INSERT INTO node VALUES (currval('node_nid_seq'), currval('node_nid_seq'), 'frontmap', 'und', '', 0, 1, extract(epoch from now())::int, extract(epoch from now())::int, 0, 0, 0, 0, 0);
    INSERT INTO node_revision VALUES (currval('node_nid_seq'), currval('node_nid_seq'), 0, '', '', extract(epoch from now())::int, 1, 0, 0, 0);
  );
CREATE OR REPLACE RULE geoserver_frontmap_view_delete AS ON DELETE TO geoserver_frontmap_view DO INSTEAD
  DELETE FROM field_data_field_loc  WHERE entity_id = OLD.id and delta = OLD.delta;

in profiles/cartaro/modules/contrib/openlayers/plugins/behaviors/openlayers_behavior_popup.js
the original Drupal.theme.prototype.openlayersPopup is like this

Drupal.theme.prototype.openlayersPopup = function(feature) {
  var output = '';

  if (feature.attributes.name && feature.attributes.id) {
    output += '<div style="font-weight:bold; margin: 5px 0;"><a href="' + Drupal.settings.basePath + 'node/' + feature.attributes.id + '">' + feature.attributes.name + '</a></div>';
  } else if (feature.attributes.name) {
    output += '<div style="font-weight:bold; margin: 5px 0;">' + feature.attributes.name + '</div>';
  }
  if (feature.attributes.description) {
    output += '<div style="margin: 5px 0; max-width: 480px;">' + feature.attributes.description + '</div>';
  }
  if (feature.attributes.image) {
    output += '<img src="' + Drupal.settings.basePath + 'sites/default/files/styles/thumbnail/public/' + feature.attributes.image + '" />';
  }

I changed it to:

Drupal.theme.prototype.openlayersPopup = function(feature) {
  var output = '';

  if (feature.attributes.name && feature.attributes.id) {
    output += '<div style="font-weight:bold; margin: 5px 0;"><a href="' + Drupal.settings.basePath + 'node/' + feature.attributes.id + '">' + feature.attributes.name + '</a></div>';
  } else if (feature.attributes.name) {
    output += '<div style="font-weight:bold; margin: 5px 0;">' + feature.attributes.name + '</div>';
  }
  if (feature.attributes.description) {
    output += '<div style="margin: 5px 0; max-width: 480px;">' + feature.attributes.description + '</div>';
  }
  if (feature.attributes.image) {
    output += '<img src="' + Drupal.settings.basePath + 'sites/default/files/styles/thumbnail/public/' + feature.attributes.image + '" />';
  }

I don't see no image.
I have no link on the title.

Please help

It is working for the link on the title of the node in the popup using the nid like this:

if (feature.attributes.name && feature.attributes.nid) {
   output += '<div style="font-weight:bold; margin: 5px 0;"><a href="' + Drupal.settings.basePath + 'node/' + feature.attributes.nid + '">' + feature.attributes.name + '</a></div>';
     }

I finally succeed to have the link and the image working fine. Cartaro is an amazing tool. My only regrets is the documentation almost doesn't existe.

The JavaScript:

Drupal.theme.prototype.openlayersPopup = function(feature) {
  var output = '';
  
     if (feature.attributes.name && feature.attributes.nid) {
	  output += '<div style="font-weight:bold; font-size:30px; margin: 5px 0;"><a href="' + Drupal.settings.basePath + 'node/' + feature.attributes.nid + '">' + feature.attributes.name + '</a></div>';
     }
     if (feature.attributes.description) {
   output += '<div style="margin: 5px 0; max-width: 480px;">' + feature.attributes.description + '</div>';
     }
     if (feature.attributes.image) {
   output += '<img src="' + Drupal.settings.basePath + 'sites/default/files/styles/300_largeur/public/' + feature.attributes.image + '" />';
     }
   var edit = '';
    edit = ' | <a href="' + Drupal.settings.basePath + 'node/' + feature.attributes.nid + '/edit">Edit</a>'


  return output;
};

The SQL in the layer of the Geoserver interface admin/structure/geoserver/layers

DROP VIEW IF EXISTS geoserver_frontmap_view;
CREATE VIEW geoserver_frontmap_view AS SELECT substr(file_managed.uri, 10) AS image, node.nid AS id, node.nid, node.title AS name, field_data_field_loc.delta, field_data_field_loc.field_loc_geometry, field_image_fid, field_image_alt, field_image_title, field_image_width, field_image_height, body_value AS description, body_summary, body_format
FROM node LEFT JOIN field_data_field_loc ON node.nid = field_data_field_loc.entity_id
LEFT JOIN field_data_field_image ON node.nid = field_data_field_image.entity_id
LEFT JOIN field_data_body ON node.nid = field_data_body.entity_id
LEFT JOIN file_managed ON field_data_field_image.field_image_fid = file_managed.fid
WHERE node.type = 'frontmap' and node.status = 1 and field_data_field_loc.deleted = 0;
CREATE OR REPLACE RULE geoserver_frontmap_view_update AS ON UPDATE TO geoserver_frontmap_view DO INSTEAD
  UPDATE field_data_field_loc SET field_loc_geometry = NEW.field_loc_geometry WHERE entity_id = NEW.id;
CREATE OR REPLACE RULE geoserver_frontmap_view_insert AS ON INSERT TO geoserver_frontmap_view DO INSTEAD (
    INSERT INTO field_data_field_loc VALUES ('node', 'frontmap', 0, nextval('node_nid_seq'), currval('node_nid_seq'), 'und', 0, NEW.field_loc_geometry);
    INSERT INTO node VALUES (currval('node_nid_seq'), currval('node_nid_seq'), 'frontmap', 'und', '', 0, 1, extract(epoch from now())::int, extract(epoch from now())::int, 0, 0, 0, 0, 0);
    INSERT INTO node_revision VALUES (currval('node_nid_seq'), currval('node_nid_seq'), 0, '', '', extract(epoch from now())::int, 1, 0, 0, 0);
  );
CREATE OR REPLACE RULE geoserver_frontmap_view_delete AS ON DELETE TO geoserver_frontmap_view DO INSTEAD
  DELETE FROM field_data_field_loc  WHERE entity_id = OLD.id and delta = OLD.delta;

I'm getting confused displaying field image in popup with Cartaro.
I have a content type with an image field named "image"
In the layer creation SQL of the Geoserver UI, My custom SQL is like this.

AS SELECT substr(file_managed.uri, 10) AS image,

LEFT JOIN field_data_field_image ON node.nid = field_data_field_image.entity_id
LEFT JOIN file_managed ON field_data_field_image.field_image_fid = file_managed.fid

On my JavaScript module that override what I have in Drupal.theme.prototype.openlayersPopup I have the following code:

    if (feature.attributes.image) {
    	output += '<a href="' + Drupal.settings.basePath + 'node/' + feature.attributes.nid + '"><img src="' + Drupal.settings.basePath + 'sites/default/files/styles/my_style/public/' + feature.attributes.image + '" /></a>';
     }

I have a nice popup with the image displayed in the image style "my_style" as I wanted.

Now I want to do the same with another content type with a field image called "picture"

In the layer creation SQL of the Geoserver UI, My custom SQL is like this, I just changed "image" to "picture".

AS SELECT substr(file_managed.uri, 10) AS picture,

LEFT JOIN field_data_field_picture ON node.nid = field_data_field_picture.entity_id
LEFT JOIN file_managed ON field_data_field_picture.field_picture_fid = file_managed.fid

    if (feature.attributes.picture) {
    	output += '<a href="' + Drupal.settings.basePath + 'node/' + feature.attributes.nid + '"><img src="' + Drupal.settings.basePath + 'sites/default/files/styles/my_style/public/' + feature.attributes.picture + '" /></a>';
     }

I see nothing in my popup and I don't understand why. I also tried:

AS SELECT substr(file_managed.uri, 10) AS image,

LEFT JOIN field_data_field_picture ON node.nid = field_data_field_picture.entity_id
LEFT JOIN file_managed ON field_data_field_picture.field_picture_fid = file_managed.fid

Can someone help please.

Hi Patrick,
Thank you for your interest,
Finally, after rebooting the server and (I absolutly don't understand why) it's perfectly worked.

Q - are you sure that what you are getting out of the feature attributes is a string that concats to a valid image URL in the HTML part?

A - Yes but it is related to what you put in the SQL part of the layer creation in admin/structure/geoserver/layers/add
substr(file_managed.uri, 10)
Removes the 1O letters "public://" at the beginning of the URL.
eg: for my_picture.jpg the file_managed path is public://my_picture.jpg
On the other hand, the JavaScript tells where to look for the image.
In this case I want to output the my_style image of my_picture.jpg witch is a field image called "picture".

Q- Could you check the image URL that is rendered into the popup? If you are using Firefox or Chrome, F12 opens a debugging console where you can hover over the popover and inspect its HTML.

A - I checked when it was not working and the the url of the image was:

src="/my_drupal_folder/sites/default/files/styles/my_style/public/undefined"
after rebooting and working, it is:
src="/my_drupal_folder/sites/default/files/styles/my_style/public/my_picture.jpg"

About it is working after rebooting I don't undestand why?
Before I tried to run cron "drush cron" clear the cache "drush cc all" and even "apachectl restart" logout/login to reauthentificat with Geoserver.
It has changed nothing until I reboot.
Another thing to look at is what Geoserver is outputting thought WFS. I didn't tried to restart it when it was not working. In my case I'm using Geoserver 2.6 with the automatic authentification with drupal roles of cartaro.

— Please also keep in mind that in Drupal 7, if your image fields uses some kind of image transformation (for example downscaling) the image is not rendered until it is specifically requested via a special Drupal method. Simply extracting the image id from the database won't initiate the rendering process. Maybe that is the case here? It could also be that the image is stored differently in the second content type, e.g. in another directory or with a pre/postfix.

A - You are perfectly right and it is very annoying there is no way to atomically generate or regenerate the resized image you want to serve. There are tricks using View but in my case I select the my_style in the field image at the node creation "Preview image style" witch generate my wanted style on every new image upload.

So for me, at the moment, the working exemple with a field image in the node called "picture":

SQL in the Geoserver layer UI admin/structure/geoserver/layers/add
Manualy added:

substr(file_managed.uri, 10) AS picture,
substr(file_managed.uri, 10) AS image,


LEFT JOIN file_managed ON field_data_field_picture.field_picture_fid = file_managed.fid

Full SQL of my layer build with the PostGis field from the content type name: "c_type" image field name: "picture" geospatial data field name : "test_localisation" and the layer name is "layer_pict"

DROP VIEW IF EXISTS geoserver_layer_pict_view;
CREATE VIEW geoserver_layer_pict_view AS SELECT
substr(file_managed.uri, 10) AS picture,
substr(file_managed.uri, 10) AS image,
node.nid AS id,
node.nid, node.title AS name,
field_data_field_test_localisation.delta,
field_data_field_test_localisation.field_test_localisation_geometry,
field_picture_fid,
field_picture_alt,
field_picture_title,
field_picture_width,
field_picture_height,
body_value AS description,
body_summary, body_format
FROM node LEFT JOIN field_data_field_test_localisation ON node.nid = field_data_field_test_localisation.entity_id
	LEFT JOIN field_data_field_picture ON node.nid = field_data_field_picture.entity_id
	LEFT JOIN field_data_body ON node.nid = field_data_body.entity_id
	LEFT JOIN file_managed ON field_data_field_picture.field_picture_fid = file_managed.fid
WHERE node.type = 'c_type' and node.status = 1 and field_data_field_test_localisation.deleted = 0;
CREATE OR REPLACE RULE geoserver_layer_pict_view_update AS ON UPDATE TO geoserver_layer_pict_view DO INSTEAD
  UPDATE field_data_field_test_localisation SET field_test_localisation_geometry = NEW.field_test_localisation_geometry WHERE entity_id = NEW.id;
CREATE OR REPLACE RULE geoserver_layer_pict_view_insert AS ON INSERT TO geoserver_layer_pict_view DO INSTEAD (
    INSERT INTO field_data_field_test_localisation VALUES ('node', 'c_type', 0, nextval('node_nid_seq'), currval('node_nid_seq'), 'und', 0, NEW.field_test_localisation_geometry);
    INSERT INTO node VALUES (currval('node_nid_seq'), currval('node_nid_seq'), 'c_type', 'und', '', 0, 1, extract(epoch from now())::int, extract(epoch from now())::int, 0, 0, 0, 0, 0);
    INSERT INTO node_revision VALUES (currval('node_nid_seq'), currval('node_nid_seq'), 0, '', '', extract(epoch from now())::int, 1, 0, 0, 0);
  );
CREATE OR REPLACE RULE geoserver_layer_pict_view_delete AS ON DELETE TO geoserver_layer_pict_view DO INSTEAD
  DELETE FROM field_data_field_test_localisation  WHERE entity_id = OLD.id and delta = OLD.delta;

On the JavaScript side the override function of my module Drupal.theme.prototype.openlayersPopup

    // outpout the image inside the popup with a link to the node
    if (feature.attributes.image) {
    	output += '<a href="' + Drupal.settings.basePath + 'node/' + feature.attributes.nid + '"><img src="' + Drupal.settings.basePath + 'sites/default/files/styles/my_style/public/' + feature.attributes.image + '" /></a>';
     }

Does it looks right to everybody?

About the image inside the poput, with this method, it only displays one image even if you have several in your conten..t