tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds proper alt attribute to collection header on item single page. Fixes wide page layout for this collection header.

This commit is contained in:
mateuswetah 2020-06-08 14:10:37 -03:00
parent 66dc0bcfd4
commit c270879f3d
3 changed files with 53 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/assets/scss/_post.scss
View File

@ -22,18 +22,21 @@
&.single-item-collection-banner { &.single-item-collection-banner {
margin-left: -4.16666667%; margin-left: -4.16666667%;
margin-right: -4.1666667%; margin-right: -4.1666667%;
margin-left: -4.16666667vw; margin-left: calc(-1 * ((100vw - 100%)/2));
margin-right: -4.1666667vw; margin-right: calc(-1 * ((100vw - 100%)/2));
margin-top: -2rem; margin-top: -2rem;
position: relative; position: relative;
width: 100%;
width: 100vw;
&>div { &>div {
padding: 8px 4.16666667% 12px 4.16666667%; padding: 8px 4.16666667% 12px 4.16666667%;
padding: 8px 4.16666667vw 12px 4.16666667vw; padding: 8px calc((100vw - 1400px)/2) 12px calc((100vw - 1400px)/2);
} }
.t-bg-collection { .t-bg-collection {
min-height: 4.16666667%; min-height: 4.16666667%;
min-height: 4.16666667vw; min-height: 4.16666667vw;
position: relative;
} }
.collection-name { .collection-name {
@ -48,6 +51,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
width: calc(100% - (12.5vw + 12px));
p, h1 { p, h1 {
display: inline-block; display: inline-block;
@ -55,15 +59,22 @@
} }
.collection-thumbnail { .collection-thumbnail {
position: relative; position: relative;
padding: 0px 4.16666667vw 0px 4.16666667vw; padding-top: 0;
padding-bottom: 0;
z-index: 9;
img { img {
max-height: 185px;
max-width: calc(12.5% - 12px); max-width: calc(12.5% - 12px);
top: calc(-1 * (4.166667% + 12px));
max-width: calc(12.5vw - 12px); max-width: calc(12.5vw - 12px);
top: calc(-1 * (4.166667vw + 12px)); top: -88px;
border-width: 3px !important; border-width: 3px !important;
@media screen and (max-width: 1400px) {
top: -56px;
top: -6vw;
margin-left: 12px;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
max-width: calc(20.83333% - 12px); max-width: calc(20.83333% - 12px);
top: calc(-1 * (8.3333% + 12px)); top: calc(-1 * (8.3333% + 12px));
@ -103,8 +114,12 @@
} }
} }
.collection-header--share { .collection-header--share {
position: relative; position: absolute;
float: left; float: left;
padding-top: 0;
padding-bottom: 0;
top: initial;
.btn { .btn {
max-width: 35px; max-width: 35px;
border: 2px solid white; border: 2px solid white;
@ -115,6 +130,17 @@
font-size: 1.25rem; font-size: 1.25rem;
} }
} }
.rotater:nth-child(1) .btn-icon {
transform: translateX(-4em) translateY(1em) rotate(22.5deg);
}
.rotater:nth-child(2) .btn-icon {
transform: translateX(-3em) translateY(-1em) rotate(-22.5deg);
}
.icons {
position: absolute;
top: 0;
left: 0;
}
} }
} }
header { header {

2
src/style.css.map
View File

File diff suppressed because one or more lines are too long

38
src/template-parts/single-items-header.php
View File

@ -47,7 +47,7 @@ if (get_theme_mod('tainacan_single_item_collection_header', false)) {
<?php if ( function_exists('tainacan_the_collection_url') ): ?> <?php if ( function_exists('tainacan_the_collection_url') ): ?>
<a href="<?php tainacan_the_collection_url(); ?>"> <a href="<?php tainacan_the_collection_url(); ?>">
<?php if ( has_post_thumbnail( tainacan_get_collection_id() ) ) : <?php if ( has_post_thumbnail( tainacan_get_collection_id() ) ) :
$thumbnail_id = get_post_thumbnail_id( $post->ID ); $thumbnail_id = get_post_thumbnail_id( tainacan_get_collection_id() );
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true); ?> $alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true); ?>
<img src="<?php echo get_the_post_thumbnail_url( tainacan_get_collection_id() ); ?>" class="t-collection--info-img rounded-circle img-fluid border border-white position-absolute text-left" alt="<?php echo esc_attr($alt); ?>"> <img src="<?php echo get_the_post_thumbnail_url( tainacan_get_collection_id() ); ?>" class="t-collection--info-img rounded-circle img-fluid border border-white position-absolute text-left" alt="<?php echo esc_attr($alt); ?>">
<?php else : ?> <?php else : ?>
@ -59,24 +59,24 @@ if (get_theme_mod('tainacan_single_item_collection_header', false)) {
</h4> </h4>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php else : ?> </a>
<span> <?php else : ?>
<?php if ( has_post_thumbnail( tainacan_get_collection_id() ) ) : <span>
$thumbnail_id = get_post_thumbnail_id( $post->ID ); <?php if ( has_post_thumbnail( tainacan_get_collection_id() ) ) :
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true); ?> $thumbnail_id = get_post_thumbnail_id( tainacan_get_collection_id());
<img src="<?php echo get_the_post_thumbnail_url( tainacan_get_collection_id() ); ?>" class="t-collection--info-img rounded-circle img-fluid border border-white position-absolute text-left" alt="<?php echo esc_attr($alt); ?>"> $alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true); ?>
<?php else : ?> <img src="<?php echo get_the_post_thumbnail_url( tainacan_get_collection_id() ); ?>" class="t-collection--info-img rounded-circle img-fluid border border-white position-absolute text-left" alt="<?php echo esc_attr($alt); ?>">
<div class="image-placeholder rounded-circle border border-white position-absolute"> <?php else : ?>
<h4 class="text-center"> <div class="image-placeholder rounded-circle border border-white position-absolute">
<?php <h4 class="text-center">
echo esc_html( tainacan_get_initials( tainacan_get_the_collection_name() ) ); <?php
?> echo esc_html( tainacan_get_initials( tainacan_get_the_collection_name() ) );
</h4> ?>
</div> </h4>
<?php endif; ?> </div>
</span> <?php endif; ?>
<?php endif; ?> </span>
</a> <?php endif; ?>
</div> </div>
<?php <?php
global $wp; global $wp;