Thanks, @made4Uo . Are you able to help me with an example of this code for a two-column block?
Many thanks,
Tess
Topic summary
Goal: make each image in the Dawn theme’s Multicolumn section link to its own external URL.
Key fixes
- Use per-block settings, not section-level: anchor href should reference block.settings.image_link (or block.settings.link depending on theme) and iterate with a for loop over section.blocks so each block gets a unique URL.
- Correct placement around the image/card to preserve image_ratio and sizing responsiveness; OP confirmed this resolved formatting.
Implementation notes
- Add a URL field in each block’s schema, then wrap the image with . Styling like text-decoration: none can be applied to remove underlines.
- Section-level “Button label”/“Button link” adds a single button for the whole section and is separate from per-block image links.
Outcome
- Original issue (images redirecting to homepage) resolved by switching to block settings and adjusting anchor placement. Multiple users confirmed success.
Additional guidance
- For two columns/two images: ensure each block has its own link and is handled within the for loop.
- Some suggest using block.settings.link if the block already provides a “link” setting.
Open issues
- Requests: enable slider on desktop, restore mobile slider behavior post-change, make images non-clickable when no link is set, add hover overlay effect, and resolve cases where links reload the current page.
Context
- Code snippets are central; screenshots show layout of multicolumn images.
1 Like