Testimonials Manual

Pulls in testimonials from the firebase firestore collection "testimonials" or other source if specified using the data-source attribute. Renders the testimonial data on the page as cards in a grid list in the testimonies-front-end-container div. You can modify how the testimonials are rendered by using the html attributes. You can also modify the data that is filtered by using the correct html attributes. The available attributes and options are listed below in the Attributes sections of this page.

Attributes

• filter-by-field: This attribute selects the field to filter the database.
  Current available values for this attribute
  • department
  • category
• filter-by-value: This attribute selects the value of the field that you are filtering.
  Current available values for this attribute
  • Scholarship
  • Program
  • Development
  • Engineering Education
  • Biological Engineering
• img-style: This attribute determines how the image looks when it is displayed.
  Current available values for this attribute
  • rounded
  • none
• style-renderer: This attribute changes the way that the testimonial is rendered, It changes what information is displayed and how it is displayed.
  Current available values for this attribute
  • department
  • Scholarship
  • Program
  • Development
• blockqoute: This attribute changes if the more stylized blockqoute is used or if it is not used.
  Current available values for this attribute
  • true
  • false

Implementation

Place code in your html where you would like the list of testimonials to be rendered with correct html attributes.

							
<div  
id="testimonies-front-end-container" 
filter-by-field="department"
filter-by-value="engin"
img-style="rounded"
style-renderer="Scholarship" 
blockquote="true"
class="row justify-content-center"> 
</div>
<script defer="" src="path to build javascript file"></script>

						

Examples

Here are some examples of what you can do to change the look of the cards. There are more possibilites than these. These are just a few of them. To help you get an idea of what each attribute does.

							
<div  
id="testimonies-front-end-container" 
filter-by-field="department"
filter-by-value="Engineering Education"
img-style="rounded"
style-renderer="" 
blockquote="true"
class="row justify-content-center"> 
</div>
<script defer="" src="path to build javascript file"></script>

						

							
<div  
id="testimonies-front-end-container" 
filter-by-field="department"
filter-by-value="Biological Engineering"
img-style="rounded"
style-renderer="" 
blockquote="true"
class="row justify-content-center"> 
</div>
<script defer="" src="path to build javascript file"></script>

						

							
<div  
id="testimonies-front-end-container" 
filter-by-field="department"
filter-by-value="Engineering Education"
img-style=""
style-renderer="" 
blockquote="false"
class="row justify-content-center"> 
</div>
<script defer="" src="path to build javascript file"></script>

						

							
<div  
id="testimonies-front-end-container" 
filter-by-field="department"
filter-by-value="Biological Engineering"
img-style="none"
style-renderer="" 
blockquote="false"
class="row justify-content-center"> 
</div>
<script defer="" src="path to build javascript file"></script>

						

							
<div  
id="testimonies-front-end-container" 
filter-by-field="category"
filter-by-value="Scholarship"
img-style="rounded"
style-renderer="Scholarship" 
blockquote="true"
class="row justify-content-center"> 
</div>
<script defer="" src="path to build javascript file"></script>

						

							
<div  
id="testimonies-front-end-container" 
		filter-by-field="category"
		filter-by-value="Development"
img-style="rounded"
style-renderer="Development" 
blockquote="true"
class="row justify-content-center"> 
</div>
<script defer="" src="path to build javascript file"></script>

						

							
<div  
id="testimonies-front-end-container" 
filter-by-field="department"
filter-by-value="Biological Engineering"
img-style="rounded"
style-renderer="Development" 
blockquote="true"
class="row justify-content-center"> 
</div>
<script defer="" src="path to build javascript file"></script>

						

							
<div  
id="testimonies-front-end-container" 
filter-by-field="department"
filter-by-value="Engineering Education"
img-style="none"
style-renderer="Scholarship" 
blockquote="false"
class="row justify-content-center"> 
</div>
<script defer="" src="path to build javascript file"></script>