How can I add a small delete icon to the top right corner of each image while maintaining the original masonry layout? Below is the code after I modified the source code and the running effect of the code. However, after running, the images are no longer displayed in the masonry layout. How can I solve this issue? #54
private addImagesToGallery(images: IMasonryGalleryImage[]): void {
if (!this.grid) {
throw Error(
'Grid element is not yet ready, are you trying to add image too soon?'
);
}
const imagesWrapper = this.renderer.createElement('span');
images.forEach((image) => {
const imgContainer = this.renderer.createElement('span');
imgContainer.className = this.getImageClass() + ' imgSpan';
// generate unique image id
const imageId = this.getImageId();
// create element
const imageElem = this.renderer.createElement('img');
imageElem.setAttribute('id', imageId);
imageElem.setAttribute('alt', image.alt ? image.alt : 'no description');
imageElem.setAttribute('src', image.imageUrl);
// note - images are hidden by default and should be shown only after they are loaded
imageElem.setAttribute(
'style',
`display: block; width: ${this.width}px; margin-bottom: ${this.verticalGutter}px`
);
// imageElem.className = this.getImageClass();
imageElem.addEventListener('click', () => {
this.handleClick(image);
});
// store guid with this image
this.activeImages.push({
id: imageId,
image: image,
});
this.renderer.appendChild(imgContainer, imageElem);
const deleteIconContainer = this.renderer.createElement('a');
deleteIconContainer.href = '#';
const deleteIcon = this.renderer.createElement('img');
// deleteIcon.setAttribute('id', this.getImageId());
deleteIcon.setAttribute('src', this.deleteIconBase64);
deleteIcon.className = 'delete';
this.renderer.appendChild(deleteIconContainer, deleteIcon);
this.renderer.appendChild(imgContainer, deleteIconContainer);
// add to dom and mansory & refresh layout
this.renderer.appendChild(imagesWrapper, imgContainer);
});
// add html to dom
this.renderer.appendChild(this.grid, imagesWrapper);
// add images once they are loaded
const imgLoad = imagesLoaded(imagesWrapper);
imgLoad.on('progress', (instance, image) => {
if (
image &&
image.isLoaded &&
this.msnry &&
this.msnry.appended &&
this.msnry.reloadItems
) {
// this.renderer.appendChild(this.grid, image.img);
// unhide image
// this.renderer.setStyle(image.img, "display", "block");
// remove image from gallery
this.msnry?.addItems?.([image.img]);
// refresh layout
this.msnry?.layout?.();
}
});
private addImagesToGallery(images: IMasonryGalleryImage[]): void { if (!this.grid) { throw Error( 'Grid element is not yet ready, are you trying to add image too soon?' ); }
}
.imgSpan { display: inline-block; position: relative; }
.imgSpan .delete { position: absolute; top: 0; right: 0; width: 16px; height: 16px; }![image](https://github.com/Enngage/ngx-masonry-gallery/assets/128599027/4826ad38-ecbc-445e-82ca-b8c593d150d0)