Jump to content
Akai

Homepages Episode like movie

By Akai, in Tutorials

Recommended Posts

+ Akai    37

Akai
Posted (edited)

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

Share this post

Link to post
Share on other sites

+ chirosan    0

chirosan
Posted
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.

Share this post

Link to post
Share on other sites

+ Akai    37

Akai
Posted (edited)

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

Share this post

Link to post
Share on other sites

+ Meliel1    35

Meliel1
Posted

Not sure why but this is breaking my site.  I updated the phi code and put the css in the custom css. I get loading on movies as well as Episodes. Can you help m8. I’m using the latest version. 

sQNiner.jpg

Share this post

Link to post
Share on other sites

+ Akai    37

Akai
Posted (edited)
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

Share this post

Link to post
Share on other sites

+ Akai    37

Akai
Posted
3 hours ago, Ade_3 said:

can you please make it look exacly as in your image please

602f0185e73b2cb723e8ac960e6c88c3.png

 

the code make the background too big...

can you share your website.. 

let see what the problem...

Share this post

Link to post
Share on other sites

+ Akai    37

Akai
Posted
6 hours ago, Ade_3 said:

https://filmeseriale-hd.com/ this is my website..,but i did't put the code on episodes now becouse the image is too big ...could you please fix it

usually if image to big you need to this css  

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

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

Share this post

Link to post
Share on other sites

+ Akai    37

Akai
Posted
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)"

 

Share this post

Link to post
Share on other sites

+ jess455929    1

jess455929
Posted

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

Share this post

Link to post
Share on other sites
Go To Topic Listing
×
×
  • Create New...