Making WordPress.org

Changeset 8572


Ignore:
Timestamp:
04/02/2019 11:03:51 PM (6 years ago)
Author:
coreymckrill
Message:

WordCamp Blocks: Add link property to FeaturedImage component

This adds an optional property that takes a URL. Setting it will
cause the image to be wrapped in an anchor tag. It also adds an
outer div container, regardless of whether a link is set or not.

Location:
sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sessions/block-content.js

    r8550 r8572  
    136136    render() {
    137137        const { attributes, sessionPosts } = this.props;
    138         const { show_speaker, show_images, image_align, featured_image_height, featured_image_width, content, excerpt_more, show_meta, show_category } = attributes;
    139         const featuredImageSize = { height: featured_image_height, width: featured_image_width };
     138        const { show_speaker, show_images, image_align, featured_image_width, content, excerpt_more, show_meta, show_category } = attributes;
    140139
    141140        return (
     
    164163                        { show_images &&
    165164                            <FeaturedImage
    166                                 className={ 'wordcamp-session-image-container align-' + decodeEntities( image_align )  }
    167                                 size={ featuredImageSize }
     165                                className={ classnames( 'wordcamp-session-image-container', 'align-' + decodeEntities( image_align ) ) }
    168166                                wpMediaDetails={ get( post, '_embedded.wp:featuredmedia[0].media_details.sizes', {} ) }
    169                                 alt={ post.title.rendered }
    170                                 { ...this.props }
     167                                alt={ decodeEntities( post.title.rendered ) }
     168                                width={ Number( featured_image_width ) }
     169                                imageLink={ post.link }
    171170                            />
    172171                        }
  • sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/shared/featured-image/index.js

    r8550 r8572  
    77 * WordPress dependencies.
    88 */
     9const { Disabled } = wp.components;
    910const { Component } = wp.element;
     11const { isURL } = wp.url;
    1012
    1113/**
     
    6668     */
    6769    render() {
    68         const { className, alt, attributes } = this.props;
     70        const { className, alt, width = 150, imageLink } = this.props;
     71        const fullImage = this.getFullImage();
    6972
    70         const { featured_image_width } = attributes;
    71         const image = this.getFullImage();
    72 
    73         const width = featured_image_width || 150;
    74 
    75         return (
     73        let image = (
    7674            <img
    7775                className={ classnames( 'wordcamp-featured-image', className ) }
    78                 src={ image.source_url }
     76                src={ fullImage.source_url }
    7977                alt={ alt }
    8078                width={ width + 'px' }
    8179            />
    8280        );
     81
     82        if ( isURL( imageLink ) ) {
     83            image = (
     84                <Disabled>
     85                    <a href={ imageLink } className={ classnames( 'wordcamp-image-link', 'wordcamp-featured-image-link' ) }>
     86                        { image }
     87                    </a>
     88                </Disabled>
     89            );
     90        }
     91
     92        image = (
     93            <div className={ classnames( 'wordcamp-image-container', 'wordcamp-featured-image-container', className ) }>
     94                { image }
     95            </div>
     96        );
     97
     98        return image;
    8399    }
    84100}
  • sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/blocks/assets/src/sponsors/block-content.js

    r8559 r8572  
    3030function SponsorDetail( { sponsorPost, attributes, onFeatureImageChange } ) {
    3131    const {
    32         show_name, show_logo, show_desc, content, excerpt_more,
     32        show_name, show_logo, show_desc, content, excerpt_more, featured_image_width
    3333    } = attributes;
    3434
     
    4242
    4343            { ( show_name || show_name === undefined ) &&
    44             <ItemTitle
    45                 className="wordcamp-sponsor-title"
    46                 headingLevel={ 3 }
    47                 title={ sponsorPost.title.rendered.trim() }
    48                 link={ sponsorPost.link }
    49             />
     44                <ItemTitle
     45                    className="wordcamp-sponsor-title"
     46                    headingLevel={ 3 }
     47                    title={ sponsorPost.title.rendered.trim() }
     48                    link={ sponsorPost.link }
     49                />
    5050            }
    5151            { ( show_logo || show_logo === undefined ) &&
    52             <FeaturedImage
    53                 className={ 'wordcamp-sponsor-featured-image wordcamp-sponsor-logo' }
    54                 wpMediaDetails={ featuredImageSizes }
    55                 alt={ sponsorPost.title.rendered }
    56                 attributes={ attributes }
    57             />
     52                <FeaturedImage
     53                    className={ 'wordcamp-sponsor-featured-image wordcamp-sponsor-logo' }
     54                    wpMediaDetails={ featuredImageSizes }
     55                    alt={ sponsorPost.title.rendered }
     56                    width={ featured_image_width }
     57                    imageLink={ sponsorPost.link }
     58                />
    5859            }
    5960            { ( 'none' !== content ) &&
    60             <ItemHTMLContent
    61                 className={ classnames( 'wordcamp-sponsor-content' ) }
    62                 content={ displayContent }
    63                 link={ ( 'full' === content || excerpt_more ) ? sponsorPost.link : null }
    64                 linkText={ 'full' === content ? __( 'Visit sponsor page', 'wordcamporg' ) : __( 'Read more', 'wordcamporg' ) }
    65             />
     61                <ItemHTMLContent
     62                    className={ classnames( 'wordcamp-sponsor-content' ) }
     63                    content={ displayContent }
     64                    link={ ( 'full' === content || excerpt_more ) ? sponsorPost.link : null }
     65                    linkText={ 'full' === content ? __( 'Visit sponsor page', 'wordcamporg' ) : __( 'Read more', 'wordcamporg' ) }
     66                />
    6667            }
    6768        </div>
Note: See TracChangeset for help on using the changeset viewer.