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

[Article] Building a Movies database - using plugin and some styling


Jimi Wikman
 Share

Recommended Posts

  • Owner

This week I took a look at a plugin I had and decided to style it a bit to fit the image I had in my mind. As it turned out this was very easy and the only thing that stopped me for a while was how to use custom fields. Once that was done it was smooth sailing and quite fun to customize. This is how I did it, so you can do it yourself if you want.

The app that we will be working with is the Movies & TV Shows by Adriano Faria. This is an amazing app that use the TMDB database to fetch data for the movies and TV shows, making adding movies and TV shows fast and fun. Adriano has several similar apps and I also have the Books version that I probably look at later as well.

In order to modify the app we need to go to the themes (customization -> Apperance -> Themes) and click the Edit HTML & CSS button. This takes us to the templates for our theme. There you will have two tabs, one for templates and one for CSS. In both of those tabs we will have a section called "Movies". This is where we find the app templates and the CSS that the app use.

Screenshot 2020-12-20 at 14.20.55.png

 

Inside the templates we will focus on a few templates to make the design that we want to make.

  • View -> View: This is the template that control the layout for when you look at a movie or tv show.
  • Index -> indexBlock: This is the template that control the latest and random items block on the start page.
  • Index -> featuredMovie: This is the template that control the featured movies block on the start page.
  • front -> browse -> rows: This is the template that control the listing inside a category.

We will also work with the CSS that is located in the CSS tab:

  • movies -> front -> movies.css

 

Changing the view

The first thing I did was to change the View template. I had the idea that I wanted to have a big background image behind the content. This is a bit tricky since the content is trapped inside a div that have a fixed width. The second thing I wanted was to add more data and I especially wanted to add a custom rating icon for my rating since I will use this as my recommendation site of sorts.

So first I needed to figure out how to add custom fields and decide what fields I wanted. I decided on the following fields:

  • Official Trailer (ID:8) - The ID of the trailer, so I can add it to an embedded video player
  • Certification (ID:6) - Just a text field to add the certification.
  • TV Year (ID:4)  - Just a text field here as well.
  • My Review (ID:2) - An editor field, so I can write my review.
  • My Rating (ID:5) - Just a number field, so I can add values between 1 and 100.
  • Backdrop (ID:1) - An upload field, so I can add a big image behind the content.

In order to show these fields I need to use this little piece of code:

{{$fields = $movie->customFields();}}{$fields['field_1']}

I then just change the field_1 to the field I want to display. You can see what the id of your field is by hovering over the edit button in the custom fields view.

I also want to be able to add some conditions, so I only see things if the field is filled in and in order to do that I use this:

{{if $movie->customFields('field_1')}}

With that we can now add our custom fields to the template and start looking at how to style them.

 

The Backdrop

The backdrop is shown by displaying the file that we uploaded, but it will be constrained within the content and we want to break it out from that. This is where we use a little hack in CSS and I added a class to the div surrounding the backdrop and then added this CSS to it:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top:-15px;
  min-height:800px;
  background-image:url(https:{media="528"});
  background-color: #294459;
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
}

This now show the image in full width and I have this idea that I want to add a play button to the backdrop that show a trailer when I click it. There are several ways to do this, but I decided to use the built-in function in Invision Community called ips.ui.dialog. This nifty function allow me to open a modal and either populate it with a link or content inside the same page. As it does not work to refer directly to the url of the trailer, we use the embed code instead and place the content in a hidden div in the document.

{{if $movie->customFields('field_1')}}  
      
      <div class="full-width" style="background-image:url('https://jimiwikman.se/uploads/{{$fields = $movie->customFields();}}{$fields['field_1']}');">
   
 <!-- Official Trailer -->
{{if $fields['field_8']}}  
<a href='#dialogContent' data-ipsDialog data-ipsDialog-size="fullscreen" data-ipsDialog-content='#dialogContent'>
  <div  class="JWSE_play">
  <span  class="JWSE_playBtn"><i class="far fa-play-circle"></i></span>
  <span class="JWSE_playTxt">Play Trailer</span>
  </div>  
 </a>
        
<div id="dialogContent" class="JWSE_video-container ipsHide">
  <iframe src="https://www.youtube.com/embed/{$fields['field_8']}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>        
 {{endif}}     

In the code I refer to the custom field I created for the official trailer that hold the movie ID. I also wrap the code in an if query, so it only shows if a value is entered. I use FontAwesome to show the play icon and I define the modal to be full view using the data-ipsDialog-size attribute. Currently, narrow, medium, wide and full screen are supported as values for this option.

I then style this with the following CSS:

/*** Youtube Popup ***/

.JWSE_video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.JWSE_video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.JWSE_video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.JWSE_play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align:center;
  height:170px;
  width:170px;
  background: rgb(41,68,89, 0.5);
  display:block;
  border-radius:100%
}

.JWSE_playBtn{
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:70px;
  opacity:0.9;
  color:white;
  display:block;
}

.JWSE_playTxt{
      position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
font-size:16px;
  color:white;
  display:block;
}

 

My Rating

Adding a rating icon to make the rating number look cool is next, and I wanted a circle with numbers inside. This can be done in any number of ways, but I decided on a fairly simple version of a SVG circle using css keyframes for animation.

<!-- JWSE Rating Circle -->
            {{if $fields['field_5']}}
              <div class="jwse_ratingCircle"> 
                <svg viewBox="0 0 36 36" class="circular-chart orange">
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text>
                  <text x="27" y="15.35" class="percentageSmall">%</text>
                </svg>
              </div>
              
              
              {{elseif $fields['field_5'] == 0}}
              
                <div class="jwse_ratingCircle"> 
                <svg viewBox="0 0 36 36" class="circular-chart">
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="0, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="18" y="19.35" class="percentage unrated">Unrated</text>
                </svg>
              </div>
              {{endif}}

As you can see in the code I have two versions of the circle, one for when I have added a value and one for when I have not. I had to add a condition to the second version because as I have a number field it will always be 0, which means that it is never empty. This means that the first condition will always be true, even if I have not added anything to the field.

To this I added the following CSS:
 

/*** My Rating Circle ***/

.jwse_MyReviewText{
position:relative;
}

.jwse_ratingCircle {
    float: right;
    position: absolute;
    top: 0px;
    right: 0px;
  z-index:999;
  width:100px;
}

.jwse_ratingCircle-indexBlock {
    float: right;
    position: absolute;
    top: 0px;
    right: 0px;
  z-index:999;
  width:50px;
}

.jwse_ratingCircle-categoryList {
    float: left;
    position: absolute;
    top: -5px;
    left: 112px;
  z-index:999;
  width:50px;
}

.circular-chart{
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 100px;
  background-color: var(--color-baseblue);
  border-radius: 50%;
}

.circular-chart-indexBlock{
  max-width:100%;
max-height:50px;
  top:-6px;
  right: 3px;
  position:relative;
}

.circular-chart-Featured{
max-height:50px;
  top:-5px;
  right: 17px;
  position:relative;
}


.circular-chart_unrated{
background-color: var(--color-palegrey);
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
  opacity: 0.3;
}

.circle {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: var(--color-jwsecoral);
}



.percentage {
  fill: white;
  font-family: Montserrat;
  font-size: 13px;
  text-anchor: middle;
}

.percentageSmall{
  fill: white;
  font-family: Montserrat;
  font-size: 5px;
  text-anchor: middle;
}

.unrated{
font-size:5px;
}

As you can see I have variants for the indexBlock and featuredBlock as well as adustment for the category list. This because the images are different for those areas and we need to adjust a bit.

 

Let's put it all together

With this I now have all the custom fields shown on the page, a backdrop that cover the full width of the page and I have a visual representation of the rating. All that is left is to put things together in the templates and add styles to it. We also need to adjust a bit for mobile view.

With permission from Adriano, I will show you the code I use, and you can copy and paste it into your own movies theme files to get the layout I use here on this site. I have not cleaned these up, so there are some areas that need cleaning, but it works.

 

<div class="ipsRichEmbed" style="max-width: 500px;  border: 1px solid rgba(0,0,0,0.1); ">
	<div class="ipsRichEmbed_masthead ipsRichEmbed_mastheadBg ipsType_center">
		<a href="https://www.vowel.com/" rel="external nofollow" style="background-image: url( 'https://s3.amazonaws.com/com.vowel.resources/social/vowel-share-thumb.jpg' ); background-position: center; background-repeat: no-repeat; background-size: cover; height: 120px; display: block;"><img alt="vowel-share-thumb.jpg" class="ipsHide" data-loaded="true" data-src="https://s3.amazonaws.com/com.vowel.resources/social/vowel-share-thumb.jpg" src="https://jimiwikman.se/applications/core/interface/js/spacer.png" style="height: auto;"></a>
	</div>

	<div style="padding: 10px;">
		<h3 class="ipsRichEmbed_itemTitle  ipsTruncate ipsTruncate_line  ipsType_blendLinks">
			<a href="https://www.vowel.com/" rel="external nofollow" style="text-decoration: none; margin-bottom: 5px;" title="Home - Vowel">Home - Vowel</a>
		</h3>

		<div class="ipsType_light">
			WWW.VOWEL.COM
		</div>

		<hr class="ipsHr">
		<div class="ipsSpacer_top ipsSpacer_half" data-ipstruncate="" data-ipstruncate-size="3 lines" data-ipstruncate-type="remove" style="overflow-wrap: break-word;">
			<span>Vowel is a tool that captures your team&rsquo;s meetings. Use it to annotate meetings in real-time, tag action items, call back ideas verbatim&mdash;and a whole lot more.</span>
		</div>
	</div>
</div>

<div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" data-ipstabbar="" data-ipstabbar-contentarea="#" data-ipstabbar-defaulttab="1" data-ipstabbar-updateurl="false" id="elTabBar">
	<ul role="tablist">
		<li>
			<a aria-selected="true" class="ipsType_center ipsTabs_item ipsTabs_activeItem" href="" id="1" rel="" role="tab"> View </a>
		</li>
		<li>
			<a class="ipsType_center ipsTabs_item" href="" id="2" rel="" role="tab"> Rows </a>
		</li>
		<li>
			<a class="ipsType_center ipsTabs_item" href="" id="3" rel="" role="tab"> indexBlock </a>
		</li>
		<li>
			<a class="ipsType_center ipsTabs_item" href="" id="4" rel="" role="tab"> featuredMovie </a>
		</li>
		<li>
			<a class="ipsType_center ipsTabs_item" href="" id="5" rel="" role="tab"> CSS </a>
		</li>
	</ul>
</div>

<section class="ipsTabs_panels ipsTabs_contained">
	<div class="ipsTabs_panel" id="ipsTabs_elTabBar_1_panel">

	<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style="">




{{if $club = $movie->container()->club()}}
	{{if settings.clubs and settings.clubs_header == 'full'}}
		{template="header" app="core" group="clubs" params="$club, $movie->container()"}
	{{endif}}
	<div id='elClubContainer'>
{{endif}}
 
 {{$fields = $movie->customFields();}}
 {{if $fields['field_1']}}    
<div class="full-width" style="background-image:url('https://jimiwikman.se/uploads/{$fields['field_1']|raw}');">
   
 <!-- Official Trailer -->
{{if $fields['field_8']}}  
<a href='#dialogContent' data-ipsDialog data-ipsDialog-size="fullscreen" data-ipsDialog-content='#dialogContent'>
  <div  class="JWSE_play">
  <span  class="JWSE_playBtn"><i class="far fa-play-circle"></i></span>
  <span class="JWSE_playTxt">Play Trailer</span>
  </div>  
 </a>
        
<div id="dialogContent" class="JWSE_video-container ipsHide">
  <iframe src="https://www.youtube.com/embed/{$fields['field_8']}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>        
 {{endif}}       
        
      </div>      
     {{else}}
            <div class="full-width" style="background-image:url('{media="528"}')"></div>      
      {{endif}}
      
<div class="">
<div class="ipsPageHeader ipsClearfix ipsSpacer_bottom">

	{template="contentItemMessages" group="global" app="core" params="$movie->getMessages(), $movie"}

	<div class='ipsBox ipsResponsive_pull'>
		<div class='ipsColumns ipsColumns_collapsePhone'>
			<aside class='ipsColumn ipsColumn_veryWide ipsPadding_right:none'>
				<div class='ipsPad lg:ipsPos_sticky'>
					<div>
						{{if $movie->cover_thumb}}
							<div class='ipsPos_center'>
                              <div class="sosMovieCover">
                              
                              <!-- JWSE Rating Circle -->
            {{if $fields['field_5']}}
              <div class="jwse_ratingCircle"> 
                <svg viewBox="0 0 36 36" class="circular-chart orange">
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text>
                  <text x="27" y="15.35" class="percentageSmall">%</text>
                </svg>
              </div>
              
              
              {{elseif $fields['field_5'] == 0}}
              
                <div class="jwse_ratingCircle"> 
                <svg viewBox="0 0 36 36" class="circular-chart">
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="0, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="18" y="19.35" class="percentage unrated">Unrated</text>
                </svg>
              </div>
              {{endif}}
                              
                              
							  {template="coverPhoto" group="global" app="movies" params="$movie->cover_thumb, '', $movie->title, 'large'"}
                              </div>
                                
                                
                              <div class="jwse_MoviePhoto_Footer">
                              {template="rating" group="global" location="front" app="core" params="'large', $movie->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $movie->memberReviewRating()"}&nbsp;&nbsp; <span class='ipsType_normal ipsType_light'>({lang="num_reviews" pluralize="$movie->reviews"})</span>
                              </div>
                              
							</div>
						{{else}}
							<center><img src='{resource="movie.PNG" app="movies" location="front"}'></center>
						{{endif}}
						<hr class='ipsHr'>
						{{if $movie->imdb_id OR $movie->homepage OR $movie->wikipedia OR $movie->instagram OR $movie->facebook OR $movie->twitter OR $movie->justwatch}}
							<ul class='ipsList_inline ipsSpacer_both ipsType_center'>
								{{if $movie->homepage}}
									<li><a title="{lang="movies_homepage_visit"}" data-ipsTooltip target="_blank" href="{$movie->homepage}"> <i class="fa fa-link fa-2x" aria-hidden="true"></i></a></li>
								{{endif}}
								{{if $movie->imdb_id}}
									<li><a title="{lang="movies_imdb_page_visit"}" data-ipsTooltip target="_blank" href="https://www.imdb.com/title/{$movie->imdb_id}/"> <i class="fa fa-imdb fa-2x" aria-hidden="true"></i></a></li>
								{{endif}}

								{{if $movie->facebook}}
									<li><a title="{lang="movies_facebook_page"}" data-ipsTooltip target="_blank" href="{$movie->facebook}"> <i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a></li>
								{{endif}}
								{{if $movie->instagram}}
									<li><a title="{lang="movies_instagram_page"}" data-ipsTooltip target="_blank" href="{$movie->instagram}"> <i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
								{{endif}}
								{{if $movie->justwatch}}
									<li><a title="{lang="movies_justwatch_page"}" data-ipsTooltip target="_blank" href="{$movie->justwatch}"> <i class="fa fa-play fa-2x" aria-hidden="true"></i></a></li>
								{{endif}}
								{{if $movie->twitter}}
									<li><a title="{lang="movies_twitter_page"}" data-ipsTooltip target="_blank" href="{$movie->twitter}"> <i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
								{{endif}}
								{{if $movie->wikipedia}}
									<li><a title="{lang="movies_wikipedia_page"}" data-ipsTooltip target="_blank" href="{$movie->wikipedia}"> <i class="fa fa-wikipedia-w fa-2x" aria-hidden="true"></i></a></li>
								{{endif}}
								{{if $movie->canEdit()}}
									<li>
										<a href="{$movie->url()->csrf()->setQueryString( array( 'do' => 'editUrls' ) )}" data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="movie_edit_urls"}">
											<i data-ipsTooltip title="{lang='movie_edit_urls'}" class="fa fa-pencil fa-fw" aria-hidden="true"></i>
										</a>
									</li>
								{{endif}}
							</ul>
							<hr class='ipsHr'>
						{{endif}}
						<ul class="ipsDataList ipsDataList_reducedSpacing ipsSpacer_top">
							<li class="ipsDataItem">
								<span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_type"}</strong></span>
								<span class="ipsDataItem_generic">{lang="movie_type_{$movie->type}"}</span>
							</li>
							<li class="ipsDataItem">
								<span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_status"}</strong></span>
								<span class="ipsDataItem_generic">{$movie->status}</span>
							</li>
							
							{{if $movie->type=='tv'}}
								<li class="ipsDataItem">
									<span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_seasons"}</strong></span>
									<span class="ipsDataItem_generic">{$movie->seasons}</span>
								</li>
								<li class="ipsDataItem">
									<span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_episodes"}</strong></span>
									<span class="ipsDataItem_generic">{$movie->episodes}</span>
								</li>
							{{endif}}
							{{if $movie->type=='movie'}}
								<li class="ipsDataItem">
									<span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_original_language"}</strong></span>
									{{$language = \IPS\movies\Movie::getLanguageName( $movie->original_language );}}
									<span class="ipsDataItem_generic">{$language}</span>
								</li>
								{{if $movie->budget}}
									<li class="ipsDataItem">
										<span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_budget"}</strong></span>
										<span class="ipsDataItem_generic">{expression="\IPS\Member::loggedIn()->language()->formatNumber( $movie->budget, 2 )"}</span>
									</li>
								{{endif}}
								{{if $movie->revenue}}
									<li class="ipsDataItem">
										<span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_revenue"}</strong></span>
										<span class="ipsDataItem_generic">{expression="\IPS\Member::loggedIn()->language()->formatNumber( $movie->revenue, 2 )"}</span>
									</li>
								{{endif}}
							{{endif}}
							
						</ul>
						{{if $movie->topic()}}
							<hr class='ipsHr'>
							<a href='{$movie->topic()->url()}' title='{lang="movie_discussion_topic"}' class='ipsButton ipsButton_primary ipsButton_fullWidth'>{lang="movie_discussion_topic"}</a>
						{{endif}}
						<div class='ipsResponsive_showPhone ipsResponsive_block ipsSpacer_top'>
							{template="follow" app="core" group="global" params="'movies', 'movie', $movie->id, $movie->followersCount()"}
						</div>
					</div>
				</div>
			</aside>
			<article class='ipsColumn ipsColumn_fluid ipsPadding_left:none'>
				<div class='ipsPad'>
					<section class='ipsType_normal whiteBack'>
                      
                      
                      
      <div class='ipsPageHeader ipsResponsive_pull ipsBox ipsPadding ipsSpacer_bottom'>
		<div class='ipsFlex ipsFlex-ai:center ipsFlex-fw:wrap ipsGap:4'>
			<div class='ipsFlex-flex:11'>
             <h1 class='ipsType_pageTitle ipsContained_container'>
					
					{{if $movie->mapped('locked')}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="movies_locked"}'><i class='fa fa-lock'></i></span></span>
					{{endif}}
					{{if $movie->hidden() === 1}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span>
					{{elseif $movie->hidden() === -1}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span>
					{{elseif $movie->hidden() === -2}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->deletedBlurb()}'><i class='fa fa-trash'></i></span></span>
					{{endif}}
					{{if $movie->canToggleItemModeration() and $movie->itemModerationEnabled()}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="topic_moderation_enabled"}'><i class='fa fa-user-times'></i></span></span>
					{{endif}}
					{{if $movie->mapped('pinned')}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span>
					{{endif}}
					{{if $movie->mapped('featured')}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span>
					{{endif}}

					{{if $movie->canEdit()}}
						<span class='ipsType_break ipsContained' data-controller="core.front.core.moderation">
							{{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}<span data-role="editableTitle" title='{lang="click_hold_edit"}'>{$movie->title}</span>
						</span>
					{{else}}
						<span class='ipsType_break ipsContained'>{{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}{$movie->title}</span>
					{{endif}}
                  {{if $movie->status == 'Released'}}
				{{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}}
                  <span class="jwse_movieYear">( {$date->format('Y')} )</span>
                  {{endif}}
                  {{if $fields['field_4']}}  
                  <span class="jwse_movieYear">( {{$fields = $movie->customFields();}}{$fields['field_4']} )</span>
                 {{endif}}
                  {{if $movie->prefix() OR ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}}
						<span {{if !$movie->prefix()}}class='ipsHide'{{endif}} {{if ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}}data-editablePrefix{{endif}}>
							{template="prefix" group="global" app="core" params="$movie->prefix( TRUE ), $movie->prefix()"}
						</span>
					{{endif}}
				</h1>
              
              <div class="jswe_movieMeta">
                {{if $fields['field_6']}} 
                <span class="ipsDataItem_generic certification">{{$fields = $movie->customFields();}}{$fields['field_6']|raw}</span>
                {{endif}}
                
              <!-- Movie Release Date -->
                {{if $movie->status == 'Released'}}
				{{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}}
				<span class="ipsDataItem_generic">{datetime="$date" dateonly="true"}</span>
				{{endif}}
                
                <!-- Movie Genres -->
                {{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}}
				<span class="ipsDataItem_generic">{$genres}</span>
                
                <!-- Movie Runtime -->
                {{if $movie->runtime}}
				{{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}}
				<span class="ipsDataItem_generic">{$runtime}</span>
				{{endif}}
                
              
              </div>
              
              
				{{if $movie->subtitle}}
					<span class="jwse_movieSubtitle">{$movie->subtitle}</span>
				{{endif}}
              
              <span class="jwse_movieDescription">{lang="meta_description"}</span>
									<p>
										{$movie->description|raw}
									</p>
              

				{{if \count( $movie->tags() ) OR ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) )}}
					{template="tags" group="global" app="core" params="$movie->tags(), FALSE, FALSE, ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) ) ? $movie->url() : NULL"}
				{{endif}}
			</div>
			
		</div>
		<hr class='ipsHr'>
		<div class='ipsPageHeader__meta ipsFlex ipsFlex-jc:between ipsFlex-ai:center ipsFlex-fw:wrap ipsGap:3'>
			<div class='ipsFlex-flex:11'></div>
			<div class='ipsFlex-flex:01 ipsResponsive_hidePhone'>
				<div class='ipsFlex ipsFlex-ai:center ipsFlex-jc:center ipsGap:3 ipsGap_row:0'>
					{{if \count( $movie->shareLinks() )}}
						{template="shareButton" app="core" group="sharelinks" params="$movie"}
					{{endif}}
					{template="promote" app="core" group="global" params="$movie"}
					{template="follow" app="core" group="global" params="'movies', 'movie', $movie->id, $movie->followersCount()"}
				</div>
			</div>
		</div>
	</div>
	{{if $movie->hidden() === 1 and $movie->canUnhide()}}
		<div class="ipsMessage ipsMessage_warning ipsSpacer_both">
			<p class="ipsType_reset">{lang="movie_pending_approval"}</p>
			<br>
			<ul class='ipsList_inline'>
				<li><a href="{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unhide' ) )}" class="ipsButton ipsButton_positive ipsButton_verySmall" title='{lang="approve_title_link"}'><i class="fa fa-check"></i> {lang="approve"}</a></li>
				{{if $movie->canDelete()}}
					<li><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'delete' ) )}' data-confirm title='{lang="movies_delete_title"}' class='ipsButton ipsButton_negative ipsButton_verySmall'><i class='fa fa-times'></i> {lang="delete"}</a></li>
				{{endif}}
			</ul>
		</div>
	{{endif}}
                      
                      
                      
                      
						<div class='ipsTabs ipsClearfix' id='elTabBar' data-ipsTabBar data-ipsTabBar-contentArea='#elTabContent' data-ipsTabBar-updateURL='false'>
							<a href='#elTabBar' data-action='expandTabs'><i class='fa fa-caret-down'></i></a>
							<ul role='tablist'>
                        		<li role='presentation'>
									<a href='{$movie->url()}' role='tab' id='elTabMovie' class='ipsTabs_item' aria-selected="true">
										My Thoughts
									</a>
								</li>
								
                              
                               {{if \IPS\Settings::i()->movies_cast}}
									<li role='presentation'>
										<a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'cast' ) )}' id='elTabCast' role='tab' class='ipsTabs_item'>
											{lang="movies_tab_cast"}
										</a>
									</li>
								{{endif}}
                              
								{{if \IPS\Settings::i()->movies_crew}}
									<li role='presentation'>
										<a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'crew' ) )}' id='elTabCrew' role='tab' class='ipsTabs_item'>
											{lang="movies_tab_crew"}
										</a>
									</li>
								{{endif}}
								{{if $movie->type == 'tv'}}
									<li role='presentation'>
										<a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'seasons' ) )}' id='elTabEpisodes' role='tab' class='ipsTabs_item'>
											{lang="movies_tab_seasons"}
										</a>
									</li>
								{{endif}}
								{{if \IPS\Settings::i()->movies_videos}}
									<li role='presentation'>
										<a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'videos' ) )}' id='elTabVideos' role='tab' class='ipsTabs_item'>
											{lang="movies_tab_videos"}
										</a>
									</li>
								{{endif}}
								{{if \IPS\Settings::i()->movies_posters}}
									<li role='presentation'>
										<a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'posters' ) )}' id='elTabPosters' role='tab' class='ipsTabs_item'>
											{lang="movies_tab_posters"}
										</a>
									</li>
								{{endif}}
								{{if \IPS\Settings::i()->movies_images}}
									<li role='presentation'>
										<a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'images' ) )}' id='elTabImages' role='tab' class='ipsTabs_item'>
											{lang="movies_tab_images"}
										</a>
									</li>
								{{endif}}
								{{if \IPS\Settings::i()->movies_similar}}
									<li role='presentation'>
										<a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'similar' ) )}' id='elTabSimilar' role='tab' class='ipsTabs_item'>
											{{if $movie->type == 'movie'}}
												{lang="movies_tab_similar"}
											{{else}}
												{lang="movies_tab_similar_tv"}
											{{endif}}
										</a>
									</li>
								{{endif}}
                              
                              
                              
                              
							</ul>
						</div>
						<section id='elTabContent'>
							<div class="ipsBox ipsPad">
								<div itemprop='text' data-controller='core.front.core.lightboxedImages'>
								<div class="jwse_MyReviewFace"></div>
                                  <div class="jwse_MyReviewText">
                                    <span class="jwse_MyReviewTextRating">
                                    
                                      <!-- JWSE Rating Circle -->
              {{if $fields['field_5']}}
              <div class="jwse_ratingCircle"> 
                <svg viewBox="0 0 36 36" class="circular-chart orange">
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text>
                  <text x="27" y="15.35" class="percentageSmall">%</text>
                </svg>
              </div>
              
              
              {{else}}
              
              
                <div class="jwse_ratingCircle"> 
                <svg viewBox="0 0 36 36" class="circular-chart">
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="0, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="18" y="19.35" class="percentage unrated">Unrated</text>
                </svg>
              </div>
              {{endif}}
                                    
                                    </span>
                                    
                                    {{if $fields['field_2']}}
                                    {{$fields = $movie->customFields();}}{$fields['field_2']|raw}
                                    {{else}}
                                    <p>
                                      <i>I have not written a review for this {{if $movie->type == 'movie'}}Movie{{else}}TV Show{{endif}} yet.<br />
                                        Write a comment and remind me to write one!</i>
                                    
                                    </p>
                                    {{endif}}
                                    
                                    
                                    
                                    
                               		</div>
                                  <br style="clear:both;" />
                                  
                                 
                               
								</div>
								
								{{if $movie->container()->auto_content AND \IPS\Member::loggedIn()->language()->checkKeyExists( "movies_category_{$movie->container()->id}_append_content" )}}
									{{$lang = \IPS\Member::loggedIn()->language()->addToStack( "movies_category_{$movie->container()->id}_append_content" );}}
									{{\IPS\Member::loggedIn()->language()->parseOutputForDisplay( $lang );}}
									{{$content = str_replace( "%MOVIENAME%", $movie->title, $lang );}}
									{{\IPS\Member::loggedIn()->language()->parseOutputForDisplay( $content );}}
									{$content|raw}
								{{endif}}
							</div>
						</section>
					</section>
				</div>
			</article>
		</div>

  	{{if ( $movie->canEdit() or $movie->canPin() or $movie->canUnpin() or $movie->canFeature() or $movie->canUnfeature() or $movie->canHide() or $movie->canUnhide() or $movie->canMove() or $movie->canLock() or $movie->canUnlock() or $movie->canDelete() ) or ( $movie->hidden() == -2 AND \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') ) or $movie->canReportOrRevoke() or ( \IPS\IPS::classUsesTrait( $movie, 'IPS\Content\Reactable' ) and settings.reputation_enabled )}}
      <div class='ipsItemControls'>
        {{if \IPS\IPS::classUsesTrait( $movie, 'IPS\Content\Reactable' ) and settings.reputation_enabled}}
        {template="reputation" app="core" group="global" params="$movie"}
        {{endif}}
        {{if ( $movie->canEdit() or $movie->canPin() or $movie->canUnpin() or $movie->canFeature() or $movie->canUnfeature() or $movie->canHide() or $movie->canUnhide() or $movie->canMove() or $movie->canLock() or $movie->canUnlock() or $movie->canDelete() ) or ( $movie->hidden() == -2 AND \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') ) or $movie->canReportOrRevoke()}}
        <ul class='ipsComment_controls ipsClearfix ipsItemControls_left'>
          {{if ( $movie->canEdit() or $movie->canPin() or $movie->canUnpin() or $movie->canFeature() or $movie->canUnfeature() or $movie->canHide() or $movie->canUnhide() or $movie->canMove() or $movie->canLock() or $movie->canUnlock() or $movie->canDelete() ) or ( $movie->hidden() == -2 AND \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') )}}
          <li>
            <a href='#elMovieActions_menu' id='elMovieActions' class='ipsButton ipsButton_light ipsButton_verySmall ipsButton_fullWidth' data-ipsMenu>{lang="{$movie->type}_actions"} <i class='fa fa-caret-down'></i></a>
            <ul id='elMovieActions_menu' class='ipsMenu ipsMenu_auto ipsHide'>
              {{if $movie->canReportOrRevoke() === TRUE}}
              <li class='ipsMenu_item'>
                <a href='{$movie->url('report')}' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="report_movie"}" data-ipsDialog-remoteSubmit data-ipsDialog-flashMessage="{lang="report_submit_success"}" title="{lang="report_movie"}" >{lang="report"}</a>
              </li>
              <li class='ipsMenu_sep'><hr></li>
              {{endif}}
              {{if \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') AND $movie->hidden() == -2}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'restore' ) )}' data-confirm data-confirmSubMessage='{lang="restore_as_visible_desc"}'>{lang="restore_as_visible"}</a></li>
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'restoreAsHidden' ) )}' data-confirm data-confirmSubMessage='{lang="restore_as_hidden_desc"}'>{lang="restore_as_hidden"}</a></li>
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'delete', 'immediate' => 1 ) )}' data-confirm data-confirmSubMessage='{lang="delete_immediately_desc"}'>{lang="delete_immediately"}</a></li>
              {{else}}
              {{if $movie->canEdit()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->setQueryString( array( 'do' => 'edit' ) )}' title='{lang="edit"}'>{lang="edit"}</a></li>
              {{endif}}
              {{if $movie->canFeature()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'feature' ) )}'>{lang="feature"}</a></li>
              {{endif}}
              {{if $movie->canUnfeature()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unfeature' ) )}'>{lang="unfeature"}</a></li>
              {{endif}}
              {{if $movie->canPin()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'pin' ) )}'>{lang="pin"}</a></li>
              {{endif}}
              {{if $movie->canUnpin()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unpin' ) )}'>{lang="unpin"}</a></li>
              {{endif}}
              {{if $movie->canHide()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'hide' ) )}' data-ipsDialog data-ipsDialog-title="{lang="hide"}">{lang="hide"}</a></li>
              {{endif}}
              {{if $movie->canUnhide()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unhide' ) )}'>{{if $movie->hidden() === 1}}{lang="approve"}{{else}}{lang="unhide"}{{endif}}</a></li>
              {{endif}}
              {{if $movie->canLock()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'lock' ) )}'>{lang="lock"}</a></li>
              {{endif}}
              {{if $movie->canUnlock()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unlock' ) )}'>{lang="unlock"}</a></li>
              {{endif}}
              {{if $movie->canMove()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->setQueryString( array( 'do' => 'move' ) )}' data-ipsDialog data-ipsDialog-size='narrow' data-ipsDialog-title="{lang="move"}">{lang="move"}</a></li>
              {{endif}}
              {{if $movie->canDelete()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'delete' ) )}' data-confirm>{lang="delete"}</a></li>
              {{endif}}
              {{if $movie->canOnMessage( 'add' )}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'messageForm' ) )}' data-ipsDialog data-ipsDialog-title='{lang="add_message"}'>{lang='add_message'}</a></li>
              {{endif}}
              {{if $movie->canToggleItemModeration()}}
              <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'toggleItemModeration' ) )}' data-confirm data-confirmMessage='{{if $movie->itemModerationEnabled()}}{lang="disable_movie_moderation_confirm"}{{else}}{lang="enable_movie_moderation_confirm"}{{endif}}'>{{if $movie->itemModerationEnabled()}}{lang="disable_topic_moderation"}{{else}}{lang="enable_topic_moderation"}{{endif}}</a></li>
              {{endif}}
              {{if \IPS\Member::loggedIn()->modPermission('can_reimport_data')}}
              <li class='ipsMenu_sep'><hr></li>
              <li class="ipsMenu_item"><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'reimport' ) )}' data-confirm>{lang="movies_reimport_{$movie->type}_data"}</a></li>
              {{endif}}
              {{if \IPS\Member::loggedIn()->modPermission('can_view_moderation_log')}}
              <li class='ipsMenu_sep'><hr></li>
              <li class="ipsMenu_item"><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'modLog' ) )}' data-ipsDialog data-ipsDialog-title='{lang="moderation_history"}'>{lang="moderation_history"}</a></li>
              {{endif}}
              {{endif}}
            </ul>
          </li>
          {{elseif $movie->canReportOrRevoke() === TRUE}}
          <li>
            <a href='{$movie->url('report')}' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="report_file"}" data-ipsDialog-remoteSubmit data-ipsDialog-flashMessage="{lang="report_submit_success"}" title="{lang="report_file"}" class='ipsButton ipsButton_link ipsButton_verySmall ipsButton_fullWidth'>{lang="report"}</a>
          </li>
          {{endif}}
        </ul>
        {{endif}}
      </div>
  	{{endif}}
	</div>

	<div class='ipsBox ipsPadding ipsResponsive_pull ipsResponsive_showPhone ipsMargin_top'>
		<div class='ipsGap_row:3'>
			<div>
				{template="follow" app="core" group="global" params="'movies', 'movie', $movie->id, $movie->followersCount()"}
			</div>
			{{if \count( $movie->shareLinks() )}}
				<div>
					{template="shareButton" app="core" group="sharelinks" params="$movie, 'verySmall', 'light'"}
				</div>
			{{endif}}
			<div>
				{template="promote" app="core" group="global" params="$movie"}
			</div>
		</div>
	</div>

	{{if $prev || $next}}
		<div class='ipsGrid ipsGrid_collapsePhone ipsPager ipsSpacer_top'>
			{{if $prev !== NULL}}
				<div class="ipsGrid_span6 ipsType_left ipsPager_prev">
					<a href="{$prev->url()}" title="{lang="prev_movie"}" rel="prev">
						<span class="ipsPager_type">{lang="prev_movie"}</span>
						<span class="ipsPager_title ipsType_light ipsType_break">{wordbreak="$prev->mapped('title')"}</span>
					</a>
				</div>
			{{else}}
				<div class="ipsGrid_span6 ipsType_left ipsPager_prev">
					<a href="{$movie->container()->url()}" title="{lang="go_to_category" sprintf="$movie->container()->_title"}" rel="up">
						<span class="ipsPager_type">{lang="movie_back_to_category"}</span>
						<span class="ipsPager_title ipsType_light ipsType_break">{lang="$movie->container()->_title" wordbreak="true"}</span>
					</a>
				</div>
			{{endif}}
			{{if $next !== NULL}}
				<div class="ipsGrid_span6 ipsType_right ipsPager_next">
					<a href="{$next->url()}" title="{lang="next_movie"}" rel="next">
						<span class="ipsPager_type">{lang="next_movie"}</span>
						<span class="ipsPager_title ipsType_light ipsType_break">{wordbreak="$next->mapped('title')"}</span>
					</a>
				</div>
			{{else}}
				<div class="ipsGrid_span6 ipsType_right ipsPager_next">
					<a href="{$movie->container()->url()}" title="{lang="go_to_category" sprintf="$movie->container()->_title"}" rel="up">
						<span class="ipsPager_type">{lang="movie_back_to_category"}</span>
						<span class="ipsPager_title ipsType_light ipsType_break">{lang="$movie->container()->_title" wordbreak="true"}</span>
					</a>
				</div>
			{{endif}}
		</div>
		<hr class='ipsHr'>
	{{endif}}

	{{if $commentsAndReviews}}
		<a id="replies"></a>
		<h2 class='ipsHide'>{lang="user_feedback"}</h2>
		<div class='ipsMargin_top'>{$commentsAndReviews|raw}</div>
	{{endif}}
</div>
      </div>
{{if $movie->container()->club()}}
	</div>
{{endif}}
<div class="ipsClear ipsClearfix"></div>


</pre>
	
	</div>

	<div class="ipsTabs_panel" id="ipsTabs_elTabBar_2_panel">
		<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style="">
<span class="pln">Message</span></pre>
	</div>

	<div class="ipsTabs_panel" id="ipsTabs_elTabBar_3_panel">
		<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style="">
<span class="pln">Message</span></pre>
	</div>

	<div class="ipsTabs_panel" id="ipsTabs_elTabBar_4_panel">
		<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style="">
<span class="pln">Message </span></pre>
	</div>

	<div class="ipsTabs_panel" id="ipsTabs_elTabBar_5_panel">
		<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style="">
<span class="pln">Message</span></pre>
	</div>
</section>

 

 
{{if \count( $movies )}}
{{$rowCount=0;}}
	{{foreach $movies as $movie}}
		{{$rowCount++;}}
		<li class='ipsDataItem {{if $movie->unread()}}ipsDataItem_unread{{endif}} {{if method_exists( $movie, 'tableClass' ) && $movie->tableClass()}}ipsDataItem_{$movie->tableClass()}{{endif}} {{if $movie->hidden()}}ipsModerated{{endif}}' data-ipsLazyLoad>
			<div class='ipsDataItem_generic ipsDataItem_size3 ipsPos_top'>
              
              <!-- JWSE Rating Circle -->
       		{{$fields = $movie->customFields();}}
              {{if $fields['field_5']}} 
              <div class="jwse_ratingCircle jwse_ratingCircle-categoryList"> 
                <svg viewBox="0 0 36 36" class="circular-chart circular-chart-categoryList orange" >
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text>
                  <text x="27" y="15.35" class="percentageSmall">%</text>
                </svg>
              </div>
              
              
              {{elseif $fields['field_5'] == 0}}
              
              
                <div class="jwse_ratingCircle jwse_ratingCircle-categoryList"> 
                <svg viewBox="0 0 36 36" class="circular-chart circular-chart-categoryList">
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="0, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="18" y="19.35" class="percentage unrated">Unrated</text>
                </svg>
              </div>
              {{endif}}
              
				{{if $movie->cover_thumb}}
					{template="coverPhoto" group="global" app="movies" params="$movie->cover_thumb, $movie->url(), $movie->title, 'medium'"}
				{{else}}
					<a class="sosMovieCover_medium" title='{lang="view_this" sprintf="$movie->title"}' href="{$movie->url()}">
						<img src='{resource="movie.PNG" app="movies" location="front"}'>
					</a>
				{{endif}}
            </div>
			<div class='ipsDataItem_main'>
				<h3 class='ipsDataItem_title ipsType_center ipsType_sectionHead ipsContained_container'>
					{{if $movie->unread()}}
						<span><span class='ipsItemStatus ipsItemStatus_small' data-ipsTooltip title='{{if $movie->unread() === -1}}{lang="new"}{{else}}{lang="updated"}{{endif}}'><i class="fa fa-circle"></i></span>&nbsp;</span>
					{{endif}}

					{{if $movie->mapped('locked') || $movie->mapped('pinned') || $movie->affiliate || $movie->mapped('featured') || $movie->hidden() === -1 || $movie->hidden() === 1}}
						{{if $movie->mapped('locked')}}
							<span><span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_negative" data-ipsTooltip title='{lang="locked"}'><i class='fa fa-lock'></i></span></span>
						{{endif}}
						{{if $movie->hidden() === -1}}
							<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$movie->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span>
						{{elseif $movie->hidden() === 1}}
							<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span>
						{{endif}}
						{{if $movie->mapped('pinned')}}
							<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span>
						{{endif}}
						{{if $movie->mapped('featured')}}
							<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span>
						{{endif}}
					{{endif}}

					{{if $movie->prefix()}}
						<span>{template="prefix" group="global" app="core" params="$movie->prefix( TRUE ), $movie->prefix()"}</span>
					{{endif}}

					<span class='ipsType_break ipsContained'>
						<a href='{$movie->url()}' class='' title='{{if $movie->mapped('title')}}{$movie->mapped('title')}{{else}}{lang="content_deleted"}{{endif}}  {{if $movie->canEdit()}}{lang="click_hold_edit"}{{endif}}' {{if $movie->canEdit()}} data-role="editableTitle"{{endif}} {{if $movie->tableHoverUrl and $movie->canView()}} data-ipsHover data-ipsHover-target='{$movie->url()->setQueryString('preview', 1)}' data-ipsHover-timeout='1.5'{{endif}}>
							<span>
								{{if $movie->mapped('title') or $movie->mapped('title') == 0}}{$movie->mapped('title')}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}}
							</span>
						</a>
					</span>
				</h3>
				<p class='ipsType_light'>{lang="byline_nodate" htmlsprintf="$movie->author()->link()"}</p>
				<div class='ipsType_richText ipsType_normal ipsSpacer_both' data-ipsTruncate data-ipsTruncate-type="remove" data-ipsTruncate-size="2 lines">
					{$movie->truncated(TRUE)|raw}
				</div>
				<p class='ipsType_reset ipsType_light ipsType_blendLinks'>
					{{if \IPS\Request::i()->app != 'movies'}}
						{lang="in"} <a href="{$movie->container()->url()}">{$movie->container()->_title}</a>
					{{endif}}
				</p>

				{{if \count( $movie->tags() )}}
					<div class=" ipsSpacer_top">
                      {template="tags" group="global" app="core" params="$movie->tags()"}
                     </div>
                {{endif}}

				<p class='ipsType_reset'>
					<ul class="ipsList_inline">
						{{if $movie->runtime}}
							{{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}}
							<li class='ipsType_light ipsType_blendLinks'>{lang="movie_running_{$movie->type}"}: {$runtime}</li>
						{{endif}}
						{{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}}
						<li class='ipsType_light ipsType_blendLinks'>{$genres}</li>
					</ul>
				</p>
			</div>
			<div class='ipsDataItem_generic ipsDataItem_size8'>
				{{if $movie->container()->allowcomments}}
					<p class='ipsType_normal {{if !$movie->comments}}ipsType_light{{endif}}'>
						{{if $movie->comments}}
							<a href='{$movie->url()->setQueryString( 'tab', 'comments' )->setFragment('replies')}'>
						{{endif}}
						<i class='fa fa-comment'></i> {lang="num_comments" pluralize="$movie->comments"}
						{{if $movie->comments}}
							</a>
						{{endif}}
					</p>
				{{endif}}
				{{if $movie->container()->allowreviews}}
					{{if $movie->reviews}}
						<a href='{$movie->url()->setQueryString( 'tab', 'reviews' )->setFragment('reviews')}'>
					{{endif}}
					{template="rating" group="global" location="front" app="core" params="'large', $movie->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $movie->memberReviewRating()"}&nbsp;&nbsp; <span class='ipsType_normal ipsType_light'>({lang="num_reviews" pluralize="$movie->reviews"})</span>
					{{if $movie->reviews}}
						</a>
					{{endif}}
				{{endif}}
				<p class='ipsType_medium'><strong>{{if $movie->updated == $movie->submitted}}{lang="submitted"} {datetime="$movie->submitted"}{{else}}{lang="updated"} {datetime="$movie->updated"}{{endif}}</strong></p>
			</div>
			{{if method_exists( $table, 'canModerate' ) AND $table->canModerate()}}
				<div class='ipsDataItem_modCheck'>
					<span class='ipsCustomInput'>
						<input type='checkbox' data-role='moderation' name="moderate[{$movie->id}]" data-actions="{expression="implode( ' ', $table->multimodActions( $movie ) )"}" data-state='{{if $movie->tableStates()}}{$movie->tableStates()}{{endif}}'>
						<span></span>
					</span>
				</div>
			{{endif}}
		</li>
	{{endforeach}}
{{endif}}

 

<li class='ipsAreaBackground_reset ipsType_blendLinks ipsClearfix sosMovieIndexBlock sosMovieIndexBlockItem ipsPad_half ipsCarousel_item' data-ipsLazyLoad>
<div class="indexBlock">	
  <div class='ipsPos_center'>
     <div class="sosMovieCover">
 	
   
   
     <!-- JWSE Rating Circle -->
       		{{$fields = $movie->customFields();}}
              {{if $fields['field_5']}} 
              <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock"> 
                <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock orange" >
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text>
                  <text x="27" y="15.35" class="percentageSmall">%</text>
                </svg>
              </div>
              
              
              {{elseif $fields['field_5'] == 0}}
              
              
                <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock"> 
                <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock">
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="0, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="18" y="19.35" class="percentage unrated">Unrated</text>
                </svg>
              </div>
              {{endif}}
   
   
   <a href='{$movie->url()}' title='{lang="view_this_movie" sprintf="$movie->title"}'>
     <div class="">
  {{if $movie->cover_thumb}}
  
			{template="bgCover" group="global" app="movies" params="$movie->cover_thumb, $movie->url(), $movie->title, 'big'"}
		{{else}}
			<a title='{lang="view_this" sprintf="$movie->title"}' href="{$movie->url()}">
				<img class="bgMovieCover" src='{resource="movie.PNG" app="movies" location="front"}'>
			</a>

		{{endif}}
     </div>
   </a>
    
     <div class="jwse_MoviePhoto_Footer jwse_MoviePhoto_Footer-indexBlock">
{template="rating" group="global" location="front" app="core" params="'large', $movie->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $movie->memberReviewRating()"}&nbsp;&nbsp; 
</div>
    </div>
  </div>
  </div>

</li>

 

<li class='ipsCarousel_item ipsAreaBackground_reset ipsPad' data-ipsLazyLoad>
	<div class='ipsColumns ipsColumns_collapsePhone'>
		<div class='ipsColumn ipsColumn_medium ipsType_center'>
          
            <!-- JWSE Rating Circle -->
       		{{$fields = $movie->customFields();}}
              {{if $fields['field_5']|raw}} 
              <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock jwse_ratingCircle-Featured"> 
                <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock circular-chart-Featured orange" >
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text>
                  <text x="27" y="15.35" class="percentageSmall">%</text>
                </svg>
              </div>
              
              
              {{else}}
              
              
                <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock jwse_ratingCircle-Featured"> 
                <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock circular-chart-Featured">
                  <path class="circle-bg"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <path class="circle"
                        stroke-dasharray="0, 100"
                        d="M18 2.0845
                           a 15.9155 15.9155 0 0 1 0 31.831
                           a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                  <text x="18" y="19.35" class="percentage unrated">Unrated</text>
                </svg>
              </div>
              {{endif}}
          
			{template="coverPhoto" group="global" app="movies" params="$movie->cover_thumb, $movie->url(), $movie->title, 'large'"}
		</div>
		<div class='ipsColumn ipsColumn_fluid'>
    <h1 class='ipsType_pageTitle ipsContained_container'>
					
					{{if $movie->mapped('locked')}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="movies_locked"}'><i class='fa fa-lock'></i></span></span>
					{{endif}}
					{{if $movie->hidden() === 1}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span>
					{{elseif $movie->hidden() === -1}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span>
					{{elseif $movie->hidden() === -2}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->deletedBlurb()}'><i class='fa fa-trash'></i></span></span>
					{{endif}}
					{{if $movie->canToggleItemModeration() and $movie->itemModerationEnabled()}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="topic_moderation_enabled"}'><i class='fa fa-user-times'></i></span></span>
					{{endif}}
					{{if $movie->mapped('pinned')}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span>
					{{endif}}
					{{if $movie->mapped('featured')}}
						<span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span>
					{{endif}}

					{{if $movie->canEdit()}}
						<span class='ipsType_break ipsContained' data-controller="core.front.core.moderation">
							{{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}<span data-role="editableTitle" title='{lang="click_hold_edit"}'><a href='{$movie->url()}'>{$movie->title}</a></span>
						</span>
					{{else}}
						<span class='ipsType_break ipsContained'>{{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}<a href='{$movie->url()}'>{$movie->title}</a></span>
					{{endif}}
                 
               {{if $movie->status == 'Released'}}
				{{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}}
                  <span class="jwse_movieYear">( {$date->format('Y')} )</span>
                  {{endif}}
                  {{if $fields['field_4']}}  
                  <span class="jwse_movieYear">( {{$fields = $movie->customFields();}}{$fields['field_4']} )</span>
                 {{endif}}
                  {{if $movie->prefix() OR ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}}
						<span {{if !$movie->prefix()}}class='ipsHide'{{endif}} {{if ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}}data-editablePrefix{{endif}}>
							{template="prefix" group="global" app="core" params="$movie->prefix( TRUE ), $movie->prefix()"}
						</span>
					{{endif}}
				</h1>
              
       
       
              <div class="jswe_movieMeta">
                {{$fields = $movie->customFields();}}
                {{if $fields['field_6']}} 
                <span class="ipsDataItem_generic certification">{{$fields = $movie->customFields();}}{$fields['field_6']|raw}</span>
                {{endif}}
                
              <!-- Movie Release Date -->
                {{if $movie->status == 'Released'}}
				{{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}}
				<span class="ipsDataItem_generic">{datetime="$date" dateonly="true"}</span>
				{{endif}}
                
                <!-- Movie Genres -->
                {{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}}
				<span class="ipsDataItem_generic">{$genres}</span>
                
                <!-- Movie Runtime -->
                {{if $movie->runtime}}
				{{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}}
				<span class="ipsDataItem_generic">{$runtime}</span>
				{{endif}}
                
              
              </div>
            
			<div class='ipsType_richText ipsType_normal ipsSpacer_both' data-ipsTruncate data-ipsTruncate-type="remove" data-ipsTruncate-size="2 lines">
				{$movie->truncated(TRUE)|raw}
			</div>
			
			<p class='ipsType_reset'>
				<ul class="ipsList_inline">
					{{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}}
					<li class='ipsType_light ipsType_blendLinks'>{lang="movie_running_{$movie->type}"}: {$runtime} </li>
					{{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}}
					<li class='ipsType_light ipsType_blendLinks'>{$genres} </li>
				</ul>
			</p>

			<ul class='ipsToolList ipsToolList_horizontal ipsSpacer_top'>
				<li class='ipsPos_left'>
					<a href='{$movie->url()}' class='ipsButton ipsButton_light ipsButton_fullWidth ipsButton_small' title='{lang="view_this_movie" sprintf="$movie->title"}'>{lang="more_information"}  <i class="far fa-play-circle"></i></a>
				</li>
			</ul>
		</div>
	</div>
</li>

 

/*** Custom Styles ***/

.jwse_note{
color: #294459
}

.ipsBadge_positive{
    --badge--background: var(--color-palegrey);
    --badge--color: var(--color-jwsecoral);
}

/*** Youtube Popup ***/

.JWSE_video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.JWSE_video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.JWSE_video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.JWSE_play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align:center;
  height:170px;
  width:170px;
  background: rgb(41,68,89, 0.5);
  display:block;
  border-radius:100%
}

.JWSE_playBtn{
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:70px;
  opacity:0.9;
  color:white;
  display:block;
}

.JWSE_playTxt{
      position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
font-size:16px;
  color:white;
  display:block;
}

/*** My Rating Circle ***/

.jwse_MyReviewText{
position:relative;
}

.jwse_ratingCircle {
    float: right;
    position: absolute;
    top: 0px;
    right: 0px;
  z-index:999;
  width:100px;
}

.jwse_ratingCircle-indexBlock {
    float: right;
    position: absolute;
    top: 0px;
    right: 0px;
  z-index:999;
  width:50px;
}

.jwse_ratingCircle-categoryList {
    float: left;
    position: absolute;
    top: -5px;
    left: 112px;
  z-index:999;
  width:50px;
}

.circular-chart{
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 100px;
  background-color: var(--color-baseblue);
  border-radius: 50%;
}

.circular-chart-indexBlock{
  max-width:100%;
max-height:50px;
  top:-6px;
  right: 3px;
  position:relative;
}

.circular-chart-Featured{
max-height:50px;
  top:-5px;
  right: 17px;
  position:relative;
}


.circular-chart_unrated{
background-color: var(--color-palegrey);
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
  opacity: 0.3;
}

.circle {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: var(--color-jwsecoral);
}



.percentage {
  fill: white;
  font-family: Montserrat;
  font-size: 13px;
  text-anchor: middle;
}

.percentageSmall{
  fill: white;
  font-family: Montserrat;
  font-size: 5px;
  text-anchor: middle;
}

.unrated{
font-size:5px;
}




/*** View CSS ***/

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top:-15px;
  min-height:800px;
  background-image:url(https:{media="528"});
  background-color: #294459;
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
}

.ipsPageHeader.ipsClearfix.ipsSpacer_bottom {
    margin-top: -200px;
}

.ipsColumn_veryWide {
    width: 300px;
}

.ipsBox.ipsResponsive_pull {
    background-color: rgba(255, 255, 255, 0.6);
}

.whiteBack {
    font-size: 18px;
    background-color: white;
  border-radius:7px;
}

.ipsCarousel_inner {
    height: 230px !important;
}

.sosMovieCover_large img {
    margin: 0px auto;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: stretch;
    max-width: 300px !important;
    max-height: auto;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
}

.jwse_MoviePhoto_Footer{
	background-color: var(--color-baseblue);
  text-align:center;
  padding:15px 0;
   border-bottom-right-radius:7px;
  border-bottom-left-radius:7px;
	color:white !important;
}


.jwse_MoviePhoto_Footer-indexBlock{
	position:absolute;
  display:block;
  width:100%;
  bottom:0;
  z-index:999;
  padding: 3px 0;
margin-bottom:-28px;
}


.jwse_MoviePhoto_Footer-indexBlock .ipsRating.ipsRating_large{
  font-size:10px !important;
}


.ipsRating .ipsRating_mine .ipsRating_on .fa-star {
    color: var(--color-jwsecoral) !important;
}

.jwse_movieYear{
font-size:16px;
}

.ipsDataItem_generic{
    display: table-cell;
    padding: 5px 15px 15px 0;
    vertical-align: center;
 
}

.ipsDataItem_generic.certification {
    border: 1px solid #666;
    padding: 0 5px;
    display: block;
    float: left;
    margin: 5px;
}

.jwse_movieSubtitle{
  font-weight:600;
  font-style: italic;
  display:block;
}

.jwse_MyReviewFace{
background-image:url(https:{media="530"});
  background-size:cover;
  width:100px;
  height:100px;
  float:left;
  display:block;
}

.jwse_MyReviewTextRating {
    float: right;
    margin: 45px;
}

.jwse_MyReviewText{
	margin-left:130px;
  background-color: var(--color-baseblue);
  color: white;
  font-size: 16px;
  padding:10px 30px;
  position:relative;
  border-radius:7px;
}
  
  .jwse_MyReviewText:after {
	content: '';
	position: absolute;
	left: 0;
	top: 30px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: var(--color-baseblue);
	border-left: 0;
	margin-top: -20px;
	margin-left: -20px;
    opacity:0.4;
}


.jwse_movieDescription {
    margin-top: 20px;
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: -10px;
}

.jwseHeroContainer {
    position: relative;
    top: 0px !important;
}


.ipsCarousel .ipsCarousel_inner {
    height: 230px !important;
}

#elMoviesFeatured .ipsCarousel .ipsCarousel_inner {
    height: 322px !important;

}

#elMoviesFeatured .ipsCarousel_item{
  background-color:#FFF2CC;
}

#elMoviesFeatured .ipsButton {
    background-color: var(--color-baseblue) !important;
  	color: white;
}

 

I hope this will help get you started building your own Movie database. If you use this for your own website, please drop a link here, so we can see how it turned out. Also if you need help, just drop a comment here or in the forum and I will try my best to help you.

Good luck and enjoy!


View full blog article

Link to comment
Share on other sites

Quote

Since showing you the content of the templates may not be allowed I will get approval first and if I am allowed then I will create a second article with that as well.

I do hope it's ok for you to continue showing your process in creating this custom look. I would love to be able to apply this to my own forum. I really appreciate you taking the time to document what you have done here.

My only question, what about when there is an update for the application, will you have to re-add the following?

movie.png.52065761b972d209756ebda2392ccb2f.png

Thanks again. Your willingness to share your knowledge is very much appreciated.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Similar Content

    • By Jimi Wikman
      Last night I could not sleep, so I played around a bit with this idea I have had for a while to have a section for quick links to interesting blog posts or news. I realized that not only would this be fairly easy to build, but the functionality to promote, or like, things was already built and I had the code for it installed! I just need to adjust the code a bit and give it some design love and it should be good to go.
      Anyone who remember the old Digg site probably remember the many great things you could find there in the early days. While I have no ambition to reach anywhere near the same popularity, I hope that some people might find it useful at least.  With so much content, it is hard to keep up with all the great things, so this can at the very least be a nice way for me to drop in great articles that I find.
      The idea behind this setup is fairly simple. Provide a simple way to add links to specific articles or news, so content creators can get some links back to their websites. Use a simple boost button to let people vote up good content and a bury button to vote things down. Allow for the users to see things based on last added content, curated content or based on ratings.
      In short, it will be a news aggregator like the good old Digg and it's many copycats. While it will not have as many bells and whistles, I will add a few things that I have not seen before. The perhaps most interesting thing will be the connection to other databases. This will allow me to not just share links in the Stories section, but also to cross post to for example products, companies and later on people and certain add-ons like the Atlassian add-ons.
      For now, I am just playing around in Figma to see what kind of designs I can come up with. All the heavy lifting has already been done by Ralf Herrmann, an amazing IPS creator that provide some of the best plugins for Pages. His plugin SuperVote have all the features I need to build this, even if I will hack it quite a bit.
      For now, I have an idea in my mind where I will keep the same style as for other parts of the website, which means that I will color each story based on category. I am also playing around a bit with RSS imports for certain sites that I want to keep tabs on. These will be added as hidden and then manually edited for now. Later on, I plan to have them be fully automatic, but I want to control them a bit first. Images, for example, will only be added if uploaded by the owner of the links, or if I have their permission.
      I will start small and then see what happens.

    • By Jimi Wikman
      While working on the components for the new About Me section, I realized that I needed a proper way for people to communicate with me. After considering the options for a while, I decided to build my own ticket system. This is fairly easy and I could have done things in several ways, but decided to use some tricks from my Task Manager to make it a little more dynamic.
       
       
      In essence, this is just a database where I have defined the setup so that you only see your own entries. As the owner, I of course see all entries, which makes it easy to work with. I have added a few fields to help sort things using filters. These fields include Status of course, type of request as this setup does not include any categories, Priority for escalation and SLA, which is just a date field I can set for due date that is then calculated to show time to completion.
      I also have a field for Assignee, even though it is a bit of an overkill for my purposes. I have added it thought for others to use that have more than one person managing the tickets.
      Database fields and Templates
      While working on this new set of templates, I realized that I probably should add some variables for dealing with the field numbers. In most cases you use template names, so it's fairly easy to manage, but in the case of adding the ability to update fields in the frontend we use field ID's instead. Since everyone has a different ID sequence, this can be a bit annoying to work with, so I am thinking I will add variables instead at the beginning of the templates. This way they will work just like CSS, so you can change one variable and it will update across the template.
      Easy creation
      This setup is nothing fancy and it is just a first iteration. I will probably build more on it as I see the need for it, but for now it will suit my need. All in all, it took about a week to complete, but that was mostly because I did not have much time to commit to it. I will still do a new form for this one, but other than that I think this one is done. It is nice because I only needed to customize two templates and the form, instead of all five templates.
      Tasks integrations
      I have a field for database relations that I will add later. Not that I think I will actually need it, but more because I want to write a guide on how to do it and also so I can use it if I want. I also want to make sure that if someone else wants to use both together, they have a way to do it out of the box.
      Onwards with About Me
      With this, I now only have to figure out how I want to set up the History part about me. I have some ideas for it that include setting up a database where each category will become a full width component, or just use blocks for it. I'll ponder on it some more in the coming weeks to see where I might land on that.
      Always moving forward 🙂
    • By Jimi Wikman
      View File Rank Icons for Invision Community
      A set of rank icon shapes.
      It is the same icon shapes used here on this site, but without symbols.
      You can download for free and use as base for your own Rank Icons.
      Enjoy!
      Submitter Jimi Wikman Submitted 06/26/2021 Category Design  
    • By Jimi Wikman
      A set of rank icon shapes.
      It is the same icon shapes used here on this site, but without symbols.
      You can download for free and use as base for your own Rank Icons.
      Enjoy!
    • By Jimi Wikman
      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.
×
×
  • Create New...