hi there. as promise i show how to do homepages episode like movie design.
something like this
Before Your Start PLEASE MAKE YOUR Dooplay Folder BACKUP
Working Fine With Dooplay 2.2.3
1. search this php file \dooplay\inc\parts\item_ep.php REPLACE all code with this
<?php
/*
* -------------------------------------------------------------------------------------
* @author: Doothemes
* @author URI: https://doothemes.com/
* @aopyright: (c) 2018 Doothemes. All rights reserved
* -------------------------------------------------------------------------------------
*
* @since 2.1.3
*
*/
$postmeta = doo_postmeta_episodes($post->ID);
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'dt_poster_a', true);
// End PHP
?>
<article class="item se <?php echo get_post_type(); ?>" id="post-<?php the_id(); ?>">
<div class="poster">
<a href="<?php the_permalink() ?>">
<img src="<?php doo_compose_image('dt_poster', $post->ID, 'w185'); ?>" alt="<?php the_title(); ?>">
<span class="episodev2">EPS<i><?php echo doo_isset($postmeta,'episodio'); ?></i></span>
<div class="mepo"><?php if($mostrar = get_the_term_list( $post->ID, 'dtquality')) { ?><span class="quality"><?php echo strip_tags($mostrar); ?></span><?php } ?></div>
<span class="serie"><?php echo doo_isset($postmeta,'serie'); ?></span>
</a>
</div>
<div class="data">
<h3><?php echo doo_isset($postmeta,'episode_name'); ?></h3>
<span><?php doo_date_compose(doo_isset($postmeta,'air_date')); ?></span>
</div>
</article>
Its done with PHP Code
For CSS. i suggest use 'custom CSS' on dooplay option
Go "dooplay Option" --> 'Customize" --> "Custom CSS"
just insert this css
.module .content .items .episodes .poster {
width: 100%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
margin: 0;
padding-top: 140%;
}
.module .content .items .episodes .poster img {
width: 100%;
height: auto;
margin-top: -140%;
position: absolute;
}
.episodev2 {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
padding-top: 8px;
text-align: center;
height: 40px;
border-radius: 50%;
background: #8224e3;
color: #fff;
font-size: 12px;
text-transform: uppercase;
line-height: 1em;
text-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.episodev2 i {
display: block;
font-weight: 700;
font-size: 16px;
font-style: normal;
margin-top: 3px;
}
DONE!!
If u facing big images poster you need to edit this on dooplay/assets/css/front.style.css ** NOT RECOMMENDED USING CUSTOM CSS , its will damage on mobile view
find this
.module .content .items .episodes {
width: 33.33%;
}
Replace with
.module .content .items .episodes {
width: calc(100%/6);
}
and please clear cache and hard refresh
if any problem please let me know. maybe i forgot another setting
