Dataform-Picture field

Dataform-Picture field

by Thibault Hermes -
Number of replies: 2

Hi,

In a dataform, a picture field can contain several pictures (same for documents). I am trying to display these several pictures properly in grid view and I cannot manage to do that. Moreover, when using the tag pictures:url contains the link of all images, one after the other so it is not usable when using it in a <a> tag.

Has somebody already achieved to display and link several pictures from the same entry?

I am using Moodle 2.2 and trying to create a dataform that would basically be used as a DB with one entry per user, so all pictures have to be on the same field. It looks like below in my grid view.

 

Any idea would be appreciated. Thanks a lot!

Thibault

Average of ratings: -
In reply to Thibault Hermes

Re: Dataform-Picture field

by Itamar Tzadok -

You can change the layout of the images by css.

The default pattern of the picture field would create an img tag for each image. You can set the css of these img tags to add border, padding and margin. If you want a sort of photo album page with the 3 columns, you can enclose the pattern is some container html tag (e.g. div) with a fixed size and then with the image size fixed (either by field settings or by css) you can control the number of columns (number of images in each row).

Recent versions of the Dataform display the list of files in file and picture fields such that each file in a new line. There you can set the respective br tags to display:inline to remove the line breaks.

With more complex layouts you may need to float the images. When floating you also need to clear the floating after the last floated image. That can be achieved by adding something like

.photos:after {
    content: "<div class="clearfix"></div>";
}

(where 'photos' is the class name of the html container of the images).

hth smile

Average of ratings: -