xmlgoogle-apps-scriptfeedatom-feed

rss/atom feeds: is it possible to resize a very large image?

I build an atom feed using Google Apps Script. Here is a toy example of only one entry:

function doGet() {
  var d = new Date(); 
  var feed="<?xml version='1.0' encoding='utf-8'?>\n";
  feed=feed+"<feed xmlns='http://www.w3.org/2005/Atom'>\n";
  feed=feed+"        <title>test</title>\n";
  feed=feed+"        <id>http://www.google.com</id>\n";
  feed=feed+"        <updated>"+d.toISOString()+"</updated>\n";
    var entry=  "        <entry>\n";  
    entry=entry+"           <title>entry one</title>\n";
    entry=entry+"           <author><name>author</name></author>\n";
    entry=entry+"           <updated>" +d.toISOString()+ "</updated>\n";
    entry=entry+"           <id>http://www.google.com</id>\n";
    entry=entry+"           <content type='html'><![CDATA["
   +"<p>lorem ipsum</p><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Mountaintop_of_Seehorn_%28Davos%29.jpg/1920px-Mountaintop_of_Seehorn_%28Davos%29.jpg' />" + "]]></content>\n";
    entry=entry+"        </entry>\n";
  feed=feed+entry;
  feed=feed+"</feed>";
  Logger.log(feed)
  return ContentService.createTextOutput(feed)
    .setMimeType(ContentService.MimeType.ATOM);
}

I don't know a priori which images I have to insert in my feed. Sometimes it happens that there is a very large image, like the one in the example. When reading the feed in some desktop or web app, the image is so large that it goes off the screen. It is an annoying issue for me.

Is there any way to instruct the feed to resize (only) large images, so that they fit the screen?

Using CSS, I would use the CSS line

img {max-width: 1000px}

but I think CSS syntax is not supported in RSS/Atom feeds (or maybe it is not respected by apps that read them).

Using html, I would use the following code:

<img width="1000" src="..." />

but this would rescale all the images, forcing small images to a very large and unnatural size.

So, is there any way to solve this issue, that is, to rescale large images?

Solution

  • In your situation, how about the following patterns?

    Pattern 1:

    In this pattern, the Internal CSS of style="max-width: 1000px" is used.

    <img style="max-width: 1000px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Mountaintop_of_Seehorn_%28Davos%29.jpg/1920px-Mountaintop_of_Seehorn_%28Davos%29.jpg" />

    Pattern 2:

    In this pattern, width="1000" is used. In this case, a script is used.

    var url = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Mountaintop_of_Seehorn_%28Davos%29.jpg/1920px-Mountaintop_of_Seehorn_%28Davos%29.jpg";

var blob = UrlFetchApp.fetch(url).getBlob();
var {width, height} = ImgApp.getSize(blob);
var maxWidth = 1000;
var maxHeight = 1000;
var res = width > maxWidth || height > maxHeight ? `<img width="1000" src="${url}" />` : `<img src="${url}" />`;
console.log(res)