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 take a look at how
to create a One-Column with Background
Image paragraph bundle.
So, we're going to jump right in with a sample page that I created here. Just go ahead and click the
Edit tab. So what's going to happen here
when we open the form is we're going to
look for a section here that says
Paragraph. Now, depending on who your
architect is for your site, this could
appear in a different position on your form.
It might even be tucked away inside of something like a field set. Just look
around for the Paragraph type field here. That's your indication that you've got
Paragraphs enabled and attached to your
form. So, that being said, what we're going
to create is a One-Column Background Image here and we just click the Add New
Paragraph button. You'll see that you
get a field set that pops up that says
"1 column paragraph". We've got a
couple things here. First, we've got this
Content text area, so we want to put a
little bit of text in here and it just
needs to be a little bit, really. You only
want a small paragraph. So we're gonna
copy a little text here from Meet the
Ipsums and paste it in. Maybe you
want to have a header on top. If that's the
case you can go ahead and create that
with a Heading Three. And here we just make our fake test look a little more real. So, scrolling
down here, now that we've got our text in,
we are going to choose a background. So, we
want an image for this and once we
choose Image you see that we get some
more buttons and a drop down here. What
we're gonna do is we're gonna browse for
an image and we'll upload one from the
desktop here. One thing to note is you
need media. You should really have your
media prepared ahead of time.
Now, the sizes might vary. We don't really have any lock downs on the image sizes.
For this particular image, I'm using an image that's 1920 pixels wide by 675 pixels tall.
This is really kind of arbitrary so
use your best judgement.
You might want to use an aspect ratio that's similar to what I have here.
So we find our picture, open it up, and click Upload and then Next. We want to do a little media management
here. Go hit Save and once it gets pulled up this little
thumbnail here shows. So, now we got this style drop down. For this particular thing,
we don't want to repeat. We're just going to do just a plain straight image embed.
You will also see this style
button so when
it says "Content on the right" or "Content on the left" what this means is where do we want this text to show?
So, what we'll do is we'll just put it on the right side
just for the sake of the example. Once that's all filled in scroll down, hit Save
and then you will see your text and
your image. Now, one thing to notice is we've
got our text here on the right-hand side
and it's covering over the image, so what
you do want to be really aware of is the
positioning of things that you're going
to be laying out. This particular image here probably wouldn't be great
if we want to use the Hero text, but, you know, that's okay because we can always
go in and edit it and we can remove the Hero text if we want. We do not have to have that there.
If we want to, we can just go with a plain
image just like that.
And that is our One-Column with Background Image paragraph bundle.
So, this is the first in a series of tutorials related to creating the specific paragraph bundles.
Come and join us for our next one which will be our Two-Column paragraph bundle.
This has been Joe Fenn with Oregon State University's Web and Mobile Services.
Hope to see you soon!
