2

I am trying to achieve a masonry-style blog post display using Views, which will look similar to this: http://blog.iamcreative.me/wp-content/uploads/2012/10/MASONRY.jpg

I have an image in each result, but I want the Image Style to vary (e.g. 400x300, 400x400, 400x600) between the results. I would then use the Masonry Views module to achieve the masonry functionality.

Does anyone know how I can vary the image styles between the results so the post pictures will be of varying sizes?

Thanks in advance :)

Improve this question
1
  • 1
    I saw that you already got your answer, I just want to expose you to a great module that helps you achieve the masonry effect with configuration only - drupal.org/sandbox/nyariv/2223945 Commented Mar 14, 2015 at 21:38

2 Answers 2

Reset to default
0

It's quite a broad question – so my answer will also appear to be rather broad: there are various ways to achieve this. From fields, that would let an editor select an image style to views in combination with display suite – and you yould even achieve a similar effect using css-only. I'll skip the views+display_suite and instead just add some thoughts about the other two options, that might appear to be a bit more quick-n-dirty, but could still very well let you achieve what you're looking for – hope it helps:

  • style selection by additional field: for example have a select list offering different picture styles e.g. "portratit", "square" and "landscape" and then preprocess your images according to the selector choice, using a picture style – inside your template.php. This might sound a bit complicated at first, but at least for me this works perfectly well. And it's quite editor-friendly in my opinion.

  • css: if you just want to fit entries always in the same grid the easiest way could be to use css3 selectors like "first-of-type" and "nth-of-type(n)" (find out more e.g. here on w3schools.com: http://www.w3schools.com/cssref/css_selectors.asp)

Improve this answer
4
  • I tried to go the route of Display Suite... but the CSS method was far easier/quicker/nicer/smoother to implement. Thanks for the idea, I wouldn't have thought about using CSS selectors. Commented Mar 10, 2015 at 0:55
  • @caustic The problem with using pure css is that your image styles will not vary. You'll be locked into one image aspect ratio which will most definitely not fit all your masonry boxes. Commented Mar 10, 2015 at 1:16
  • @Patrick Ryan what do you mean with "your image styles will not vary"? YOu could predefine a set of css-styles like "1st item portrait; 2nd item square; 3rd item landscape" and have another set "1st item square; 2nd item portrait; etc." and then let the editor switch between the sets with one list selector. Maybe it's a bit less flexible than the DS approach, but could also be a bit easier to use for the editors. Commented Mar 10, 2015 at 8:23
  • I guess Display Suite would be the way to go if there were big differences between the image styles. Truthfully I only need two image styles, one default size and one large. The way I've done it is by giving the img a div container with overflow: hidden, and then I used nth selectors in CSS to make every other image width 200% and center aligned inside the img container div. It works by giving a nice zoom of the image, and is twice the height and width as default image, just that the width overflow is hidden. display suite required lots more styling and seemed too heavy for a little variation. Commented Mar 10, 2015 at 11:32
0

If you enable Display Suite, you will get a format setting to choose a different view mode for each item.

You'd just need to set up each different view mode in display suite, then create your view and set each row to the needed style.

enter image description here

Improve this answer
1
  • Thanks, I tried this and it did work; I never knew that Display Suite allowed for alternate view modes. Commented Mar 10, 2015 at 0:54

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.