![]() Note: We covered creating a template and compiling Sass in part 1.ġ. So instead of trying to override templates or preprocess functions, we’ll use Sass to apply the style. The class I like to use is img-fluid which just adds a max width of 100% on the image.Īdding a class to the IMG element through Drupal can be tricky. It doesn’t resize correctly in the wrapping DIV.īootstrap has responsive image classes which can be used to make images responsive. If you go ahead and create a portfolio, you’ll notice that the image is really big. NOTE: If you can’t see the classes in the drop-down then make sure you’ve added them into the “ CSS classes for regions” field in the Display Suite settings. Select the “row” class in “Class for layout”, “col-md-8” in “Class for Left” and “col-md-4” in “Class for Right”. Then click on “Custom classes” and expand the area. Select the “Two column layout” Display Suite layout.ģ. Once you have enabled Layout Builder on the Portfolio content type, you should see a “Manage layout” button, click on it to manage the layout.Ģ. Then click on the “Full content” view mode and enable layout builder by checking “Use Layout Builder” and click on Save.Ĭonfigure Layout Builder on Portfolio Content Type Scroll down to “Custom display settings” on the Default view mode and check “Full content” to enable it.ģ. While still on the Portfolio content type click on “Manage display”.Ģ. Now that we have the content type and fields let’s configure the full content layout. On the field edit page make sure you select Image from the “Media type” checkbox list. ![]() Select Media from the “Add a new field” drop-down and enter “Featured” into Label and click on “Save and continue”.ĥ. This will be a media field which will let you select an image media entity.Ĥ. This happens when you create a content type so at this point we just have to create the Featured field. Now that the content type has been created let’s create the fields. Enter in Portfolio into the Name field and some text into the Description field such as “Used to display portfolio items.”. Click on Structure in the toolbar, “Content types” and click on “Add content type”.Ģ. Create Portfolio Content Typeįirst, let’s go and create the Portfolio content type.Īt this point the content type will only need a Body and Featured (media field for selecting images) field.ġ. NOTE: There are already existing classes from part 1 and 2. Then add the following options in the “CSS classes for regions”: row|row Go to Structure, Display Suite and click on the Classes tab.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |