[Support request] linked image boxes in sections

Home Forums Support [Support request] linked image boxes in sections

Home Forums Support linked image boxes in sections

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #937725
    Katharina

    I want to recreate this section from my other website. What would be the best way to build something similar.
    https://paste.pics/6c671d789eabea5895348eb925318b66

    Thanks
    Kati

    #938024
    Leo
    Staff
    Customer Support

    Hi there,

    I would recommend using the columns block from Gutenberg.

    Let me know if this helps πŸ™‚

    #942684
    Katharina

    I tried few different things to replicate this section with Gutenberg but could not find any good solution.
    https://paste.pics/5d0fa33b2b88c59d613df288bae2b8e4

    That’s what I have using image block and I also tried cover block in a column
    https://paste.pics/50b9384622b42774ad8023154eac5b58

    I can link in the Image block but not at any text in the images.
    With the cover images I can’t link the image and the can’t change the size

    I thought I found a way to change CSS but It’s also not working

    .wp-block-cover-image{
        height: 300px;
        width: 300px;
    }

    Do You have any Ideas, thanks

    #943050
    Tom
    Lead Developer
    Lead Developer

    In order to link the entire box, you’ll likely need to use javascript.

    For example, create columns and add cover blocks inside of them. Then link the text inside the cover to the target page.

    Then, give the columns container a custom class so we can target it. For example, “linked-boxes”.

    Now we can add this CSS:

    .linked-boxes .wp-block-cover {
        cursor: pointer;
    }
    
    .linked-boxes .wp-block-cover, 
    .linked-boxes .wp-block-cover-image {
        min-height: 350px;
    }

    Now we need to do the javascript:

    1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
    2. Set the hook to wp_footer
    3. Add this as the content:

    <script>
    	jQuery( document ).ready( function( $ ) {
    		$( '.linked-boxes .wp-block-cover' ).on( 'click', function() {
    			var _this = $( this ),
    					url = _this.find( 'a' ).attr( 'href' );
    			
    			if ( url ) {
    				window.location.href = url;
    			}
    		} );
    	} );
    </script>

    Then set your Display Rules.

    #944969
    Katharina

    Thanks Tom,

    I tried it but it wasn’t working. Properly still to complicated for me πŸ™‚ but I keep it in mind.

    I did try now the Gutenberg image block because it has the link option. But I cannot add any text on top of the image. Is there a way to do it with hooks?

    That’s what I want https://paste.pics/dc9e03051466a9fd679941e8d05da412
    That’s what I have https://paste.pics/3aa98812bdd8288683c6af4b94736fc6

    Otherwise I’ll go back to your first option and try it again πŸ™‚

    And thanks again for your support, I couldn’t do it without your team!

    #945388
    Tom
    Lead Developer
    Lead Developer

    I think the first method is the way to go. We did something similar on the homepage of this site: https://roseandpurl.com

    If you can set it up as much as you can and let me know, I can help get you the rest of the way πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.