Forum OpenACS Q&A: Images and edit-this-page

Collapse
Posted by Eli Kroumova on
We are customizing edit-this-page and one of the new features we need for our project is the possibility to have images in the content.

The problem is as follows: we would like to give the user the possibility to upoload an image and reference it in the content. After the upload, three different images are created using the uploaded one:
- a thumbnail which will be used when the list of all images is shown or when the user needs it in the content,
- a medium size image which will be used by defalut in the content
- the original image.

We think there are a few ways of doing it:
- using the file-storage package,
- using general-images as in openACS 3.x
- using content repository

Which is the best way for doing this?

Collapse
Posted by Malte Sussdorff on
None of these :).

Install photo-book, upload pictures there. Write a browse functionality that let's you copy an <include src="/packages/photo-album/www/random-photo" photo_id="8107"> to the clipboard (or into the edit this page function). If you want to have multiple random photos, give the album or package_id instead.

If interested, check out http://www.sussdorff.de/about (stock ETP) or http://www.thecodemill.biz/ (with pictures enabled in logger).

Collapse
Posted by Windell Dubois on
Malte:
Did you mean to say "photo-album" instead of "photo-book"?

Eli:
I personally would rather use the file-storage/etp combination.  I have used it on some sites I have made, and linking the images to the etp is really quick and easy, I would recomend it if you are aiming to create a "centralized file/image management page", which is what I aim for in general. The only downside to this is that you would have to create the three images on your own.  I hope my comment helps you.

Collapse
Posted by Malte Sussdorff on
Did you mean to say "photo-album" instead of "photo-book"?

Yes, I actually did 😊.

Collapse
Posted by David Cotter on
I use HTMLArea in ETP that allows the user to choose an image from photo-album. When the user selects the add photo button from HTMLArea a popup shows photo-album. The user can upload/browse etc in photo-album and when a photo is picked the popup closes and the fields in the HTMLArea photo dialog are populated (via Javascript). The idea here is that users don't need to know any HTML.
Collapse
Posted by Cathy Sarisky on
David - that sounds like exactly what I need - any chance you can make your code available?
Collapse
Posted by David Cotter on
Hi Cathy,

Certainly - I'll dig it up and post it here (hopefully later today) - it's just a few small modification AFAIR.

Collapse
Posted by David Cotter on
This is strictly ad hoc of course. This is based on photo-album in 4.6.3 and HTMLArea 2.03. Here's note on  HTMLArea and ETP:

https://openacs.org/forums/message-view?message_id=115599

I think it's just these two files that were changed:

htmlarea/popups/insert_image.html
---------------------------------
var popwin = null;
function popupImage()
{
  if (! window.focus)
      return true;
  if (popwin != null) {
      popwin.close();
      popwin = null;
  }
  // I have a hardcoded URL to an instance of photo album mounted
  popwin=window.open('/img/resources/album?album_id=488', 'images', 'height=600,width=700,scrollbars=yes');
  return true;
}

...
At the bottom of the page I added the third of these buttons which calls the above popupImage() function
...

<BUTTON ID=btnOK style="left: 31.36em; top: 1.0647em; width: 7em; height: 2.2em; " type=submit tabIndex=40>OK</BUTTON>
<BUTTON ID=btnCancel style="left: 31.36em; top: 3.6504em; width: 7em; height: 2.2em; " type=reset tabIndex=45 onClick="window.close();">Cancel</BUTTON>
<BUTTON ID=btnChoose style="left: 31.36em; top: 7.000em; width: 7em; height: 2.2em; " type=submit tabIndex=50 onClick="popupImage()">Choose...</BUTTON>

needed in photo-album/www/photo.adp - I have it in a template (the template strips out all nav-bars etc so the popup looks OK
-------------------------------------------------------------
<SCRIPT defer>
function selectImage(url, title, width, height)
{
  window.opener.txtFileName.value = url;
  window.opener.txtFileName.intImageWidth  = width;
  window.opener.txtFileName.intImageHeight = height;
  window.opener.txtAltText.value          = title;

  window.close();
  return true;
}
</script>

photo-album/www/photo.adp
-------------------------
Add this "Choose" button where ever you like. I have a hardcoded URL '/img/res..' for the instance - would be easy I'm sure to generate this.
<form>
<INPUT TYPE=BUTTON onClick="selectImage('/img/resources/images/@path@/@title@', '@caption@', '@width@', '@height@')" VALUE="Choose this image"></TD>
</form>

Collapse
Posted by Tilmann Singer on
Malte, David, I can't see in either method what actually ends up in the contents field of the etp page, if anything.

In Malte's example it appears to be an <include > tag, but to my knowledge you can't just insert that into etp content, it won't be rendered. Also an <img > tag won't work for XSS security reasons. So how is the image actually rendered with these methods?

Collapse
Posted by Nima Mazloumi on
Do we have something like a wiki in OpenACS where users can create their own pages and link to images?