Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'invision community pages'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Atlassian

Categories

  • Personal
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Invision Community
    • E-Commerce

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Invision Community
  • E-Commerce
  • Affixes & Prefixes

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-Commerce
  • Others

Categories

  • Thoughts
  • Debate
  • Health
  • Hobbies

Categories

  • Personligt
    • Åsikter
    • Humor
    • Spel
    • Träning
  • Allmänt
    • Internet
    • Program & tjänster
  • Intressant
    • Prylar
  • Professionellt
    • Management
    • Krav
    • Designs
    • Webbutveckling
    • Test
    • Atlassian
    • säkerhet
    • Förvaltning
    • Ehandel
    • Wordpress
  • Personligt_

Categories

  • Prologue
    • About This Book
  • The Tools
    • Jira Software
    • Confluence
    • Jira Service Management
  • The Inception Phase
    • Portfolio Management
    • Project Management
  • The Design Phase
    • Design as part of the Inception phase
    • Design as part of the Requirement phase
    • Working with design libraries
  • The Requirement Phase
    • Definition of Requirements
    • The four levels of Requirements
  • The Development Phase
    • Atomic design
    • Estimations
  • The Test Phase
    • The Definition of Test
    • Types of Test
  • The Operations Phase
    • Release Management
  • The Post Go-Live Phase
    • Incidents
    • Changes
  • Notes
    • My Muses
    • Research

Categories

  • Theme Building
  • Javascript Framework
  • CSS Framework
  • IPS: Pages
    • Database Templates
    • Block Plugin Templates
    • Page Templates
  • Custom Applications
  • Tips & Tricks

Categories

  • Professional
    • Consulting
  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
    • Hosting
    • Security
  • Interesting
  • Atlassian
  • Invision Community
  • E-Commerce
    • CRO
    • SEO

Categories

  • Shared Hosting
  • Virtual Private Server
  • Cloud Hosting
  • Dedicated Hosting
  • Co-Location
  • Hosting Services

Categories

  • Professional
  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
    • Security
  • Interesting
  • Atlassian
  • Invision Community
  • E-Commerce

Categories

  • Professional
  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Miscellaneous

Categories

  • Defects
  • Ideas
  • Development
  • ☑ Archive

Categories

  • Professional
  • Management
    • Agile
  • Requirements
  • Design
  • Development
    • Frontend
    • Backend
  • Testing
  • Operations
    • Security
    • Hosting
  • Interesting
  • Atlassian
  • E-Commerce
    • CRO
    • SEO
  • Invision Community

Categories

  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Invision Community
    • E-Commerce
  • Miscellaneous
    • Fun
    • Games
    • Inspiration
    • Music

Categories

  • Jira Software Cloud Basics
    • Projects in Jira Software Cloud
    • Navigation in Jira Software Cloud
    • Boards in Jira Software Cloud
    • Filters in Jira Software Cloud
    • Dashboards in Jira Software Cloud
  • Jira Software Cloud User Guides
    • Working with Boards in Jira Cloud
    • Working with Filters in Jira Cloud
    • Working with Dashboards in Jira Cloud
  • Jira Software Cloud Project Admin Guides
    • Working with Project Settings in Jira Software Cloud
    • Working with People Settings in Jira Software Cloud
    • Working with Automation in Jira Software Cloud
  • Jira Software Cloud Admin Guides
    • Jira Software User Management
    • Jira Software Billing
    • Jira Software System
    • Jira Software Products
    • Jira Software Projects
    • Jira Software Issues
    • Jira Software Apps

Categories

  • Invision Community HTML Framework
  • Invision Community CSS Framework
    • Typography
    • Colors
    • Columns & Grid
    • Responsiveness
    • Forms
    • Datalists
    • Buttons
    • Messages
    • Miscellaneous
  • Invision Community JavaScript Framework
    • Invision Community UI Widgets
    • Invision Community Utilities modules
  • Invision Community CMS Pages
    • Invision Community Pages Basics
    • Invision Community Pages Templates
    • Invision Community Pages Tips & Tricks
    • Invision Community Pages Basic relationship
  • Invision Community Tips & Tricks

Categories

  • Design Guidelines
  • How to work with The Flexible Atlassian Setup
    • Portfolio Management
    • Visual Design
    • Requirements
    • Development
    • Test & Acceptance
    • Deploy & Release
    • Post GoLive Support
  • The Jira Software Cloud Setup
    • Introduction to the Setup
    • Issue Types
    • Issue Type Schemas
    • Workflows
    • Workflow Schemas
    • Screens
    • Screens Schemas
    • Issue Type Screens Schemas
    • Custom Fields
    • Field Configurations
    • Field Configuration Schemas
    • Permission Schemas
    • Notification Schemas
  • The Confluence System Documentation Setup
    • Introduction to the Setup
    • Architecture Section
    • Documents Section
    • Instructions Section
    • Quality Section
    • Requirements Section
    • Tecnical Documentation Section
    • Organization Section
    • Visual design Section

Categories

  • Professional
  • Management
    • Methodology
    • Leadership
  • Design
  • Requirements
  • Development
    • Frontend
    • Backend
  • Testing
  • Operations
    • Hosting
    • Security
  • Interesting
  • Atlassian
  • Invision Community
  • E-Commerce
    • CRO
    • SEO
  • Miscellaneous

Categories

  • HTML References
    • HTML Tags
    • Frontend Frameworks
  • CSS References
    • CSS Properties
    • CSS Methodologies
  • JavaScript References
    • JavaScript Objects
    • JavaScript Libraries
    • JavaScript Methodologies

Categories

  • Product Reviews
  • Company Reviews
  • Hosting Reviews
  • Personal Blog Reviews

Categories

  • Confluence Cloud Basics
    • Confluence Cloud Interface
    • Conflunce Cloud Spaces
    • Confluence Cloud Personal Space
    • Conflunce Cloud Templates
  • Confluence Cloud User Guides
    • Conflunce Cloud Macros
    • Conflunce Cloud Space Blog
    • Conflunce Cloud Space settings
    • Conflunce Cloud Space Pages
  • Confluence Cloud Admin Guides
    • Conflunce Cloud General Configurations
    • Conflunce Cloud Security
    • Confluence Cloud Look and Feel
    • Confluence Cloud Adminsitration

Categories

  • Tools
    • Professional
    • Management
    • Design
    • Requirements
    • Development
    • Testing
    • Operations
    • Interresting
    • Atlassian
    • E-Commerce
  • Methodology
  • Social Interaction
  • Areas of Expertise
    • Management
    • Design
    • Requirements
    • Development
    • Testing
    • Operations
    • Atlassian
    • E-Commerce

Forums

  • General
    • Open Forum
    • Support
    • Applications
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Test / QA
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce
    • Invision Community
  • Jobs
    • Looking for employee / consultant
    • Looking for Job / Assignment
  • Building The Site's Forums
  • Destiny 2's Discussions
  • The Journey's Discussions
  • Cinephilia's Topics
  • Diablo 4's Diablo 4 Topics
  • Shadownessence's Topics
  • sensory hyperreactivity's Topics
  • Wolcen's Wolcen Topics
  • Quality Assurance Heroes's QA Topics
  • Visual Studio Code's Forum
  • Adobe Illustrator's Adobe Illustrator Forum
  • Sketch Guru's's Sketch Topics
  • Requirements & test management in Jira's Topics
  • Microsoft Teams's Microsoft Teams Discussions
  • Figma's Figma Topics
  • Microsoft Planner's Microsoft Planner Topics
  • Psychology's Psychology Topics
  • Microsoft Word's Microsoft Word Topics
  • Microsoft Powerpoint's Microsoft Powerpoint Topics
  • WordPress Devs's Wordpress Topics
  • Ornamental Design's Ornamental Design Topics
  • Adobe Photoshop's Photoshop Discussions
  • Agile 2's Agile 2 Topics
  • Agile 2's Agile 2 Principles
  • Microsoft Outlook's Outlook Topics
  • My Book's Discussions
  • Outriders's Outriders Discussions

Categories

  • Jimi's Files
    • Curriculum vitae
    • Presentations
    • Certificates
  • Management
  • Requirements
  • Design
    • Fonts
  • Code
  • Test
  • Operations
  • Atlassian
    • Certificates of Excellence
  • Security
  • Ecommerce
  • Invision Power Services
    • JWSE Support Tickets
    • JWSE Task Management
  • Shadownessence's Files
  • WordPress Devs's Wordpress Files

Calendars

  • Project: JWSE Workboard
  • Project: JWSE Workboard
  • Community Calendar
  • Professional Events
  • Management Events
  • Requirement Events
  • Design Events
  • Development Events
  • Test Events
  • Atlassian Events
  • Operations Events
  • E-commerce Events
  • Invision Community Calendar
  • Destiny 2's Events
  • The Journey's Events
  • Cinephilia's premieres
  • Diablo 4's Diablo 4 Events
  • Agile 2's Agile 2 Events

Blogs

  • How to start your own blog
  • Sketch Blog
  • Building The Site's Blog
  • Destiny 2's Destiny 2 ramblings
  • The Journey's Stories
  • Diablo 4's Diablo 4 blog
  • Sketch Guru's's Sketch News
  • Requirements & test management in Jira's News
  • Agile 2's Agile 2 Blog

Categories

  • Movies
    • Action Movies
    • Adventure Movies
    • Animated Movies
    • Comedy Movies
    • Crime Movies
    • Drama Movies
    • Fantasy Movies
    • Horror Movies
    • Romance Movies
    • Sci-Fi Movies
    • Thriller Movies
    • Western Movies
  • TV Shows
    • Action TV Shows
    • Adventure TV Shows
    • Animated TV Shows
    • Comedy TV Shows
    • Crime TV Shows
    • Drama TV Shows
    • Fantasy TV Shows
    • Horror TV Shows
    • Romance TV Shows
    • Sci-Fi TV Shows
    • Thriller TV Shows
    • Western TV Shows

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me

Found 10 results

  1. As the number of databases grow here, it becomes annoying to add the fields for reviews in each of them. So, to fix that, I am going to build a new database for reviews that I can then connect to different articles or products as I see fit. This will give a central place for reviews that is flexible and easy to extend. So what are we going to build? This is a basic design that we will start with, as I already have this design built. It comes with a headline, a summary, a total review box, three headlines with ratings and a summary of how other people voted on the review. When writing the review, you will also have a long review text. This will not be a part of the review summary, however, but we will add a "See the full review" link to this design. For this to work, we will first set up the database and add the custom fields that we need. In total, we will have ten custom fields for the layout itself: Review Theme (so we can set the color theme) Review Headline Review summary Review Summary Rating Review Category 1 Review Category 2 Review Category 3 Review Category Rating 1 Review Category Rating 2 Review Category Rating 3 We will also need to connect the review to something, so there will be several custom fields for that. In my setup, I will attach the reviews to Articles, My Personal Blog, Products, Companies, Hosting, a generic one for the site and me and then I have two connections that I will need to build the databases for. In order for this to pass through properly, we will need to add a basic relationship template in my theme. I have written an article about that here, and I am working on another one in the Invision community Playbook. In each database item, we will be able to define the placement if we want to change it from the default, which will be at the bottom and we can also override the Review Theme if we want. This is so we can control the database items themselves. Things I have not tried yet.... In the form, I want to try to limit the form so you only get one database relation instead of all options. Not only will it be a bit confusing to have multiple options, but it also opens up for other problems that I hope to avoid. The way I want to try to do that is to add conditions based on the selected category. This is since I plan to have the reviews database setup with one category for each database (so Product Reviews, Company Reviews and so on). I know I could do this with JavaScript, but I prefer to have this server side to prevent DOM manipulation from bad people If things go as planned... This should not be a very difficult setup, and I will use the same basic setup I already have with the Playbook templates. It will take some time as I am still down with what I suspect is Covid, so my brain is very slow and my energy levels almost nonexistent. But we will get there soon enough as long as we move forward
  2. In order to condition a custom field of the type Database Relation, you need to have a different query. This is because the normal check uses the processed output, which for Database Relation fields will always be true. So what we do instead is use this code: {{if $records = $record->getReciprocalItems()}} {{foreach $records as $fieldId => $items}} {{if $fieldId == 'ID of the field you want to check'}} <!-- Parsing out the fields using a template --> {{foreach $items as $item}} {template="BasicRelationship_template" app="cms" group="basic_relationship_templates" params="$item"} {{endforeach}} <!-- end the queries --> {{endif}} {{endforeach}} {{endif}} In the first part, we first put a condition that if the database the template is used on have "reciprocal items", meaning if you have incoming links from other databases. Then we loop through the incoming items and select only the ones that match the ID of the field that is pointing towards the current database. So, if you for example have a database called Movies and one database called Actors where Movies have a database relation to Actors. Movies have Database ID 1 and Actors have database ID 2. The Custom field in the Movies database have the Field ID 100. We would then add the $fieldId == '100' into our code. Anytime we look at a Movie in the Movies database, we will trigger this condition and we will show the actors related to this movie. This will, however, NOT trigger if you are looking at an actor in the Actor database. This is because the condition will look only at links from outside databases. If you want to link to another database item in the same database, like linking actor to another actor, then you will instead use the standard condition for custom fields to do so.
  3. The work with Playbooks are progressing well. I am iterating the display template a bit because I realize that it is probably going to be a new standard that I will use for many databases and not just Playbooks. This solves quite a few things that has had me stuck actually and it feels really great! I have set up several new databases to test my thoughts, and the reason for that is that I realized that the setup can be used for many scenarios. If setup correctly, it can also replace many of the templates I currently have, but it requires careful planning when it comes to what content should be coded in. Due to this new template being a bitt different in that it can, and will, be used in many databases, I am adjusting it accordingly. I am going to add a number of conditional fields so I can select them as I see fit for each database. For example, I am adding a parallax effect if the database have a top image and if not, then it will just show a colored background. Every top tab will also show or hide depending on if there are any entries or if the field exist. It is very fun, but also a bit challenging since I am pretty much hacking the design by breaking out of the container and it has certain...consequences Overall, though, I have not felt this excited in a while and I like it!
  4. Database relations in Pages is a very powerful way to bring content from different databases into entries of ther databases. In this example I will show you how I added the People in project area in My Projects. Creating the Database I started by creating a new database called "People Profiles". It will be a database just to hold the data as it will not be publicly presented anywhere outside of the My Projects area. just to make it easier to work with I created a page and added the database to it. I also made the page available only to me so I can use it, but it will not be visible to anyone else. Then I decided on the fields that I wanted to use. I want to use an image, so I activated the record image. Then I went through the data I wanted to add: Name Title Awesome URL Linkedin URL Instagram URL Twitter URL Homepage URL Working area These are the basic fields. I realized thad I will probably have multiple versions of the profiles depending on when in time I worked with them. To search for the correct profile I would need more information, so I also added a Long Title that i se as the title field. I also added a Notes field to act as the Content field in case I wanted to scribble something down for myself. Setting up a Database Relationship After I added a few profiles it was time to bring them from the People Profiles database into the My Projects database. The first step was to add a new field into the My Projects database of the type "Database Relationship". When creating that I have to choose what database I want to create the relationship to, so I selected People Profiles. In the settings for display options I set a template key so I can reference it later and I unchecked the show in listing template and show in display tempate. Adding the database relationship in the template As I have selected not to display anything in the listing or display templates nothing will happen yet. So new we have to add this to our template for My Projects so we can show the data where we want it. So we head over to Templates in Pages where I have created my own template set for My Projects. Adding custom fields are done by adding a code line. There are some variations on this, but I will not into it in this post. This is the code: {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} As you only want to show this field if it is actually not blank, then we wrap that in a condition to only show if it is not blank: {{if $record->customFieldDisplayByKey('your custom field key')}} {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} {{endif}} In my case I also wanted to add some styling and a header. So my code looks like this: <!- People in Footer --> {{if $record->customFieldDisplayByKey('project_people')}} <div class="project_people_footer"> <h3>People in the Project</h3> <div class='ipsGrid ipsGrid_collapseTablet'> {$record->customFieldDisplayByKey('project_people', 'display')|raw} </div> </div> {{endif}} Defining the output in basicRelationship Now that we have included the data from the People Profiles database you will see that it is just a link. We want to have more data than that so now we must define what data we want to pull from that database and how we want that to be displayed. We have to do that be editing a theme file called basicRelationship. So we head over to our Theme folder and click the "Edit HTML and CSS" icon to get into the templates. Then under CMS->Global you will find the basicRelationship file. This file is a bit tricky because it defines all database relations. In order for us to target specifically the data coming from People Profiles we need to figure out what ID that database has. We can do that from Pages under Content->Databases which will list all database. If you hover over the edit button over your selected database, then you can see the URL at the bottom of your screen with the ID of the database at the very end. With the ID defined we can add a bit of code to make sure we only target specific databases with our changes: {{foreach $items as $id => $item}} {{if $item::$customDatabaseId == 19}} <!-- People database --> {template="BasicRelationship_PeopleProfiles" app="cms" group="basic_relationship_templates" params="$item"} {{elseif $item::$customDatabaseId == 16}} <!-- Author database --> {template="BasicRelationship_author" app="cms" group="basic_relationship_templates" params="$item"} {{else}} <!-- all other databases --> <a class="ipsPages_csv" href="{$item->url()}">{$item->_title}</a> {{endif}} {{endforeach}} Creating Theme Templates instead of just using basicRelationship In this code I have added 2 databases (19 and 16) and then I have a fallback for all others at the end that will show the default link. While it is very possible to add the code directly into this template I have used a different approach and instead created separate templates outside and then referenced them in the basicRelationship. This way I can work on the content for each database in a more focused way and the basicRelationship becomes a bit easier to overlook. In order to create a new template you go to Create New at the bottom of the template listings. Select HTML template and then fill out the form accordingly. Name - the name of the template. Variables - We add $items here since that is what is defined in the foreach loop in basicRelations. Location - Here we select front to place the template in the correct section. Group - I suggest you create your own group here so it is easier for you to find later. Application - Here we select Pages If you have done this as I have then you will have your new template located under CMS->Front->basic_relationship_templates. If you have selcted another group, then that is where you will find it instead. Adding data to the theme template Now that we have a template for our connection between the databases, then we can start adding the data to it that we want to show in My Projects. This is done in a very similar way as when we add the data to the entry templates. Instead of using $record however we use $item: {{if $item->customFieldDisplayByKey('your custom field key')}} {$item->customFieldDisplayByKey('your custom field key', 'raw')} {{endif}} As I added the default record image that is called a bit differently: {file="$item->_record_image_thumb" extension="cms_Records"} You can also reference the title field and the content field with a shorter tag: {$item->_title} {$item->_content|raw} In my current code I have nested the fields a bit and I have used the field for working area pretty sloppy, but I think you get the general idea. <div class='ipsGrid_span2 people-profiles_card'> <div class="people-profiles_image {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}_image"> <img class="ipsImage {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}" src="{file="$item->_record_image_thumb" extension="cms_Records"}" class=" {{if $item->customFieldDisplayByKey('working-area')}} {$item->customFieldDisplayByKey('working-area', 'raw')} {{endif}} " /> </div> <div class="people-profiles_Name"> {{if $item->customFieldDisplayByKey('people-profiles_Name')}} {$item->customFieldDisplayByKey('people-profiles_Name', 'raw')} {{endif}} </div> <div class="people-profiles_Title"> {{if $item->customFieldDisplayByKey('people-profiles_Title')}} <span class="{{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}">{$item->customFieldDisplayByKey('people-profiles_Title', 'raw')}</span> {{endif}} </div> <div class="people-profiles_links"> {{if $item->customFieldDisplayByKey('people-profiles_Awesome')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Awesome', 'raw')}" class="people-profiles_Awesome"><i class="fas fa-id-card"></i></a> {{else}} <i class="fas fa-id-card"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Linkedin')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Linkedin', 'raw')}" class="people-profiles_Linkedin"><i class="fab fa-linkedin"></i></a> {{else}} <i class="fab fa-linkedin"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Instagram')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Instagram', 'raw')}" class="people-profiles_Instagram"><i class="fab fa-instagram-square"></i></a> {{else}} <i class="fab fa-instagram-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Twitter')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Twitter', 'raw')}" class="people-profiles_Twitter"><i class="fab fa-twitter-square"></i></a> {{else}} <i class="fab fa-twitter-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Homepage')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Homepage', 'raw')}" class="people-profiles_Homepage"><i class="fas fa-home"></i></a> {{else}} <i class="fas fa-home"></i> {{endif}} </div> </div> This guide should help you to bring in the data from any database into another database with the styling of your choice. I know this is a pretty short and not very detailed guide, but I hope it was useful anyway. Please add questions and I will improve upon the guide where I am jumping a bit to fast. Happy coding! View full blog article
  5. Database relations in Pages is a very powerful way to bring content from different databases into entries of ther databases. In this example I will show you how I added the People in project area in My Projects. Creating the Database I started by creating a new database called "People Profiles". It will be a database just to hold the data as it will not be publicly presented anywhere outside of the My Projects area. just to make it easier to work with I created a page and added the database to it. I also made the page available only to me so I can use it, but it will not be visible to anyone else. Then I decided on the fields that I wanted to use. I want to use an image, so I activated the record image. Then I went through the data I wanted to add: Name Title Awesome URL Linkedin URL Instagram URL Twitter URL Homepage URL Working area These are the basic fields. I realized thad I will probably have multiple versions of the profiles depending on when in time I worked with them. To search for the correct profile I would need more information, so I also added a Long Title that i se as the title field. I also added a Notes field to act as the Content field in case I wanted to scribble something down for myself. Setting up a Database Relationship After I added a few profiles it was time to bring them from the People Profiles database into the My Projects database. The first step was to add a new field into the My Projects database of the type "Database Relationship". When creating that I have to choose what database I want to create the relationship to, so I selected People Profiles. In the settings for display options I set a template key so I can reference it later and I unchecked the show in listing template and show in display tempate. Adding the database relationship in the template As I have selected not to display anything in the listing or display templates nothing will happen yet. So new we have to add this to our template for My Projects so we can show the data where we want it. So we head over to Templates in Pages where I have created my own template set for My Projects. Adding custom fields are done by adding a code line. There are some variations on this, but I will not into it in this post. This is the code: {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} As you only want to show this field if it is actually not blank, then we wrap that in a condition to only show if it is not blank: {{if $record->customFieldDisplayByKey('your custom field key')}} {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} {{endif}} In my case I also wanted to add some styling and a header. So my code looks like this: <!- People in Footer --> {{if $record->customFieldDisplayByKey('project_people')}} <div class="project_people_footer"> <h3>People in the Project</h3> <div class='ipsGrid ipsGrid_collapseTablet'> {$record->customFieldDisplayByKey('project_people', 'display')|raw} </div> </div> {{endif}} Defining the output in basicRelationship Now that we have included the data from the People Profiles database you will see that it is just a link. We want to have more data than that so now we must define what data we want to pull from that database and how we want that to be displayed. We have to do that be editing a theme file called basicRelationship. So we head over to our Theme folder and click the "Edit HTML and CSS" icon to get into the templates. Then under CMS->Global you will find the basicRelationship file. This file is a bit tricky because it defines all database relations. In order for us to target specifically the data coming from People Profiles we need to figure out what ID that database has. We can do that from Pages under Content->Databases which will list all database. If you hover over the edit button over your selected database, then you can see the URL at the bottom of your screen with the ID of the database at the very end. With the ID defined we can add a bit of code to make sure we only target specific databases with our changes: {{foreach $items as $id => $item}} {{if $item::$customDatabaseId == 19}} <!-- People database --> {template="BasicRelationship_PeopleProfiles" app="cms" group="basic_relationship_templates" params="$item"} {{elseif $item::$customDatabaseId == 16}} <!-- Author database --> {template="BasicRelationship_author" app="cms" group="basic_relationship_templates" params="$item"} {{else}} <!-- all other databases --> <a class="ipsPages_csv" href="{$item->url()}">{$item->_title}</a> {{endif}} {{endforeach}} Creating Theme Templates instead of just using basicRelationship In this code I have added 2 databases (19 and 16) and then I have a fallback for all others at the end that will show the default link. While it is very possible to add the code directly into this template I have used a different approach and instead created separate templates outside and then referenced them in the basicRelationship. This way I can work on the content for each database in a more focused way and the basicRelationship becomes a bit easier to overlook. In order to create a new template you go to Create New at the bottom of the template listings. Select HTML template and then fill out the form accordingly. Name - the name of the template. Variables - We add $items here since that is what is defined in the foreach loop in basicRelations. Location - Here we select front to place the template in the correct section. Group - I suggest you create your own group here so it is easier for you to find later. Application - Here we select Pages If you have done this as I have then you will have your new template located under CMS->Front->basic_relationship_templates. If you have selcted another group, then that is where you will find it instead. Adding data to the theme template Now that we have a template for our connection between the databases, then we can start adding the data to it that we want to show in My Projects. This is done in a very similar way as when we add the data to the entry templates. Instead of using $record however we use $item: {{if $item->customFieldDisplayByKey('your custom field key')}} {$item->customFieldDisplayByKey('your custom field key', 'raw')} {{endif}} As I added the default record image that is called a bit differently: {file="$item->_record_image_thumb" extension="cms_Records"} You can also reference the title field and the content field with a shorter tag: {$item->_title} {$item->_content|raw} In my current code I have nested the fields a bit and I have used the field for working area pretty sloppy, but I think you get the general idea. <div class='ipsGrid_span2 people-profiles_card'> <div class="people-profiles_image {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}_image"> <img class="ipsImage {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}" src="{file="$item->_record_image_thumb" extension="cms_Records"}" class=" {{if $item->customFieldDisplayByKey('working-area')}} {$item->customFieldDisplayByKey('working-area', 'raw')} {{endif}} " /> </div> <div class="people-profiles_Name"> {{if $item->customFieldDisplayByKey('people-profiles_Name')}} {$item->customFieldDisplayByKey('people-profiles_Name', 'raw')} {{endif}} </div> <div class="people-profiles_Title"> {{if $item->customFieldDisplayByKey('people-profiles_Title')}} <span class="{{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}">{$item->customFieldDisplayByKey('people-profiles_Title', 'raw')}</span> {{endif}} </div> <div class="people-profiles_links"> {{if $item->customFieldDisplayByKey('people-profiles_Awesome')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Awesome', 'raw')}" class="people-profiles_Awesome"><i class="fas fa-id-card"></i></a> {{else}} <i class="fas fa-id-card"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Linkedin')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Linkedin', 'raw')}" class="people-profiles_Linkedin"><i class="fab fa-linkedin"></i></a> {{else}} <i class="fab fa-linkedin"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Instagram')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Instagram', 'raw')}" class="people-profiles_Instagram"><i class="fab fa-instagram-square"></i></a> {{else}} <i class="fab fa-instagram-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Twitter')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Twitter', 'raw')}" class="people-profiles_Twitter"><i class="fab fa-twitter-square"></i></a> {{else}} <i class="fab fa-twitter-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Homepage')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Homepage', 'raw')}" class="people-profiles_Homepage"><i class="fas fa-home"></i></a> {{else}} <i class="fas fa-home"></i> {{endif}} </div> </div> This guide should help you to bring in the data from any database into another database with the styling of your choice. I know this is a pretty short and not very detailed guide, but I hope it was useful anyway. Please add questions and I will improve upon the guide where I am jumping a bit to fast. Happy coding!
  6. My assignment was to create a new design for a political community called TheLeft. The design would then be implemented using HTML and CSS. The community also needed custom content blocks using Invision Communities Pages module. I created a new structure for that and added blocks for hero banners and other blocks need to create the desired design. I also configured Invision Community and built the structure of information to make it a complete community experience.
  7. This is a guide series that will go through everything you need to know to set up and customize your own blog using Invision Community from Invision Power Services. This guide will be updated with new articles or new information when new releases are made that affect the guides. This guide contains the following articles: Introduction (this page) Databases & Custom fields Adding Databases to Pages Adding CSS and JS to Pages Article View Template design Article Listing Template Design Article Category Listing Template Design Article Form Design Article Block Design Database Relationships This guide should give you all the information you need to get a good start with creating your own designs with Invision Community and its Pages application. If you want a quick start however and get a great looking design up and running in 10 minutes, then you can purchase a license for Invision Community and buy the plugin Pages SuperGrid by opentype. For this guide you will need a license for Pages, which is the application that allow you to work with Pages and Databases. I will make references to the Forum application as well, but you do not need that if you do not want to. The information in the articles will not go deep into how to make your blog compatible by using standard classes as that is a pretty big topic and I usually just build for myself, so I do not have to worry too much about that. If you have any questions or see a topic not yet added here, please drop by the forum and let me know.
  8. This is a guide series that will go through everything you need to know to set up and customize your own blog using Invision Community from Invision Power Services. This guide will be updated with new articles or new information when new releases are made that affect the guides. This guide contains the following articles: Introduction (this page) Databases & Custom fields Adding Databases to Pages Adding CSS and JS to Pages Article View Template design Article Listing Template Design Article Category Listing Template Design Article Form Design Article Block Design Database Relationships This guide should give you all the information you need to get a good start with creating your own designs with Invision Community and its Pages application. If you want a quick start however and get a great looking design up and running in 10 minutes, then you can purchase a license for Invision Community and buy the plugin Pages SuperGrid by opentype. For this guide you will need a license for Pages, which is the application that allow you to work with Pages and Databases. I will make references to the Forum application as well, but you do not need that if you do not want to. The information in the articles will not go deep into how to make your blog compatible by using standard classes as that is a pretty big topic and I usually just build for myself, so I do not have to worry too much about that. If you have any questions or see a topic not yet added here, please drop by the forum and let me know. View full blog article
  9. Adding content using tabs in Invision Community Pages is one of the most common questions I get about this website. It is something that is really not that complicated, but it is a bit tricky to find the information. In this article I will show you how I created my tabbed blocks so you can use it on your own page. While you can add this directly into a template if you want, I prefer to build this using blocks. This way I can control the content in more detail and it makes my life easier since I have different blocks for each content. So I first start with creating a block that will hold the tabs themselves. In this block I will reference in other blocks to display the content for each tabbed content. To create a new block you go to Pages -> Page Management -> Blocks. There we create a custom block with manual HTML as the content editor. Give the block a name and a template key. I also have organized my templates so that my Tabs are in a separate category, which help making things a little easier to find when you have a lot of blocks like I do. In the content section you can now add the HTML and template logic to create the tabs section. The information on how tabs work can be found in the documentation here: https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuitabbar-r66/ <div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" id="elTabBar" data-ipstabbar="" data-ipstabbar-defaulttab="1" data-ipstabbar-contentarea="#" data-ipstabbar-updateurl="false"> <a href="" data-action="expandTabs"><i class="fa fa-caret-down"></i></a> <ul role="tablist"> <li> <a href="" role="tab" id="1" class="ipsType_center ipsTabs_item ipsTabs_activeItem" aria-selected="true"> <i class="far fa-newspaper"></i> Management Articles </a> </li> <li> <a href="" role="tab" id="2" class="ipsType_center ipsTabs_item"> <i class="fas fa-comment-alt"></i> Management Discussions </a> </li> <li> <a href="" role="tab" id="3" class="ipsType_center ipsTabs_item"> <i class="fas fa-id-card"></i>Management People </a> </li> <li> <a href="" role="tab" id="4" class="ipsType_center ipsTabs_item"> <i class="fas fa-cloud-download-alt"></i>Management Downloads </a> </li> <li> <a href="" role="tab" id="5" class="ipsType_center ipsTabs_item"> <i class="fas fa-play-circle"></i>Management Videos </a> </li> <li> <a href="" role="tab" id="6" class="ipsType_center ipsTabs_item"> <i class="fas fa-link"></i>Management Links </a> </li> </ul> </div> <section class="ipsTabs_panels ipsTabs_contained"> <div id="ipsTabs_elTabBar_1_panel" class='ipsTabs_panel'> {block="latest_management_articles"} <a href="https://jimiwikman.se/blog-articles/blog/professional/management/">Read All Articles</a> </div> <div id="ipsTabs_elTabBar_2_panel" class='ipsTabs_panel'> {block="management_forum_topics"} </div> <div id="ipsTabs_elTabBar_3_panel" class='ipsTabs_panel'> {block="awesome_management"} </div> <div id="ipsTabs_elTabBar_4_panel" class='ipsTabs_panel'> {block="latest_management_downloads"} </div> <div id="ipsTabs_elTabBar_5_panel" class='ipsTabs_panel'> {block="latest_management_videos"} </div> <div id="ipsTabs_elTabBar_6_panel" class='ipsTabs_panel'> {block="latest_management_links"} </div> </section> In this code we have the top section defining the tabs themselves. Each tab has an ID that we use in the bottom section to determine what content we show in each tab. This is done in the bottom section by adding the ID to the div ID "ipsTabs_elTabBar_HERE_panel". So for example we can add the ID of 1 to show the content for the first tab by adding the number 1 to that ID: "ipsTabs_elTabBar_1_panel". What I have done for my setup is to add blocks rather than content directly into the bottom section. For me that make things easier to manage, but you can add it directly to your block if you prefer that. In my code here I am using FontAwesome to create the icons for the tabs. You can just take those out if you prefer not to have icons in your tabs. Once this has been done, then you have a block that you can add to any page, just like other blocks. You can see this example live here: https://jimiwikman.se/management/ I hope this is helpful and if you have any questions on how this works or how to modify it, feel free to add a comment. I will do my best to answer as always. If you have other questions on Invision Community, please use the discussion forum.
  10. Adding content using tabs in Invision Community Pages is one of the most common questions I get about this website. It is something that is really not that complicated, but it is a bit tricky to find the information. In this article I will show you how I created my tabbed blocks so you can use it on your own page. While you can add this directly into a template if you want, I prefer to build this using blocks. This way I can control the content in more detail and it makes my life easier since I have different blocks for each content. So I first start with creating a block that will hold the tabs themselves. In this block I will reference in other blocks to display the content for each tabbed content. To create a new block you go to Pages -> Page Management -> Blocks. There we create a custom block with manual HTML as the content editor. Give the block a name and a template key. I also have organized my templates so that my Tabs are in a separate category, which help making things a little easier to find when you have a lot of blocks like I do. In the content section you can now add the HTML and template logic to create the tabs section. The information on how tabs work can be found in the documentation here: https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuitabbar-r66/ <div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" id="elTabBar" data-ipstabbar="" data-ipstabbar-defaulttab="1" data-ipstabbar-contentarea="#" data-ipstabbar-updateurl="false"> <a href="" data-action="expandTabs"><i class="fa fa-caret-down"></i></a> <ul role="tablist"> <li> <a href="" role="tab" id="1" class="ipsType_center ipsTabs_item ipsTabs_activeItem" aria-selected="true"> <i class="far fa-newspaper"></i> Management Articles </a> </li> <li> <a href="" role="tab" id="2" class="ipsType_center ipsTabs_item"> <i class="fas fa-comment-alt"></i> Management Discussions </a> </li> <li> <a href="" role="tab" id="3" class="ipsType_center ipsTabs_item"> <i class="fas fa-id-card"></i>Management People </a> </li> <li> <a href="" role="tab" id="4" class="ipsType_center ipsTabs_item"> <i class="fas fa-cloud-download-alt"></i>Management Downloads </a> </li> <li> <a href="" role="tab" id="5" class="ipsType_center ipsTabs_item"> <i class="fas fa-play-circle"></i>Management Videos </a> </li> <li> <a href="" role="tab" id="6" class="ipsType_center ipsTabs_item"> <i class="fas fa-link"></i>Management Links </a> </li> </ul> </div> <section class="ipsTabs_panels ipsTabs_contained"> <div id="ipsTabs_elTabBar_1_panel" class='ipsTabs_panel'> {block="latest_management_articles"} <a href="https://jimiwikman.se/blog-articles/blog/professional/management/">Read All Articles</a> </div> <div id="ipsTabs_elTabBar_2_panel" class='ipsTabs_panel'> {block="management_forum_topics"} </div> <div id="ipsTabs_elTabBar_3_panel" class='ipsTabs_panel'> {block="awesome_management"} </div> <div id="ipsTabs_elTabBar_4_panel" class='ipsTabs_panel'> {block="latest_management_downloads"} </div> <div id="ipsTabs_elTabBar_5_panel" class='ipsTabs_panel'> {block="latest_management_videos"} </div> <div id="ipsTabs_elTabBar_6_panel" class='ipsTabs_panel'> {block="latest_management_links"} </div> </section> In this code we have the top section defining the tabs themselves. Each tab has an ID that we use in the bottom section to determine what content we show in each tab. This is done in the bottom section by adding the ID to the div ID "ipsTabs_elTabBar_HERE_panel". So for example we can add the ID of 1 to show the content for the first tab by adding the number 1 to that ID: "ipsTabs_elTabBar_1_panel". What I have done for my setup is to add blocks rather than content directly into the bottom section. For me that make things easier to manage, but you can add it directly to your block if you prefer that. In my code here I am using FontAwesome to create the icons for the tabs. You can just take those out if you prefer not to have icons in your tabs. Once this has been done, then you have a block that you can add to any page, just like other blocks. You can see this example live here: https://jimiwikman.se/management/ I hope this is helpful and if you have any questions on how this works or how to modify it, feel free to add a comment. I will do my best to answer as always. If you have other questions on Invision Community, please use the discussion forum. View full blog article
×
×
  • Create New...