Pictures in Responsive Design

Beginners
1

Can you provide different image sizes/formats in drupal for responsive design or does drupal manage the image resizing itself?

2

Hello Nadine,

  • Drupal is quite flexible when it comes to image styles. If you visit /admin/config/media/image-styles, you can find the default Drupal styles. You can also create your own styles.
  • When it comes to image responsiveness, it is added by the CERN theme, not by Drupal. In general it is the theme that defines how your site looks like. The CERN Theme is based on Twitter Bootstrap so it takes care of responsiveness using the class img-responsive.

There are two types of images uploaded in a Drupal site:

  1. Images uploaded in an image field: In a content type you can add an image field so that you will be able to upload the images in your content. The CERN Theme automatically adds the img-responsive class in the fields
  2. Images uploaded using the CKEditor: For example if you have a body field in your content type, you can add an image. In that case the theme makes the image responsive by default.

Either way uploaded images are responsive.

Hope that helps. Let me know if something is not clear.

Konstantinos

2 Likes
3

Geia sou Konstantine,

I actually started to build a website for a club at CERN based on Drupal 8 and actually i am looking how to add albums with pictures!
I would to know what is the best procedure i have to follow, in order the website remains “light” by having HD pictures!

Thanks a lot in advance!

Best,
Kostas

4

Hello Kosta,

There are different ways to do that, can you give more details what you have in mind? Do you want it to be a separate page with a gallery? Do you want it to be a standalone page or to create a pattern to re-use?

Konstantinos

5

Hi Konstantine,

So thanks for your reply!
To have a more clear idea for what i am talking about, see the website below.
https://ctmc.web.cern.ch/

Let me summarize my thoughts…!

First of all i would like to create (under the menu RC Airplanes and RC Drone inside the menu of Projects) albums with description concerning each model. Also what concerns me is what would be the best quality for those pictures in order the website to be fast while opening a picture but at the same time the resolution to be as much as better (i know these two things doesn’t go together but i would like to know the best combination).

My question is how to create these albums?

Thanks in advance for your answer!

Best,
Kostas

6

Hello Kosta,

My suggestion is to create Landing Pages for each one of the models. Then link the landing pages from the main menu.

The Landing Pages can follow the following pattern:

  • Hero Header
  • Text Component (that contains description of model)
  • Image Gallery (of model)

That way you can present description of your models + nice pictures.

Regarding the sizes, they really depend on what kind of pictures you will upload/fetch. In general the loading time most of the times depend on the images (since they are the “heavy” parts of a page). Since the theme is not optimized yet, the loading time depends on the total size of the images. If you have 5 pictures of 2 MB each, it will take as much time it takes to download 10 MB (depends in your connection)

Let me know if you have any concerns and/or questions.

Konstantinos

7

Hi Konstantine!

Thanks a lot for your clear answer and you fast reply!
Well, i did quite a big progress! Thanks to you!

i added albums in the website easy and without problems!

I have another question! Can the logo to be a little bit bigger? Is it possible to change its dimension?

Thanks again for your valuable assistance!

Best,
Kostas

8

Hello Kosta,

Unfortunately the size of the logo is predefined from the theme and cannot be changed unless you override the theme. There are tips that you can use: Eg if your logo has text you can add the text as site name or site motto.

Let me know if you have more questions.

Konstantinos

9

Thanks a lot Konstantine!