Display Image with a nice caption

Support
#1

Hi,

I’m dynamically inserting images into a page by using componentsFactory.createComponent(Image.class);

What I would like is a nice little caption to label them - is there a good way of doing this anyone has used before?

Many thanks

#2

Hi,

Have you tried to add the caption attribute?

Regards,
Gleb

#4

Hi,

Yes I have but nothing seems to appear next to the image?

Thanks

#5

It seems strange, in my case I have a caption above the image. I use the following code:

<image id="image"
       caption="Caption">
    <url url="https://www.cuba-platform.com/sites/all/themes/cuba_adaptive/img/logo-cuba.png"/>
</image>

Could you either attach a sample project that reproduces the problem or share a code snippet?

Regards,
Gleb

#6 
    Image imageField = componentsFactory.createComponent(Image.class);

    imageField.setHeight("150px");
    imageField.setWidth("150px");
    imageField.setScaleMode(Image.ScaleMode.CONTAIN);
    UrlResource resource = imageField.createResource(UrlResource.class);
    try {
        URL imageUrl = new URL(url);
        resource.setUrl(imageUrl);
        imageField.setSource(resource);
        // I try to set the Caption Text here
        imageField.setCaption(caption);
        container.addField(container.createField(fieldName));
        container.getFieldNN(fieldName).setComponent(imageField);
    } catch (IOException ex) {

    }
#7

From your source code, I see that you use FieldGroup. FieldGroup takes care for displaying captions, but it doesn’t get caption from the Image component. For now, I can suggest setting caption to the FieldConfig instead of Image component, for instance:

FieldGroup.FieldConfig fc = fieldGroup.createField("image");
fc.setComponent(imageField);
fc.setCaption("Caption");

fieldGroup.addField(fc);

Thank you for reporting the problem, I’ve created a YouTrack issue.

Regards,
Gleb