I change some logos depending on a datamodel field. I also need to change the image size dynamically.
I know I can get height and width using resource() and the methods .width and .height
However, if I try to dynamically change the image size via style attribute, nothing happens:
results.attr("style", "width: " + width + " !important;height: " +height+" !important;");
How can this be achieved?
Thanks in advance.
Use results.css({"width": width, "height": height}); or results.css("width", width); results.css("height", height); instead, as shown in the following example:
Standard Script
Name: Dynamic Image
Selector: #dynamic-image
var field = "",
result = "file:///C:/PPWorkDir/resources/images/";
field = record.fields.fieldName;
if (field !== "") result += field;
var info = resource(result);
if (info) {
var width = info.width + "pt",
height = info.height + "pt";
results.attr("src", result);
//results.css({"width": width, "height": height});
results.css("width", width);
results.css("height", height);
}
Alternatively set the image as background to a box or table cell. Perhaps the following is of some help:
thanks, Iâll look into that also.
Try to explicitly cast the value to String. Something like this:
results.css({"width": width.toString(), "height": height.toString()});
That was the first thing I tried after seeing the error.
@Xanathon, can you let us know please if you were able to solve the issue you were facing by doing so?
At the moment I had to work on things other than Connect Designer and I did not have the time to test this yet⊠Iâll come back here and report my findings when I have the time to get back to it.
This is what I try, but regardless what value I set in width and height and regardless if I use pt or px the size is completely ignored.
if (record.fields.ExternesSystemBezeichnung == "Paradis pour gourmets") {
results.attr("src", "images/img/logos/PA/PD_FR_Paradis_pour_gourmets_500.png");
dimensions = resource("images/img/logos/PA/PD_FR_Paradis_pour_gourmets_500.png");
width = (dimensions.width/2);
height = (dimensions.height/2);
results.css("width: " + width.toString() + "px; height: " + height.toString() + "px;");
//results.attr("style", "width: " + width + " !important;height: " +height+" !important;");
results.show();
}
if (record.fields.ExternesSystemBezeichnung == "Paradijs voor fijnproevers") {
results.attr("src", "images/img/logos/PA/PD_NL_Paradijs_voor_fijnproevers_500.png");
dimensions = resource("images/img/logos/PA/PD_NL_Paradijs_voor_fijnproevers_500.png");
width = (dimensions.width/2);
height = (dimensions.height/2);
results.css("width: " + width.toString() + "px; height: " + height.toString() + "px;");
//results.attr("style", "width: " + width + " !important;height: " +height+" !important;");
results.show();
}
if (record.fields.ExternesSystemBezeichnung == "Welt der VerfĂŒhrung") {
results.attr("src", "images/img/logos/PA/PD_DE_Welt_der_Verfuehrung_500.png");
dimensions = resource("images/img/logos/PA/PD_DE_Welt_der_Verfuehrung_500.png");
width = (dimensions.width/2);
height = (dimensions.height/2);
results.css("width: " + width.toString() + "px; height: " + height.toString() + "px;");
//results.attr("style", "width: " + width + " !important;height: " +height+" !important;");
results.show();
}
p.s.: I will now see if the background image solution will work for me, but I doubt that, since I have images in different resolutions that need to be displayed correctly and that will probably not work with a div/box.
Hello @Xanathon,
Thank you for sharing the applied JavaScript code.
In response to your latest reply I would like to share the following questions with you:
<img>-element, for example?P.S. Please keep in mind that dimensions.width returns a value in points (pt).
Hello @Marten
Yes, I can confirm that the conditions work, since the three logos are correctly changed, just not resized.
I am targeting the <img> in a conditional script
I tried px only after pt did not work.
Thank you for answering the asked questions.
Please make sure to apply the following JavaScript code:
results.css({"width": width.toString(), "height": height.toString()});
Instead of the following:
results.css("width: " + width.toString() + "px; height: " + height.toString() + "px;");
Thanks, that was what it looked in the first try some time ago, the code posted above was the end of a long time of experimentation to get this to work. My latest version did not throw any syntax errors, anyway âŠ
But this also does nothing:
if (record.fields.ExternesSystemBezeichnung == "Paradis pour gourmets") {
results.attr("src", "images/img/logos/PA/PD_FR_Paradis_pour_gourmets_500.png");
dimensions = resource("images/img/logos/PA/PD_FR_Paradis_pour_gourmets_500.png");
width = (dimensions.width/4);
height = (dimensions.height/4);
results.css({"width": width.toString() , "height" : height.toString()});
//results.attr("style", "width: " + width + " !important;height: " +height+" !important;");
results.show();
}
My guess would be that since the returned value is not int or number but pt so the division does not work. That would be ⊠unfortunate âŠ
Replacing the following JavaScript code:
width = (dimensions.width / 4);
height = (dimensions.height / 4);
results.css({"width": width.toString(), "height": height.toString()});
With the following should solve this issue:
width = (dimensions.width / 4) + "pt";
height = (dimensions.height / 4) + "pt";
results.css("width", width);
results.css("height", height);
The last variation works, thank you.
Another question, my code now looks like this:
if (record.fields.ExternesSystemBezeichnung == "Paradis pour gourmets") {
showLogoImage("images/img/logos/PA/PD_FR_Paradis_pour_gourmets_500.png",4,4)
}
if (record.fields.ExternesSystemBezeichnung == "Paradijs voor fijnproevers") {
showLogoImage("images/img/logos/PA/PD_NL_Paradijs_voor_fijnproevers_500.png",4,4)
}
if (record.fields.ExternesSystemBezeichnung == "Welt der VerfĂŒhrung") {
showLogoImage("images/img/logos/PA/PD_DE_Welt_der_Verfuehrung_500.png",4,4)
}
else {
results.show();
}
/* showLogoImage
Parameter:
imgsrc = Pfad zum Bild in den Bildresourcen
teilerX = Divisor zum Verkleinern der Bildbreite auf gewĂŒnschtes Format
teilerX = Divisor zum Verkleinern der Bildhöhe auf gewĂŒnschtes Format
*/
function showLogoImage(imgsrc, teilerX, teilerY) {
results.attr("src", imgsrc);
dimensions = resource(imgsrc);
width = (dimensions.width / teilerX) + "pt";
height = (dimensions.height / teilerY) + "pt";
results.css("width", width);
results.css("height", height);
results.show();
}
Since I need the function to show/change the images in other conditional scripts I would like to make it global.
I created a Javascript file called âfunctionsâ in the Resource tree under âJavaScriptsâ, did cut the function from the consition code and pasted it into the functions file in the resource tree. But in the condition Javascript the function now is shown as âunknownâ.
Is the resource tree not the right place to do this? If not, how can I make functions like this global?
Thanks again.
To answer my question myself: I added the functions under Control Script, then it seems to be global.
But there is still the question why it is ignored if I add it in the resource tree under JavaScripts.
But putting global functions under Control in the Script pane is a workaround.
Please note that adding global functions to a Control Script is not a workaround but a solution.
The JavaScript files, as added to the JavaScript folder, are primarily for use in web pages and Capture OnTheGo forms. See âUsing JavaScript - PlanetPress Connect 2023.1 User Guide (link)â for more information.