This forum has moved, please join us on github discussions. We will keep these old posts available for reference. Thank you!

Custom Image Gallery

#1

What are all the possible sizes for images?

Essentially, how do i get a list of images that have been “attached” to the page? I am trying to create my own image gallery since the default gallery is limited. Does that mean I should create my own widget that extends ‘apostrophe-images-widgets’?

So once i do that, and add the widget to a page, and add images, how do i get the list of images? I want to get a thumbnail size, and a larger size of the image to be placed in a modal? What are all the possible sizes available?

#2

This is now answered here:

#3

I can not post reply on Stackoverflow yet, sothat I want to ask here.

After I add to my app.js:
‘my-slideshow-widgets’: {
extend: ‘apostrophe-images-widgets’
},

I got this error:
Error while constructing the my-slideshow-widgets module
TypeError: Cannot read property ‘name’ of undefined

I tried to finish ‘my-slideshow-widgets’ folder but still got this error.

#4

I’ve the same problem…
The a…-images-widgets code in index.js depends on the a…-images module.
(Edit: I’ve remembered this wrong… it comes from a…-pieces-widgets. But this gets extended in images-widgets)
So with your module my-slideshow-widgets… which should be called
my-slideshows-widgets you will need a my-slideshows module, too.
This can extend a…-images module.
But then you will have an additional and separate image “category”.

I’m looking for a solution to use apostrophe-images in an own-images-widgets which extends apostrophe-images-widgets.

I simply want to upload images, but when adding the images to the page I need some additional fields and different rendering. I think for this the best way is to create an own widget which extends the existing apostrophe-images-widgets.

But how do we get this to work?

TypeError: Cannot read property 'name' of undefined
at beforeConstruct (C:\Users\makolb\Documents\Visual Studio 2017\Projects\alpcal\touring\node_modules\apostrophe\lib\modules\apostrophe-pieces-widgets\index.js:98:31)
at beforeConstruct (C:\Users\makolb\Documents\Visual Studio 2017\Projects\alpcal\touring\node_modules\moog\index.js:239:21)
at C:\Users\makolb\Documents\Visual Studio 2017\Projects\alpcal\touring\node_modules\moog\index.js:250:22
at iterate (C:\Users\makolb\Documents\Visual Studio 2017\Projects\alpcal\touring\node_modules\moog\node_modules\async\lib\async.js:146:13)
at Immediate._onImmediate (C:\Users\makolb\Documents\Visual Studio 2017\Projects\alpcal\touring\node_modules\moog\node_modules\async\lib\async.js:157:25)
at runCallback (timers.js:789:20)
at tryOnImmediate (timers.js:751:5)
at processImmediate [as _immediateCallback] (timers.js:722:5)
#5

Ok. I’ve an answer for this now by myself…
use:

extend: 'apostrophe-images-widgets',
piecesModuleName: 'apostrophe-images',
#6

But then I’ve only an “Add undefined” in the browser?!

Edit:
I don’t extend now apostrophe-images-widgets, but only apostophe-widgets and do a join:

name: '_image',
type: 'joinByOne',
withType: 'apostrophe-image',
label: 'Image',
required: true,
idField: 'imageId',

This does what I’d like to do.

But nevertheless it would be interesting to know how we can extend apostrophe-images-widgets.

#7

I solved this problem by this way, too.
But I not sure about connection of Post and Image, still testing.

#8

i have the same problem, but i cant get it to work, can u give me your code for widget index,js and widget.html, thankx on advance