Jump to content

Homepages Episode like movie


Akai
 Share

Recommended Posts

hi there. as promise i show how to do homepages episode like movie design. 

something like this 

6g2eRNf.png

 

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

Edited by Akai
Link to comment
Share on other sites

2 hours ago, Akai said:

hi there. as promise i show how to do homepages episode like movie design. 

something like this 

6g2eRNf.png

 

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!! 

and please clear cache and hard refresh 

if any problem please let me know. maybe i forgot another setting

Can you explain, please, how to adjust the dimensions of the posters? Because it is bigger than the movies and I want to make them smaller especially in the slider on homepage.

Link to comment
Share on other sites

Skype ME : AkaiTSB

have you using the latest version dooplay ? 

Search in : dooplay/assets/css/front.style.css    ** NOT RECOMMENDED USING CUSTOM CSS , its will damage on mobile view

.module .content.full_width_layout article.episodes {
    width: calc(100%/4);
}

and change to 

.module .content.full_width_layout article.episodes {
    width: calc(100%/6);
}

 

Edited by Akai
Link to comment
Share on other sites

5 minutes ago, alkalbani said:

Hello

How can fix this problem 

 

https://www.aflamtube.net/v/

 

The images are large in size
Words are not in the circle

 

 

.episodev2 i {
  	display: block;
    font-weight: 700;
    font-size: 16px;
    font-style: normal;
    margin-top: 3px;
}

you missing the css 

 

Edited by Akai
Link to comment
Share on other sites

  • 3 weeks later...
On 1/16/2019 at 1:01 PM, ignacio.rumante said:

I followed all the steps, put the fix to apply the smaller images but they are still big


Dooplay v. 2.2.5

you need this.. search this css 

On 12/25/2018 at 10:33 AM, Akai said:

usually if image to big you need to this css 


.module .content .items .episodes {
    width: 33.33%;
}

33.33% -- > to ---> "calc(100%/5)"

 

Link to comment
Share on other sites

  • 2 months later...

Any chance you can make it work with dooplay 2.3 @Akai?

My main goal is when I hover over a episode poster on homepage to show (like prior 2.3)  the episode number (1x8) and the name of the tvshow.

I know its something small but this way we know excactly what episode there is without having to go under the poster on the really small fonts to find out...

The idea is that episode posters do not have the title of the show like movies do.... This was nice... I like the new update but please dont get rid of small mods @emeza that where better prior 2.3

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...
On 5/8/2019 at 8:19 PM, Akai said:

be advice.. this modification don't work with latest dooplay version

I would LOVE this to work on v2.3.1!!! If it is not possible on the latest version, I would have to downgrade but I don't know where I can get my hands on the previous versions.

Link to comment
Share on other sites

19 hours ago, dmg9394 said:

I would LOVE this to work on v2.3.1!!! If it is not possible on the latest version, I would have to downgrade but I don't know where I can get my hands on the previous versions.

the only reason this mod can't use on dooplay 2.3.1 is poster function on episode editor already remove by @emeza so i can't get the poster on episode home module. 

thanks 

Link to comment
Share on other sites

3 hours ago, Akai said:

the only reason this mod can't use on dooplay 2.3.1 is poster function on episode editor already remove by @emeza so i can't get the poster on episode home module. 

thanks 

Where can I post to request for this function to be added back on in the next update?

Link to comment
Share on other sites

 Share

  • Who's Online   0 Members, 0 Anonymous, 3 Guests (See full list)

    • There are no registered users currently online
×
×
  • Create New...