2 images in same block

  • Resolved kuckovic

    (@kuckovic)


    7 years, 6 months ago

    Hi all,

    Im having a hard time making 2 images work in the same block.
    I’ve made a block that I’ve named “Main case” – and I need to upload 2 images.
    The problem is, that it works INITIALLY….

    But when I refresh the page, the FIRST image URL is set as src for both images.
    Any idea why this is?

    My attributes:

    attributes: {
            primaryTitle: {
                type: 'array'
            },
            primaryLargeMediaID: {
                type: 'number'
            },
            primaryLargeMediaURL: {
                type: 'string',
                source: attr( 'img', 'src' )
            },
            primarySmallMediaID: {
                type: 'number'
            },
            primarySmallMediaURL: {
                type: 'string',
                source: attr( 'img', 'src' )
            },
            primaryCaseUrl: {
              type: 'string'
            },
            primaryTeaser: {
                type: 'array'
            }
        },

    My setAttributes:

    function onSelectLargeImage ( mediaLarge ) {
                props.setAttributes( {
                    primaryLargeMediaURL: mediaLarge.url,
                    primaryLargeMediaID: mediaLarge.id
                } );
            }
            function onSelectSmallImage ( mediaSmall ) {
                props.setAttributes( {
                    primarySmallMediaURL: mediaSmall.url,
                    primarySmallMediaID: mediaSmall.id
                } );
            }

    My elements:

    el( 'div', { className: 'large-img' },
                        el( blocks.MediaUploadButton, {
                                buttonProps: {
                                    className: attributes.primaryLargeMediaID
                                        ? 'large-image-button'
                                        : 'components-button button button-large'
                                },
                                onSelect: onSelectLargeImage,
                                type: 'image',
                                value: attributes.primaryLargeMediaID
                            },
                            attributes.primaryLargeMediaID
                                ? el( 'img', { src: attributes.primaryLargeMediaURL } )
                                : 'Upload large image'
                        )
                    ),
                    el( 'div', { className: 'desc-img' },
                        el( blocks.MediaUploadButton, {
                                buttonProps: {
                                    className: attributes.primarySmallMediaID
                                        ? 'small-image-button'
                                        : 'components-button button button-large'
                                },
                                onSelect: onSelectSmallImage,
                                type: 'image',
                                value: attributes.primarySmallMediaID
                            },
                            attributes.primarySmallMediaID
                                ? el( 'img', { src: attributes.primarySmallMediaURL } )
                                : 'Upload small image'
                        )
                    ),

    Any ideas?
    I’m a bit lost here….

    Best regards
    AK

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author aduth

    (@aduth)

    Could you share your save implementation? I suspect that this issue is that your source is matching the first of your two images for both attributes. Keep in mind that the first argument to attr behaves effectively the same as querySelector (or a jQuery selector):

    https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

    I’ve put together a CodePen which should help illustrate the problem:

    https://codepen.io/aduth/pen/PJNgOG

    The solution would be in the case that you’re including multiple images in your save to assign some attribute to help differentiate them. This could be an id, class, or data- attribute. Then, update your selector to one which would specifically match only one or the other.

    Thread Starter kuckovic

    (@kuckovic)

    Hi Andrew,

    That makes perfect sense.
    Here’s my save implementation:

    var attributes = props.attributes;

            return (
                el( 'a', { href: attributes.primaryCaseUrl},
                    el( 'div', { className: 'case1' },
                        attributes.primaryLargeMediaURL &&
                        el( 'div', { className: 'large-img' },
                            el( 'img', { src: attributes.primaryLargeMediaURL } )
                        ),
                        el( 'div', { className: 'arrow' },
                            el( 'span', {},
                                el( 'img', { src: '/wpdeveloper/wp-content/uploads/2017/09/arrow-outline-right.svg' })
                            )
                        ),
                        el( 'div', { className: 'description' },
                            el( 'div', { className: 'title' }, attributes.primaryTitle ),
                            el( 'div', { className: 'content' }, attributes.primaryTeaser )
                        ),
                        attributes.primarySmallMediaURL &&
                        el( 'div', { className: 'desc-image' },
                            el( 'img', { src: attributes.primarySmallMediaURL } )
                        )
                    )
                )
            );

    Please let me know what you find out.
    I guess I’m blind on the problem right now – so I continued with some other development meanwhile ??

    UPDATE

    I made it work now!
    Of course, it all made sense, what you said about the querySelector.
    I changed:

     primarySmallMediaURL: {
                type: 'string',
                source: attr( 'img', 'src' )
            },

    To: 

     primarySmallMediaURL: {
                type: 'string',
                source: attr( 'img.smallimg', 'src' )
            },

    And added a className in my save:

    attributes.primarySmallMediaURL &&
                        el( 'div', { className: 'desc-image' },
                            el( 'img', { className: 'smallimg', src: attributes.primarySmallMediaURL } )
                        )

    Thanks a lot for opening my eyes!
    Keep up the good work.

    Best regards
    Aris Kuckovic

    • This reply was modified 7 years, 6 months ago by kuckovic.
    Plugin Author aduth

    (@aduth)

    Glad you got it working! Your solution looks good to me.

    Thread Starter kuckovic

    (@kuckovic)

    It’s working perfectly now ??
    I’ve put my solution above, so if anyone else experiences the same problems, they might get an epiphany, as I just did after my nap and reading your reply twice! ??

    Thanks again!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘2 images in same block’ is closed to new replies.