how to request multiple public image sizes from a field's filename?

Question

this node endpoint - http://cms.tripchi.com/drupalgap/node/35921 - in my Service includes...

field_photo: {
und: [
{
fid: "810",
uid: "1",
filename: "dxb-airport_1.jpg",
uri: "public://dxb-airport_1.jpg",
filemime: "image/jpeg",
filesize: "64389",
status: "1",
timestamp: "1408433735",
uuid: "697b5fd7-a968-4f6d-b5a0-558ff0f76680",
rdf_mapping: [ ],
alt: "DXB",
title: "DXB Airport",
width: "390",
height: "270"
}
]
},...

using javascript - similiar to this http://cms.tripchi.com/mobile-app/js/index.js - I want to be able to request the large/medium/small dimensions of this public image dynamically - without changing the field_photo's settings in Drupal's.

I have the content-type's image style configured per the image below:

When the field's "Preview image style" is set to "Thumbnail (100x100)", I can do

var size = 'thumbnail';
sDomain + '/sites/default/files/styles/'+size+'/public/' + utils.getLang('field_photo', obj, 'uri'); 

However, when I change the size variable to 'large', I get an Access Denied error.

Changing the field_photo settings to the "Large (480x480)" size does fix that, but I only want this size returned for the API via JavaScript and this changings the Drupal's front-end view/template as well.

When I change the API's Display-Suite I get no difference to what the API returns and manually reconstructing the URL with 'large' still returns Access Denied.

Is there a way to expose requesting multiple image sizes without changing Drupal's field configurations? I would accept a solution that includes a Drupal hook to create the other image sizes on the presence of a parameter.

Answer 1

But avoid … Asking for clarification,

Really? What a joke! I hate this forum so much

There are a few things happening here. When you make a change to the field in the content type UI the imagecache is being manipulated/cleared. Changing the javascript manually does not do this so the path is not pushed through the system.

The easiest way to do this is to have separate fields for each size in the content type to make them available to your js. Hide the display of the fields not needed on the page (use hook_alter or the admin UI).

Then in your js call them programmatically. To ease the JS call I would name the fields so they can be iterated, ie. field_photo_1(lrg),field_photo_2(med),field_photo_3(sml)