In this example, the layout is the same as the tablet device example.
Notice the content fits nicely into the web part. Here the layout changes and the content is displayed in a stacked layout.įinally, what about when you add a web part to a SharePoint page to display the list? Here’s an example of what that looks like in a Modern Site. The same layout is implemented and the content fits in the more narrow view port. You can see it fills the screen from left to right. The Resource Catalog sample looks like this in a desktop web browser. In this article, I’ll use the Resource Catalog sample as an example.
#DRUPAL VIEW RESPONSIVE COLUMNS HOW TO#
In this article I’m going to dive into the sample code and show you how to implement responsive layouts with SharePoint View Formatters. You could change this up however you wanted, applying this workflow to other content types, building with other components or frameworks, etc.Did you see the blog post on the Microsoft SharePoint Blog about the new SharePoint list View Formatter samples? We had fun building the samples in the weeks leading up to the Microsoft Ignite conference and I’d like to share what we learned. This was just my solution for leveraging the power of a fav framework into Drupal 8 without too much extra fuss. What is Font Awesome? A massive icon font set that makes it easy to drop icon elements into HTML and CSS. You don’t need to know Twig to pull this off, but you can learn more here: When you see all those curly boys Įdit Aug 30, 2017: To make icons more accessible, I used instead of and added the ARIA so it will be available to visual users, but ignored by most screenreaders. What is Twig? Twig is an easy way to work with PHP and is built into Drupal 8. Expand the Replacement Patterns panel and then and you can see how all the pieces from those ‘Content:’ fields are now available to us using Twig syntax.
Now, open the Global: Custom text field (which should be the last in the list of fields). *shrug* Flexbox fun la la laĬard-footer: The card component came with a footer which I thought looked cool.ītn btn-sm btn-secondary: Bootstrap 4 button classes. Width="100%": Not 100% sure why, but my images were warping without this on there. H-100: Bootstrap 4 class to set an element’s height to 100%, which helps the card fill the height of the column, so all the cards will look the same height. Looking at that documentation more, I decided I wanted this set-up: Article Title Authored On Summary Read More They have an example of a card with an image at the top, and the title, summary, and a button inside. card-body so the example code in this article have been updated. Go somewhere Įdit Sept 1, 2017: Bootstrap 4 is now in beta, so there have been some changes.card-block is now. Look again at Bootstrap 4’s card component markup: Card title Some quick example text to build on the card title and make up the bulk of the card's content. Make cardsĮach of the six ‘Content:’ fields I pulled in and hid serve the purpose of getting those pieces of content available for me to fuss with, i.e. List-unstyled is Bootstrap 4’s way of removing all list-y formatting from lists. That done, I need to add classes to the ul itself under List class. See Bootstrap 4’s utility class documentation. mb-3 is a utility class that adds a margin-bottom. Then, when the screen is wide, they will take up 4/12 columns, so col-lg-4. Just spaces between, order doesn’t matter.Īccording to Bootstrap 4’s grid documentation, col-md-6 means that on medium width screens, the column with take up 6/12 columns, so half. This will add classes to each li element in the HTML list. I want the articles to appear in columns.īack under Format: HTML List | Settings I added Bootstrap 4 classes to the Row class field. Header (I made a Global: Text area header so there would be some text before all my news.) 2. Page Settings Path: /cards (Create a url for this page) We will come back to this)įilter Criteria Content: Publishing status (= Yes) Content: Content type (= Article) Do not ‘Create a label’.) Content: Image (Formatter: URL to Image) Content: Title Content: Authored on (I use the custom date format D, M n, Y - ga) Content: Body (Formatter: Summary or trimmed) Content: Path Global: Custom text (This is the magic. Title: News (Name that will show up on the page.)įormat Format: HTML List | Settings (We will come back to these settings) Show: Fields | Settings (We will come back to these settings)įields (Add in these fields in this order and check “Exclude from display”. And going through those settings step-by-step:ĭisplay name: Cards (Use whatever name makes sense to you.
0 kommentar(er)
