Hi there! Welcome to OSU Drupal Droplets!
This is Joe Fenn with Oregon State
University's Web and Mobile Services and
today we are going to continue our
exploration of the Paragraphs module by
taking a look at our own custom Two-
Column paragraph bundle. So we're gonna
just jump right into things. We've got
our sample page here. I will click on
the Edit tab and we'll get in and take a
look at the node form. Let's scoot on
down the page. Here in our Paragraph
Type field we will choose 2-Column and
click the Add Another Paragraph button.
So, that's going to give us the paragraph
in a field set. Here we'll click on the
2-Column paragraph label and you'll
see that we've got two collections of
fields here. Okay, we've got a Left side
and a Right side. So, we're gonna start
with the left side. You can put
anything that you want really into this
text box. We're gonna actually just put
text here, so I've got a little bit of
text that I copied from Meet the Ipsums and I will just paste it in and, you
know, I want to come in and maybe add a
little bit of a header here. We'll do a
little Heading 3. What I like to
do is, after I have the text in there, I
just close that column field so it
shrinks things up a little bit. Now here
on our right side we're gonna actually
put a picture in. Okay, so we're going to
ignore this content area and, instead,
we're going to pull a picture up from
the computer. I'm gonna browse to where  I've
got some stuff here on my desktop and
we'll grab this picture and upload it
into our media library.
I'd like to give things real, good names.
Click Save, give it a second, and there you go
we've got our little thumbnail now. On
our left side we have text. We can
actually color that left side behind the
text if we want to, so let's go with a
black background in the left column.
Once we have all of that come on down
and click the Save button. Notice you got your
confirmation there at the top and as we
scroll down here we have our two column
paragraph. Now, this is gonna change a
little bit, all right,
depending on the size of your monitor,
the width, and actually the size of the
text that we have here. Also it's gonna
affect how this picture is shown so I'm
gonna go in actually and I'm gonna
delete this bottom bunch of text here so
you can see what happens to the image
next to it. We're just gonna get rid of
this guy then scroll down and hit Save
again.
Now let's see what we have. Notice the
picture's changed. What's going on is
these two columns are set up to be equal
height, so if they're set up to be equal
height and this side gets bigger and
bigger it's going to end up affecting
the positioning and the overall size of
this image on the right hand side. So
these are some things that you want to
keep in mind. Gone are the days where we
have fixed images, okay? This is
mobile-friendly so get comfortable with
the fact that this image here is going
to change depending on the size of the
screen and depending on the amount of
content that you have here. Just as
an example I'll squeeze stuff a little
closer in. Notice how, again, it changes
based on the size of this particular
column on the left. So that is it for our
Two-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.
