Articles, Blog

Using “Groups” in Breakpoints and Picture module (Drupal 7) for adaptive images

Hi everyone. My name is Bruno Mateus. I’ve made a
couple of videos a while ago regarding the usage of the Breakpoints
and the Picture’s module in Drupal 7, in order to serve us with adaptive pictures. Those videos have been pretty
successful and I’ve been getting quite a few
positive comments, so thank you so much to everyone. I’m glad I could help. I’ve also been getting certain recurring questions, mainly regarding certain aspects of
these modules that I haven’t dwelled into, so I’ve thought of re-creating a little bit this series of videos in a more structured way. So I hope
you enjoy it. I also hope you comment regarding the
new and format that I’m trying. Just let me know if I’m on the right
track or not, ok? Thank you so much. So, on today’s video, we’re going to talk about how the
Breakpoints and the Picture module work together in Drupal. So, we’re going to to make a basic overview, just to understand
the flow of data and, the better you understand the the basic flow, and learn how it works,
the better for you. So, these are two different modules: one
is the Breakpoints module. The other one is the Picture’s one, and the Breakpoints module
is more than just, has more than just this purpose, so it
does actually do quite other things. Not on its own, but it actually connects to other modules, that allow the information that the
breakpoints module retains and allow the Breakpoints to trigger
other things, like will seem in different videos later on. So, the breakpoints module allows you, basically, to set up a list of breakpoints on your theme, mainly by defining media queries, the same way you could define them on CSS. Exactly the same style of working. In
the Breakpoints module what helps is that we… those media queries then can trigger other
events on Drupal. So, the Breakpoints can (and should) be
grouped into sets. I’m you should use ads to address
different areas of your design and here as a quick example if you have
an old width to images on that node one for
instance is the main imagine another one is a bit from you’ll have different image sizes or on you know medial sizes and I’m defined and as such they
should also have and different image sizes and them they will have different sets ok images so the red points can also
have a multiplier selection that allows you to use routine and other
high-density this place will cover this will be the theme of the
next few that also later on so we’re going the pictures
module what’s the bitches muzzled those really is it it maps the break
points that you defined in the previous model and connects them to the wood styles and so preach breakpoint over certain group you’ll have a new
much style attached to it and then it renders the
image according to the map styles the image
rigid must be replaced by the pictures Richard and this is a recurring question
that we sometimes have am when people are using these two
models for the first time the always almost always forget and to
replace the image Richards by the pictures which
should on the Display tab are the content-type all also the split asunder screencast so
just to summarize the sequence of events is grossly of course this the brothers WYD will trigger comedic worry which is defined in break point axe in
the breakpoints much so the pictures the picture model
becomes aware of it ands am will assign to the breakpoint axe not to
define year an image style of X becoming aware of it
so the picture module will render the appropriate
version of the image so basically the breakpoints and has the the with defined the pictures
model signs each well breakpoint to a certain style and and then detecting the widths it will rendered appropriate
version his is year and seen then then told so I’m going to show it to you
it’s it’s probably easier seen here you’ll have a regular ’em note this not has one big image and the
big little bit of by the text arm while do earners on this now old minutes creates let’s do everything
from scratch so I’ll create a new field you don’t I only have this is the main image and this is the
body so I’m going to create the second image second image and this will have and image fuel-type and deal the widget here from it’s an
image some it will be a public image and law require no default file selection a seamless I’ll just a
minute like it is so that’s it we have on newfield so let’s see our content still the same
let’s edit our content inlets and a new image so home which the file lets choose this immature looking we’ll save it so this is the original emerge and I
don’t want it to be this big this is too much so will go to the regular emits tons and I’ll create a new style saying and seconds the emerge okay be much time you came so and will also say that this ima the
certain image will have a skill and crop of it’s a some so yeah 200 but 202 scored came so this will be the actual the stop signs
love it um so nothing too big Liffe girl who to hear nothing still nothing happens because I now need to assign the new image style to this so I’m going to
say that all content on apps all for static will display the mmm the second image will display the this media here but I’ve created no such it will have this house but decides is
not adaptive so while the first one hears on see it still marked doesn’t have a new rules
to trigger its dimensions according to the breakpoints good so in here you can actually see the
phone result but let’s focus on this one so looking must do we must go to the break
point known to break points you can see here
already the the breakpoints all the reagan of every group and we’re going to and
new group this new group will be called second the image and I’m going to select break points for mobile size no science to personalize
little and the desktop awesome so we will
create a new and what this will allow me to do miss it doesn’t have all the same break
points this like the the first one a.m. but I’ll show you know why dis this saloon really matters when you come here to the pictures group
now you have this second image group night is created from two break points and here is where
you need to assign the different sizes so I know that the
desktop version hands the second image them which is two hundred by two hundred
truck that’s okay but then only to create others other versions for the smaller lemme for the smaller break points and I
couldn’t do that if I use only one group because do all images
would then have these you mad styles and they cannot have this
solely to create them and breakpoints has a very nice way of
doing a big set of from like it’s like a small
batch file like it’s been in the first few a images so firm they will have this time second and then it do create all these versions
mind you these are just placeholders so you send us automatically to dis you here human styles this is where we are now and he created automatically the place alders for us to create the new styles but we still
needs to and the instructions inside so under the this hume just soon it’s just annoying
this I am this one was when I created it has
a two hundred by two hundred skill and drop and crop effect and now we’re going to moved on mars so this one
minute scene ever to call former I actually was to horizontal is the the one right after the stop the free go down so I’ll leave it at that same
signs or not just slightly 180 my womanly duty the and Sun that’s cool to the vertical one so when it’s on a vertical I’ll have it I wanted to have 140 140 I’m not making any design assumptions
I’m just a displaying what it could be and then owner Owen I wanted to harm from let’s see you on the 100 by 100 and just for the sake of
demonstrating this on the more while one I’ll actually
increase its to home to 200 again so I’m saying that when it’s on a mobile
version a tool actually be displayed in different area so it
will have a different sites okay so what now we must do is computer the pictures
module second imaging in the group and we must
assign to each and every one of these the new remit styles that is created so on the horizontal for the horizontal
breakpoint whenever the the screen size has a
minimum of six hundred 761 pixels but is less than 960 we’re going to use this from which I believe it was about 180 and when it’s a
vertical it when it’s wickets between 461 in 1761 it we will use this vertical mmm human style and the normal one to the
number one and the mobile to the mobile only to get
them the picture that’s its it is easy and
there’s nothing to it and if you come here it should work I know it won’t ritual hmm so as soon as he tried to to reduce it this should have been changing signs but
it’s not the problems as a little before well the
most the recurring problems know that people
forget this to come here to the display and here on the second image are just a
few little we must on you must change that widget
its displaying on so it’s currently displaying it on the
form on the much will not but you must say it’s a picture and when
you say it’s a picture we now have the possibility of choosing which group will use so the system doesn’t know what this second
image shield is because he doesn’t attach to any anything the way we we have to link it his wages using the picture group so
hugh say this particular field will have images that must be transformed using the
instructions on the seconds imagine group who lived the fullback as default NBCC and now is taking a bit of time because he was
actually probably construction on several teams is already so at sea haha when we are not larger than 960 you can analyze the picture size its 200
but two hundred and it has 18 to kill a vital signs so everything’s fine and if we move below loops let’s apply to you it’s already one hundred the in eighty
by 180 and the file itself is 180 by 180 and again if you lose this emerge is now 140 my constructed and the signs is dropping awesome and
finally if we see it as in a little while I meant to say there is much bigger and
the defaults to this month so use now actually correctly wheeler responding to work he
said and it is an adaptive image so I hope you understood how easy it is a.m. one final thing that there’s some
people ask me is one is the fall clean what should it do well what this
means is if the browser is unable to display the the done dick corrects image because this picture ’em this picture model uses a certain scheme
with it loads basically the has the real reference to
all the images and then it only loads the one that them
he is it wants to do this to show you but imagine if use a brother that is a
bit tools what happens is am it will show you the fall back to do home not to do you select in here so when it’s automatic it will always
use the mmm what is defined as the desktop but you can of course a no always use the a larger one are smaller one or whatever science he must Ali want so on I hope you enjoy them and term I’m going to prepare second you
regarding routine the DesPlaines and that will
take care the multiplying that you always see in here K so I thanks so much and out to some my


  1. Tom McM Author

    Thanks for taking the time to produce this very helpful and well explained video. I hope you will produce more drupal videos as your a great teacher.

  2. rwilson0429 Author

    Yes, this is a great instructional video and all the main points were covered. Because of the great job you did, I have a much better understanding of how the break points module works with the picture module. Thank you.


Leave a Comment

Your email address will not be published. Required fields are marked *