Skip to content

Add card template for embedded contents #202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add card template for embedded contents #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions theme/components/NewsCard/NewsCardComponent.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ protected function get_options()
'content' => [],
'image' => [],
'source' => [],
'embedded' => [],
'link' => [
'default' => '#'
]
Expand All @@ -32,6 +33,10 @@ protected function get_options()

protected function get_template_path($args, $instance)
{
if (sizeof($instance['embedded']) > 0) {
return 'components/NewsCard/news_card_embedded_template.php';
}

if (! $instance['image']) {
return 'components/NewsCard/news_card_no_image_template.php';
}
Expand Down
6 changes: 6 additions & 0 deletions theme/components/NewsCard/news_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ $news-card-size: 300px;
overflow: hidden;

flex: 1 0 $news-card-size;
flex-direction: column;
Copy link
Contributor Author

@Atala Atala Jun 6, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pas trop sur de ça, j'en avais besoin pour que news-card__caption stack en dessous pour les display moyens - @Nhacsam ?

Copy link
Contributor

@Nhacsam Nhacsam Jun 6, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Du coup, l'image se retrouve toujours seule sur sa ligne au format mobile ? Je trouve ça un peu dommage.

Ce que j'avais fait, c'est que je faisait descendre le texte à partir de 400px grâce au flex-wrap dans @media (max-width: 400px).

Dans tous les cas, tu dois pouvoir mettre ça dans le @media (max-width: $screen-xs-max).

Si ça rend vraiment pas les embeded content a gauche du texte, je pense que le mieux c'est que fasse une exception pour ce type de contenu avec un modifier genre :

.news-card--embed-content {
   flex-direction: column;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je n'avais pas vu que c'était le design souhaité. Je regarde demain, il faut juste un peu de CSS pour ajouter du padding sur l'iframe je crois.

Yes pour le BEM, je vais essayer de plus le respecter (et surtout lire la spec une bonne fois pour toutes). Par contre le lien que tu as mis contredit ton snippet, la spec dit d'utiliser un _ :p (.news-card_embed-content ?)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'utilise le Harry Roberts' style ^^
Mais je t'avouerai que je l'applique pas parfaitement sur nuit debout :/ Le Css n'est pas flat, bootstrap me gène et je suis obligé de faire des exceptions pour les partie du html qu'on ne contrôle pas (comme le contenu des posts ou les menus)


background-size: cover;
background-position: center;
Expand All @@ -16,6 +17,11 @@ $news-card-size: 300px;
color: $gray;
}

.news-card__embedded > iframe {
max-width: 100% !important;
max-height: $news-card-size !important;
}

.news-card__caption {
padding: 15px;

Expand Down
13 changes: 13 additions & 0 deletions theme/components/NewsCard/news_card_embedded_template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="news-card">
<div class="news-card__embedded">
<?php echo $embedded[0]; ?>
</div>
<a href="<?php echo $link ?>">
<div class="news-card__caption">
<h4 class="news-card__title"><?php echo $title ?></h4>
<p class="news-card__content"><?php echo $content; ?></p>
<small class="news-card__source"><?php echo $source ?></small>
</div>
<p class="news-card__content-animated"><?php echo $content; ?></p>
</a>
</div>
17 changes: 10 additions & 7 deletions theme/templates/module-news.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,16 @@
?>
<div class="news-list">
<?php for ($i = 0; $sticky->have_posts() && $i < 6; $i++ ) : $sticky->the_post(); ?>
<?php the_component('news-card', [
'title' => get_the_title(),
'source' => get_post_meta(get_the_ID(), 'source_title', true),
'content' => strip_tags(get_the_excerpt()),
'link' => get_the_permalink(),
'image' => get_the_post_thumbnail_url(null, 'medium'),
]); ?>
<?php
the_component('news-card', [
'title' => get_the_title(),
'source' => get_post_meta(get_the_ID(), 'source_title', true),
'content' => strip_tags(get_the_excerpt()),
'link' => get_the_permalink(),
'image' => get_attached_media('image')[0]->guid,
'embedded' => get_media_embedded_in_content(apply_filters( 'the_content', get_the_content()))
]);
?>
<?php endfor; ?>
</div>
</div>
Expand Down