Image Styles are not applied in news pattern

Hi all,

1. Image Style in View
I have a view with people in which they all should have the same image style. I created one called ‘people’. When I look at it in the view configuration, it’s fine and works. When I integrate it in a Landing Page section the pictures are different in size again. Is there something I need to specifically change for it to work?

I have changed the image style in the configuration of the field that is added to the view.

2. Image Style in News Full Content Pattern
Next Image Style which I have created is called ‘news’ for an image field which I am displaying as the image in the news full content pattern. It doesn’t work. Pictures are still original size. See example here.

I have changed the image style in the manage display configuration of the content type in full display mode.


I guess my questions lead to the correct configuration of image styles in views and content types?

Thanks,
Nadine

I visited the landing page and the pictures have the size you have set them. Are you sure it is an issue?

This is a bug, there is an override in the pattern that makes the image expand. I will let you know when it is fixed.

Konstantinos

I tried something this morning, that’s why you probably saw the right one? (I am not sure).

Regarding the image style, do you have a suggestion for an effect that makes them look more even? For example some pictures are still a little bit smaller than others (in height or in width).
If you compare the view and the landing page then you might see what makes me wondering. The style how I want it is like in the view. See what I mean?

And also, the sorting of the view (from this post) only works when I choose the format show “Fields”. I want it to have a more neat and tidy look. Can I influence the look of the fields with a pattern/format within the view? Or do I need to change to show content (teaser) or something?
I tried a different view when you scroll down the landing page

Okay, cool. What maybe a temporary solution is to not display it in the whole display-width. At the news section of the cern homepage, you had probably a block on the right? If I don’t have a block, can I change the width of the content (leaving the pictures not that big)?

Nadine

I am having a look for that

Yes if you add a block on the right it will probably be fixed. Give it a go.

Hello Konstantinos,

Did you have any time to look at the problem with my view and landing page display of pictures?

I’ve added meanwhile a third view to try (now at the top of the landing page). Same kind of question: Can I change the style of the title with CSS (smaller font-size)? Can I add a CSS class to the view?
And same thing: It seems to only sort correctly with the taxonomy terms when I choose ‘show fields’ in the view. How can I fix it to have the sorting correctly?

So two options: Fix the image style of the first view display OR sort the third view correctly and change style.

If you have another idea for this view, I’m happy to try.

Kind regards,
Nadine

Hello Nadine,

I applied a fix for the news pattern overriding the styles and it will be deployed this week.

Yes if you override the theme

Yes by using the css class option of a view but this is not possible if you are using one of the CERN display formats due to a bug.

Can you send a link to the view and explain what kind of sorting you want?

Konstantinos

Can you show me how to do that?

Yes. I have 3 view experiments (all displayed for now at the same landing page):

  1. People View: Grid with Show Fields, sorting correctly, Image Style not correct (see difference between View and Landing Page section 2). Sorting should be like in this post, ordered first by taxonomy Affiliation and then within the affiliation ascending by surname (for sorting). It should display the name of the affiliation (in this view correct). The show field format doesn’t look that pretty.

  2. People View: Because I want to be flexible in what the view shows with view modes (full, teaser) I changed the sorting to Grid with Show Content Teaser (Teaser has the Preview Card as Pattern, this is a trial). It sorts by affiliation and name, but the Affiliation name doesn’t gets displayed. (View 2)

  3. People View: Same as second view but Show content Full. It looks now the prettiest from all the 3 views, just the title should be in a smaller font-size. (View 3)

@kplatis Did you had some time to look at my problem?

Hello @nweber,

Regarding the image style not being applied in news patterns, this issue must be resolved in the version that was applied today. Can you confirm?

You can install the override theme of the CERN theme

To start with, the issue is not in the landing page, because as you can see the same styles are applied if you display the view in a page or in a landing page.

Regarding that, I think there is a confusion between the sorting factor and the format (Grid). The sorting factor has to do with the criteria based on which the content will be sorted. The format has to do with how the content will be displayed (eg. table, grid etc).

In general there are two ways to select which fields will be displayed in the view and what format they will have:

1) Create a display in the content type

You can do that by accessing the “Manage Display” page of the content type. In your case its this page. In this page you can setup pre-configured displays that can be used to display the content in different situations, including views. In this interface you can select which fields will be rendered in this display and also what characteristics each field will have (eg. size of images for image fields, number of characters to be displayed (for text fields) etc)
So in your view you can select: Show Content | Teaser, where Teaser is the display you have created in manage display interface.

But why when you select to show content from a display you cannot add fields in the view and you see the message “The selected style or row format does not use fields.” ?

This happens because in that case the fields are fully controlled by the display. In other words the display “hijacks” the fields.

Why the sorting does not work though in that case?

In your sorting you have selected to sort them by the affiliation. However in this view, you have not grouped the data yet so the view does not recognize the taxonomy of the affiliation. Here is the trick though: In order to group by a field you need to have fields. But as already mentioned above the fields are “hijacked”. So in that case you can enforce the fields usage like displayed in the GIF below. After grouping by Affiliation, the sorting should be working.

2) Directly in the view

If instead of Show Content you select Show Fields then you can manually select which fields will be displayed and with what characteristics (eg. image size, number of characters etc). So when you select to Show Fields you can see that the you can manually add the fields in the view and when you select a field you can configure it (eg image size)

I saw that you have experimented already with ways to show fields so I hope this explanation makes it a bit clearer about the different ways.

Let me know if something is not clear

Konstantinos

Hello @kplatis,

Yes, it is applied. The image style gets respected now, I can confirm.

Perfect, now it sorts correctly! Thank you very much for your great explanation!

Kind regards,
Nadine