Responsive image?

Responsive image?

by Francis Vendrell -
Number of replies: 3

Hello,

I would like to use dataform embedded to show a random responsive image on the home page of my Moodle site.

By responsive, I mean an image whose height and width adapt automatically to the size of the browser screen (with the ratio height/width constant).

Although I it is quite easy to adapt automatically the width,  I don't see how I can change the height accordingly.

By using something like [ [ Image:tn ] ] one can get a small image.

Is it possible to get a responsive image?

Thank you for any help provided

Average of ratings: -
In reply to Francis Vendrell

Re: Responsive image?

by Itamar Tzadok -
In the picture field settings you can set the display dimension to 100%. To apply the effect only in certain views, you can use css instead of the field setting. Add to the css tab something like the following definition:

container-selector img {
      width: 100% !important;
}

By the default the display preserves ratio, so height will be proportional to the width.

hth smile
Average of ratings: -
In reply to Itamar Tzadok

Re: Responsive image?

by Francis Vendrell -

Hello Itamar,

It is not clear for me what you mean by "picture field settings".

Could you please clarify?

Average of ratings: -
In reply to Francis Vendrell

Re: Responsive image?

by Itamar Tzadok -

My oh my (bad)! The settings dropped in the shuffle of 2.6. Here is what you should see in the field's configration form:

And there you can set the display to 100%:

This has been fixed for the next release. See CONTRIB-5834 for the git commit.

hth smile

Average of ratings: -