WordPress.org
Get WordPress

Make WordPress Core

Changeset 24720


Ignore:
Timestamp:
07/17/2013 04:51:06 AM (13 years ago)
Author:
lancewillett
Message:

Twenty Thirteen: improve gallery styles to ensure both single and index views are displayed consistently. Closes #24555.

Location:
trunk/wp-content/themes/twentythirteen
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-content/themes/twentythirteen/functions.php

    r24682 r24720  
    502502
    503503/**
    504  * Sets the image size in featured galleries to large.
    505  *
    506  * @since Twenty Thirteen 1.0
    507  *
    508  * @param array $atts Combined and filtered attribute list.
    509  * @return array The filtered attribute list.
    510  */
    511 function twentythirteen_gallery_atts( $atts ) {
    512         if ( has_post_format( 'gallery' ) && ! is_single() )
    513                 $atts['size'] = wp_is_mobile() ? 'thumbnail' : 'medium';
    514 
    515         return $atts;
    516 }
    517 add_filter( 'shortcode_atts_gallery', 'twentythirteen_gallery_atts' );
    518 
    519 /**
    520504 * Extends the default WordPress body classes.
    521505 *

  • trunk/wp-content/themes/twentythirteen/rtl.css

    r24536 r24720  
    262262}
    263263
    264 .blog .format-gallery .gallery-item,
    265 .archive .format-gallery .gallery-item,
    266 .search .format-gallery .gallery-item {
    267         margin-left: 4px;
    268         margin-right: auto;
    269 }
    270 .blog .format-gallery .gallery-item img,
    271 .archive .format-gallery .gallery-item img,
    272 .search .format-gallery .gallery-item img {
    273         position: absolute;
    274         left: 0;
    275 }
    276 
    277264.format-image .wp-caption-text {
    278265        text-align: right;
    … …  
    727714        }
    728715
    729         .single .gallery-columns-3 .gallery-item:nth-of-type(3n) {
     716        .gallery-columns-3 .gallery-item:nth-of-type(3n) {
    730717                margin-left: 4px;
    731718                margin-right: auto;
    … …  
    739726        }
    740727
     728        .gallery .gallery-item:nth-of-type(even) {
     729                margin-left: 0;
     730                margin-right: auto;
     731        }
     732
    741733        .gallery .gallery-item,
    742         .single .gallery-columns-2.gallery-size-thumbnail .gallery-item,
    743         .blog .format-gallery .gallery-item,
    744         .archive .format-gallery .gallery-item,
    745         .search .format-gallery .gallery-item,
    746         .single .gallery.gallery-columns-3 .gallery-item:nth-of-type(even),
     734        .gallery.gallery-columns-3 .gallery-item:nth-of-type(even),
    747735        .gallery-columns-3 .gallery-item:nth-of-type(3n),
    748736        .gallery-columns-5 .gallery-item:nth-of-type(5n),
    … …  
    753741        }
    754742
    755         .blog .format-gallery .gallery-item:nth-of-type(odd),
    756         .archive .format-gallery .gallery-item:nth-of-type(odd),
    757         .search .format-gallery .gallery-item:nth-of-type(odd),
    758         .single .gallery .gallery-item:nth-of-type(even) {
    759                 margin-left: 0;
    760                 margin-right: auto;
    761         }
    762 
    763743        .comment-author .avatar {
    764744                margin-left: 5px;

  • trunk/wp-content/themes/twentythirteen/style.css

    r24657 r24720  
    12331233}
    12341234
    1235 .gallery-columns-1 .gallery-item {
    1236         max-width: 100%;
    1237 }
    1238 
    1239 .gallery-columns-2 .gallery-item {
    1240         max-width: 48%;
    1241         max-width: -webkit-calc(50% - 4px);
    1242         max-width:         calc(50% - 4px);
    1243         text-align: center;
    1244 }
    1245 
     1235.gallery-columns-1 .gallery-item,
     1236.gallery-columns-2 .gallery-item,
    12461237.gallery-columns-3 .gallery-item {
    1247         max-width: 31%;
    1248         max-width: -webkit-calc(33.3% - 4px);
    1249         max-width:         calc(33.3% - 4px);
    12501238        text-align: center;
    12511239}
    … …  
    14801468.format-gallery .entry-content a {
    14811469        color: #722d19;
    1482 }
    1483 
    1484 /* Blog gallery */
    1485 .blog .format-gallery .gallery,
    1486 .archive .format-gallery .gallery,
    1487 .search .format-gallery .gallery {
    1488         margin-bottom: 20px;
    1489         margin-left: -4px;
    1490         max-width: 608px;
    1491 }
    1492 
    1493 .blog .format-gallery .gallery-item,
    1494 .archive .format-gallery .gallery-item,
    1495 .search .format-gallery .gallery-item {
    1496         display: block;
    1497         height: 148px;
    1498         margin-right: 4px;
    1499         max-height: 100%;
    1500         max-width: 100%;
    1501         overflow: hidden;
    1502         width: 148px;
    1503 }
    1504 
    1505 .blog .format-gallery .gallery-item img,
    1506 .archive .format-gallery .gallery-item img,
    1507 .search .format-gallery .gallery-item img {
    1508         height: 100%;
    1509         max-height: 148px;
    1510         max-width: none;
    1511         width: auto;
    1512 }
    1513 
    1514 .blog .format-gallery .gallery-item .portrait img,
    1515 .archive .format-gallery .gallery-item .portrait img,
    1516 .search .format-gallery .gallery-item .portrait img {
    1517         height: auto;
    1518         max-height: none;
    1519         max-width: 148px;
    1520         width: 100%;
    1521 }
    1522 
    1523 .blog .format-gallery .gallery-item:first-child,
    1524 .archive .format-gallery .gallery-item:first-child,
    1525 .search .format-gallery .gallery-item:first-child {
    1526         height: 300px;
    1527         width: 300px;
    1528 }
    1529 
    1530 .blog .format-gallery .gallery-item:first-child img,
    1531 .archive .format-gallery .gallery-item:first-child img,
    1532 .search .format-gallery .gallery-item:first-child img {
    1533         max-height: 300px;
    1534 }
    1535 
    1536 .blog .format-gallery .gallery-item:first-child .portrait img,
    1537 .archive .format-gallery .gallery-item:first-child .portrait img,
    1538 .search .format-gallery .gallery-item:first-child .portrait img {
    1539         max-height: none;
    1540         max-width: 300px;
    1541 }
    1542 
    1543 .blog .format-gallery .gallery-item .gallery-icon,
    1544 .archive .format-gallery .gallery-item .gallery-icon,
    1545 .search .format-gallery .gallery-item .gallery-icon {
    1546         height: 100%;
    1547         -webkit-transform: translate(50%, 50%);
    1548         -ms-transform:     translate(50%, 50%);
    1549         transform:         translate(50%, 50%);
    1550         width: 100%;
    1551 }
    1552 
    1553 .blog .format-gallery .gallery-item .gallery-icon img,
    1554 .archive .format-gallery .gallery-item .gallery-icon img,
    1555 .search .format-gallery .gallery-item .gallery-icon img {
    1556         -webkit-transform: translate(-50%, -50%);
    1557         -ms-transform:     translate(-50%, -50%);
    1558         transform:         translate(-50%, -50%);
    1559 }
    1560 
    1561 .blog .format-gallery .gallery br,
    1562 .archive .format-gallery .gallery br,
    1563 .search .format-gallery .gallery br {
    1564         display: none;
    15651470}
    15661471
    … …  
    30132918
    30142919        .gallery .gallery-item,
    3015         .single .gallery-columns-2.gallery-size-thumbnail .gallery-item,
    3016         .blog .format-gallery .gallery-item,
    3017         .archive .format-gallery .gallery-item,
    3018         .search .format-gallery .gallery-item {
     2920        .gallery-columns-2.gallery-size-thumbnail .gallery-item {
    30192921                max-width: none;
    30202922                width: 49%;
    … …  
    30232925        }
    30242926
    3025         .single .gallery-columns-1.gallery-size-medium,
    3026         .single .gallery-columns-1.gallery-size-thumbnail,
    3027         .single .gallery-columns-2.gallery-size-thumbnail,
    3028         .single .gallery-columns-3.gallery-size-thumbnail {
     2927        .gallery-columns-1.gallery-size-medium,
     2928        .gallery-columns-1.gallery-size-thumbnail,
     2929        .gallery-columns-2.gallery-size-thumbnail,
     2930        .gallery-columns-3.gallery-size-thumbnail {
    30292931                display: block;
    30302932        }
    30312933
    30322934        .gallery-columns-1 .gallery-item,
    3033         .single .gallery-columns-1.gallery-size-medium .gallery-item,
    3034         .single .gallery-columns-1.gallery-size-thumbnail .gallery-item,
    3035         .blog .format-gallery .gallery-item:first-child,
    3036         .archive .format-gallery .gallery-item:first-child,
    3037         .search .format-gallery .gallery-item:first-child {
     2935        .gallery-columns-1.gallery-size-medium .gallery-item,
     2936        .gallery-columns-1.gallery-size-thumbnail .gallery-item {
    30382937                text-align: center;
    30392938                width: 98%;
    … …  
    30532952        }
    30542953
    3055         .blog .format-gallery .gallery-item:nth-of-type(odd),
    3056         .archive .format-gallery .gallery-item:nth-of-type(odd),
    3057         .search .format-gallery .gallery-item:nth-of-type(odd),
    3058         .single .gallery .gallery-item:nth-of-type(even) {
     2954        .gallery .gallery-item:nth-of-type(even) {
    30592955                margin-right: 0;
    30602956        }
Note: See TracChangeset for help on using the changeset viewer.