Jump to content

Homepages Episode like movie

Akai

Por Akai
en Tutorials

 Compartir

Publicaciones recomendadas

Akai Rookie

+ Akai

Publicado
Publicado (editado)

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

Editado por Akai
Enlace al comentario
Compartir en otros sitios web
chirosan Newbie

+ chirosan

Publicado
Publicado
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.

Enlace al comentario
Compartir en otros sitios web
Akai Rookie

+ Akai

Publicado
  • Autor
Publicado (editado)

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);
}

 

Editado por Akai
Enlace al comentario
Compartir en otros sitios web
Akai Rookie

+ Akai

Publicado
  • Autor
Publicado (editado)
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 

 

Editado por Akai
Enlace al comentario
Compartir en otros sitios web
Akai Rookie

+ Akai

Publicado
  • Autor
Publicado
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)"

Enlace al comentario
Compartir en otros sitios web
  • 3 semanas más tarde...
Akai Rookie

+ Akai

Publicado
  • Autor
Publicado
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)"

 

Enlace al comentario
Compartir en otros sitios web
  • 2 meses más tarde...
jess455929 Newbie

+ jess455929

Publicado
Publicado

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

Enlace al comentario
Compartir en otros sitios web
  • 3 semanas más tarde...
  • 2 semanas más tarde...
Akai Rookie

+ Akai

Publicado
  • Autor
Publicado
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 

Enlace al comentario
Compartir en otros sitios web
 Compartir
Ir a la lista de discusiones

  • Usuarios conectados   0 Miembros, 0 Anónimos, 1 Invitado (Ver lista completa)

    • Actualmente no hay usuarios registrados en línea
×
×
  • Crear nuevo...