Hi there! Welcome to OSU Drupal Droplets.
This is Joe Fenn with Oregon State University's Web and Mobile Services and today
we're going to continue our
exploration of the Paragraphs module by taking a look at our custom Three-Column paragraph bundle.
So the Three-Column paragraph bundle is
really versatile and flexible.
This can be a good thing and a bad thing.
If, for example, you want to have some kind of asymmetrical layout within your three columns, this is fantastic.
It allows you to be very fluid and to kind of do what you want. If, however, what you're looking for is a very
symmetrical layout you will need to make sure that your images are all processed properly before you start,
otherwise you're going to end up with a skewed looking layout.
So, that being said, I'm going to give you an example of a
somewhat asymmetrical layout
using a couple of square images and one that's more rectangular. So let's get started...
We've got our sample page here. I'm gonna click the Edit tab
and once we get in here
we will scroll down to our paragraph section and in the Paragraph Type
field we choose 3-Column and click the Add Another Paragraph button.
This will give us our 3-Column paragraph field set. Go ahead and click that 3-Column paragraph label and
you'll see that we have
three different
fields here. We have a Left, a Center, and a Right.
So one thing I'm gonna do here
I've got some text here saved on my buffer that I'm just gonna paste in.
Notice I've got a couple paragraphs here, I'm just gonna paste in the same paragraphs over and over again,
and then
what I'm gonna do is
pull up my images so
we need to change to our full HTML
text format. We need to do that for all of these because that's what gives us our Media button up in our toolbar.
And notice now, we have a Media button. Click in there to the top
and we're gonna pull up the first image. I
am going to browse to
my images. I've got some already here that I have edited.
Here's our first one
and next, give it a name
and hit Save.
And then let's go ahead and set this to oh,
just for the heck of it, let's go with 400 wide.
And actually, I lie. Just
for the heck of things, let's take a look at the original. Let's see what happens when we use the originally sized two images here.
Scroll down and hit Submit,
and we may want to center this,
and actually
we can go into our media settings and do this, so we'll Center align
right through here,
and hit Submit.
So we got that one done.
Now let's go for our center. So here in the center I'm going to use a more rectangular shaped image.
So we shall pull this up
And hit Save.
We will center align this one and original as well and hit Submit.
And then our last image...
One more...
Now there's different workflows
you can use. You could actually upload all of your pictures into the Media Library
ahead of time and then just get them from your library.
We're actually just uploading them on-the-fly.
You'll figure out the way that's best for you as you work more and more with media.
And we hit Save. All right center align and make this original as well.
So the center align is for the display as the audience sees it.
This right here when we hit center here. It's to center it within the text editor in the node form.
(If you were questioning why I'm doing that). Once you have everything
put into your text boxes come on down and click Save.
Notice you have a confirmation and then we come on down and
notice the asymmetrical layout
It's exactly what I was talking about. So
maybe you might want some variation in your display like this. If you were
wanting the center image to be the same as these two
you would have to have the same aspect ratio as these two. what you're seeing is a difference in aspect ratio here.
So that's pretty much it for our 3-Column paragraph bundle.
This has been Joe Fenn with Oregon State University's Web and Mobile Services and I hope to see you for future
tutorials.
