Appearance
The Package template
The Package template shows selected talent either as a division-like grid / list which links to individual portfolios (a Casting package), or as a collection of selected media per talent shown directly on the page (a Gallery package). A Casting package may have talent organized into groups.
Refer to the package object for detailed structure.
The SyngencyPackage plugin may be used to enable client feedback on talent in a Casting package.
Skeleton example
liquid
{% comment %} Set which measurement types to display {% endcomment %}
{% assign defaultMeasurements = 'Height,Dress,Bust,Chest,Waist,Hip,Shoe' | split: ',' %}
{% assign femaleMeasurements = 'Height,Dress,Bust,Waist,Hip,Shoe' | split: ',' %}
{% assign maleMeasurements = 'Height,Chest,Waist,Hip,Inseam,Shoe' | split: ',' %}
{% assign nonBinaryMeasurements = 'Height,Dress,Chest,Waist,Hip,Inseam,Shoe' | split: ',' %}
{% assign youthMeasurements = "Kids' Height,Kids' Clothing,Shoe" | split: ',' %}
{% comment %} Youth measurements used under this age {% endcomment %}
{% assign youthAge = 16 %}
<header class="package-header mb-5">
<h1 class="package-title">{{ package.description }}</h1>
{% if package.contact_name %}
<p class="package-client">{{ package.contact_name }}</p>
{% endif %}
</header>
{% if package.type == 'casting' %}
{% comment %}
Casting Package
- Loop through grouped and ungrouped models
{% endcomment %}
<section class="casting-package">
{% if package.groups %}
{% for group in package.groups %}
<h2 class="group-name">{{ group.name }}</h2>
{% if group.notes %}
<div class="group-notes">
<p>{{ group.notes }}</p>
</div>
{% endif %}
{% if group.models %}
{% for model in group.models %}
<a href="{{ model.url }}" class="model">
<div class="headshot">
<div class="headshot-image">
<img src="{{ model.headshot_url }}" alt="{{ model.display_name }} | {{ agency.name }}">
</div>
<div class="overlay">
<!-- Your hover overlay content -->
</div>
</div>
<h3 class="model-name">{{ model.display_name }}</h3>
</a>
{% if model.notes %}
<p class="model-note">{{ model.notes }}</p>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
{% if package.models %}
{% for model in package.models %}
<a href="{{ model.url }}" class="model">
<div class="headshot">
<div class="headshot-image">
<img src="{{ model.headshot_url }}" alt="{{ model.display_name }} | {{ agency.name }}">
</div>
<div class="overlay">
<!-- Your hover overlay content -->
</div>
</div>
<h3 class="model-name">{{ model.display_name }}</h3>
</a>
{% if model.notes %}
<p class="model-note">{{ model.notes }}</p>
{% endif %}
{% endfor %}
{% endif %}
</section>
{% else %}
{% comment %}
Gallery Package
- Display collection of media per model
{% endcomment %}
<section class="gallery-package">
{% for model in package.models %}
{% assign includeMeasurements = defaultMeasurements %}
{% if model.gender == 'female' %}
{% assign includeMeasurements = femaleMeasurements %}
{% elsif model.gender == 'male' %}
{% assign includeMeasurements = maleMeasurements %}
{% elsif model.gender == 'non-binary' %}
{% assign includeMeasurements = nonBinaryMeasurements %}
{% endif %}
{% if model.age < youthAge %}
{% assign includeMeasurements = youthMeasurements %}
{% endif %}
{% unless forloop.first %}
<hr class="my-5">
{% endunless %}
<div class="package-model">
<header class="model-header">
<h2 class="model-name">{{ model.display_name }}</h2>
{% if model.notes %}
<p class="model-notes">{{ model.notes }}</p>
{% endif %}
<div class="model-appearance">
<ul class="measurements">
{% for im in includeMeasurements %}
{% for m in model.measurements %}
{% if im == m.name %}
<li>
<label>{{ m.name }}</label>
<span>
{% if m.imperial %}
{{ m.imperial }}
{% else %}
{{ m.size }}
{% endif %}
</span>
</li>
{% endif %}
{% endfor %}
{% endfor %}
{% if model.age <= youthAge %}
<li>
<label>Age</label>
<span>{{ model.age }}</span>
</li>
{% endif %}
{% if model.hair_color %}
<li>
<label>Hair</label>
<span>
{% if model.hair_color contains ' - ' %}
{% assign hairColor = model.hair_color | split: ' - ' %}
{{ hairColor | last }} {{ hairColor | first }}
{% else %}
{{ model.hair_color }}
{% endif %}
</span>
</li>
{% endif %}
{% if model.eye_color %}
<li>
<label>Eyes</label>
<span>
{% if model.eye_color contains ' - ' %}
{% assign eyeColor = model.eye_color | split: ' - ' %}
{{ eyeColor | last }} {{ eyeColor | first }}
{% else %}
{{ model.eye_color }}
{% endif %}
</span>
</li>
{% endif %}
</ul>
</div>
</header>
<section class="package-media">
{% for file in model.images %}
{% case file.media_type %}
{% when 'image' %}
<a href="{{ image.large_url }}">
<img src="{{ image.medium_url }}" alt="{{ model.display_name }} | {{ gallery.name }}" width="{{ image.width }}" height="{{ image.height }}">
</a>
{% when 'video' %}
{% comment %}
Set up video URL with parameters for optimal embedding
{% endcomment %}
{% assign videoUrl = file.url %}
{% assign videoParam = '?' %}
{% if file.external_source == 'youtube' or file.external_source == 'vimeo' %}
{% if videoUrl contains '?' %}
{% assign videoParam = '&' %}
{% endif %}
{% if file.external_source == 'youtube' %}
{% assign videoParam = videoParam | append: 'iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1&version=3&playerapiid=ytplayer&origin=' | append: agency.url | replace: 'http://', 'https://' %}
{% elsif file.external_source == 'vimeo' %}
{% assign videoParam = videoParam | append: 'loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media&color=aaa' %}
{% endif %}
{% endif %}
{% assign videoUrl = videoUrl | append: videoParam %}
<iframe src="{{ videoUrl }}"></iframe>
{% when 'audio' %}
<div class="audio-item">
{% if file.credit %}
<p>{{ file.credit }}</p>
{% endif %}
<audio controls>
<source src="{{ file.url }}" type="{{ file.type }}" />
</audio>
</div>
{% endcase %}
{% endfor %}
</section>
</div>
{% endfor %}
</section>
{% endif %}