image-widget | Simple image widget | Content Management System library

The apostrophe-images-widgets module uses that double image technique specifically for when it contains multiple images and is acting as a slide show. That technique helps to maintain image appearance when the images are different sizes. That is why the apos-slideshow .apos-slideshow-item img CSS selector is hidden. The intention was that only the background-image would be visible.

As an aside, and as a member of the Apostrophe core team, I can tell you that this is an outdated strategy that we don't use anymore ourselves very often, if at all. But it's hard to remove or significantly change things like this once hundreds of sites are using it.

If you are making your own images widget (which would be a good idea), I would not use both the background-image wrapper and a normal img tag. Decide on which works best for your use case. There are still good reasons to use both (maybe other variations on a slider), but that depends on the project.

If your goal is to use the focal point tool, a normal img tag with a normal src attribute won't be enough. One way is to use a background-image attribute on an element that you have set the size for some other way (e.g., width and height styles) with the background-position using the focal point values. Another way is to use object-fit instead, with the focal point values in an object-position style.

Try resolving the resized image's image provider:

Hope i'm not too late. I recently stumbled on this issue too with template approach since reactive form did not fit what I needed to do...

The issue is something to do with ControlValueAccessor that your component need to implement. However I couldn't get that working.

See: https://github.com/angular/angular/issues/9600

Solution provided by andreev-artem works well, and I also added my solution to wrap it inside ngModelGroup instead of in the form's root object controls property.

For your case you're not using ngModelGroup you could just have this directive

Since the underlying jQuery plugin that Apostrophe's slideshow depends on does not support the feature you're asking about, you'd have to PR that functionality into the plugin (found here https://github.com/punkave/jquery-projector) and then PR the update into Apostrophe core.

Alternatively you could write your own images widget and bring your own slideshow plugin to the party. You'd initialize the slideshow plugin in your widget's player, similar to player snippet you pasted above.

A popular slideshow library many Apostrophe developers bring to projects is Swiper https://idangero.us/swiper

You can see an example implementation of Swiper in Apostrophe in the Open Museum project https://github.com/apostrophecms/apostrophe-open-museum/tree/master/lib/modules/slideshow-widgets

Use the built-in apostrophe-images-widgets widget to select the image

You should install and enable php-soap extension.

Okay, so i found the Solution myself. The problem was that the permissions i added were not the correct ones. I found the "Edit Group" area in the Apostrophe Interface. There was a list of checkboxes with permission to add to my group named "editor". After i selected all the permissions i needed, i logged my current User and copied the permission to paste them in my app.js

Try removing align-items: flex-start from .panel-grid. It's overriding the stretch default.

The reason for the error is most likely that in SelectDefaultImage, you call app.modal from within the render method, and app.modal is this.refs.modal.updateProps, which does a setState. If you put the app.modal call in showImageModal, I expect the error to go away. However, setting the state of a another component by means of refs and globals is a bit of a React antipattern, so I would recommend to do some refactoring and use props to pass the data.