Jump to content

Image card css and html

Recommended Posts

Site URL: https://beersupply.ca/nbf/tasty-nickelbrook-august-2021

I'm looking for the code for image cards.
 

i'm active so often with making new posts that I ideally just want to enter the code that would be to make an image card into the coding box. i generate my own text and info that i'd want to plug into that image card without having to make a new image card every single time. can anyone help with this?
 

I look at this one for an example which is #block-yui_3_17_2_1_1628285269767_20362 on https://beersupply.ca/nbf/tasty-nickelbrook-august-2021


I'd like to re-create this in a CODE box. Please help. Ideally as an example i'd like to recreate the above block-yui but plug the below span, etc into this custom image card box.

<span style="font-size:18px"><strong>Mocha Machine</strong></span><br /><span style="color:#000000"><span font-size:13px>Beachwood Brewing & Blendery</span><br /><span style="font-size:12px"><em>9.20% - Imperial Coffee Chocolate Porter </em></span><br /><br /><span style="font-size:11px">Mocha Machine is a well-engineered endeavor in massive aromatics and rich flavors. Brewed with an array British and German malts, this burly brew is infused with masterfully roasted coffee from Portola Coffee Lab in Costa Mesa, CA. It is then aged on cacao nibs from Equador, adding an awesomely deep dimension of fudge.</span><br /><br /><span style="font-size:10px"><strong>Characteristics: </strong>Coffee, Mocha, Creamy, Nuts, Dark Fruits, Chocolate, Fudge, Roasty, Dark</span><br /><br /><span style="font-size:10px">SKU 108676 - 24(1 X 0.354 L) - $4.75<br />Shipped from Container World</span>                
                
This is the div code for the image card at the aforementioned  #block-yui_3_17_2_1_1628285269767_20362 on https://beersupply.ca/nbf/tasty-nickelbrook-august-2021

                
                
                
                
                




<div id="block-yui_3_17_2_1_1628285269767_20362" class="yui3-widget yui3-block-base yui3-block-parent-base sqs-block-image yui3-block-image-base yui3-block-image sqs-block image-block sqs-block-editable yui3-dd-drop yui3-block-image-focused sqs-block-focused sqs-block-editing sqs-edit-dialog-open" aria-labelledby="yui_3_17_2_1_1633652808718_8423"><div class="sqs-layout-insert-point-container"><div class="sqs-prevent-block-focus-change sqs-layout-insert-point sqs-layout-insert-point-type-block sqs-layout-insert-point-position-top"><button class="sqs-layout-insert-point-button" data-test="insert-point-trigger"><span class="insert-point-icon"></span></button><span class="sqs-layout-insert-point-line"></span></div><div class="sqs-prevent-block-focus-change sqs-layout-insert-point sqs-layout-insert-point-type-block sqs-layout-insert-point-position-bottom sqs-layout-insert-point-topmost"><button class="sqs-layout-insert-point-button" data-test="insert-point-trigger"><span class="insert-point-icon"></span></button><span class="sqs-layout-insert-point-line"></span></div></div><div id="yui_3_17_2_1_1633652808718_992" class="yui3-block-image-content sqs-block-content image-block-outer-wrapper layout-caption-below design-layout-card image-position-right image-block-v2 sqs-text-ready" data-scrolled="true"><div id="yui_3_17_2_1_1633652808718_21332"><div id="yui_3_17_2_1_1633652808718_1031" class="yui3-widget sqs-image stretch sqs-intrinsic intrinsic yui3-resize" style="overflow: hidden; transform: translate3d(0px, 0px, 0px); max-width: 500px;"><div id="yui_3_17_2_1_1633652808718_1033" class="sqs-image-content" style="padding-bottom: 100%;"><img style="cursor: auto; object-position: 50% 50%; object-fit: cover;" data-image-focal-point="0.5,0.5" data-parent-ratio="1.0" class="" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/5f838db03f116375541aae8f/1628285409210-JO79PCU53HONTKECV1WE/tongue+tied+on+white.png?format=500w"><div class="sqs-editing-overlay"></div></div></div></div><div class="image-card-wrapper sqs-image-card image-block-animation-text" id="yui_3_17_2_1_1633652808718_19036"><div class="image-card sqs-dynamic-text-container" id="yui_3_17_2_1_1633652808718_19035"><div id="yui_3_17_2_1_1633652808718_1123" class="sqs-dd-invalid-handle yui3-widget sqs-html image-title-wrapper sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content image-title sqs-dynamic-text" contenteditable="true" data-width-percentage="42.4" style="font-size: 42.4%;"><h1 style="white-space:pre-wrap;"><strong><em>NICKEL BROOK BREWING </em></strong>Tongue Tied</h1></div></div><div id="yui_3_17_2_1_1633652808718_1157" class="sqs-dd-invalid-handle yui3-widget sqs-html image-subtitle-wrapper sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content image-subtitle sqs-dynamic-text" contenteditable="true" data-width-percentage="42.4" style="font-size: 42.4%;"><p class="" style="white-space:pre-wrap;"><strong>5.60% - Juicy Double Dry-Hopped IPA</strong></p><p class="" style="white-space:pre-wrap;">This brew is sure to tie your taste buds up in knots thanks to mouth-watering notes of papaya and pineapple. Tongue Tied is a bright and juicy IPA with a soft kiss of stone fruit on the finish.</p><p class="sqsrte-large" style="white-space:pre-wrap;"><strong>Characteristics:</strong></p><p class="" style="white-space:pre-wrap;">Bright, Juicy, Stone Fruit, Citrus, Papaya, Pineapple</p><p class="sqsrte-large" style="white-space:pre-wrap;"><strong>Find at:</strong></p><p class="" style="white-space:pre-wrap;">NEW BEER - <a href="mailto:office@Beersupply.ca"><strong>REQUEST IT BY EMAILING US</strong></a></p></div></div><div class="image-button-wrapper" id="yui_3_17_2_1_1633652808718_19040" style="display: none;"><div class="image-button sqs-dynamic-text" data-width-percentage="0" id="yui_3_17_2_1_1633652808718_19039" style="font-size: 0%;"><div class="image-button-inner" id="yui_3_17_2_1_1633652808718_19038"><a id="yui_3_17_2_1_1633652808718_19037"><div id="yui_3_17_2_1_1633652808718_1195" class="sqs-dd-invalid-handle yui3-widget sqs-html sqs-empty sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content" contenteditable="true"><span class="rte-placeholder ProseMirror-widget" data-placeholder="Add text" contenteditable="false"></span><br></div></div></a></div></div></div></div></div><div id="yui_3_17_2_1_1633652808718_1107" class="sqs-dd-invalid-handle image-caption-wrapper sqs-image-caption yui3-widget sqs-html sqs-empty sqs-editing" style="max-width: 500px;"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte image-caption sqs-html-content" contenteditable="true"><p class="rte-placeholder" data-rte-preserve-empty="true" style="white-space:pre-wrap;" data-placeholder="Add an image description"><br></p></div></div></div><div class="sqs-block-outline" id="yui_3_17_2_1_1633652808718_18540"></div><span data-test="block-label" class="sqs-block-label-tag" id="yui_3_17_2_1_1633652808718_8423">Image</span><div id="yui_3_17_2_1_1633652808718_8440" class="yui3-widget sqs-widget sqs-block-editor-button-container" role="toolbar"><div id="yui_3_17_2_1_1633652808718_8442" class="sqs-block-editor-button-container-content" data-test="block-toolbar"><div id="yui_3_17_2_1_1633652808718_8456" class="yui3-widget sqs-widget sqs-label"><div id="yui_3_17_2_1_1633652808718_8458" class="sqs-label-content">Image</div></div><div id="yui_3_17_2_1_1633652808718_8486" class="yui3-widget sqs-widget sqs-data-widget sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded sqs-dialog-button--edit" data-test="button" title="Edit" role="button" tabindex="0"><div id="yui_3_17_2_1_1633652808718_8488" class="sqs-button-vanilla-content active"><div class="label">Edit</div><div class="waiting" hidden="hidden" style="display: none;"></div></div></div><div id="yui_3_17_2_1_1633652808718_8520" class="yui3-widget sqs-widget sqs-data-widget sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded sqs-dialog-button--remove" data-test="button" title="Remove" role="button" tabindex="0"><div id="yui_3_17_2_1_1633652808718_8522" class="sqs-button-vanilla-content active"><div class="label">Remove</div><div class="waiting" hidden="hidden" style="display: none;"></div></div></div><div class="sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded Class-button-wrapper" title="Class" style="width: auto;"><div class="sqs-button-vanilla-content addClass-button active" data-action="addClass" data-not-block="-1"><div class="label" style="line-height:36px;color:#000!important;padding:0 10px" data-not-block="-1" data-action="addClass">Classes</div></div></div></div></div><div class="yui3-resize-handles-wrapper"><div class="yui3-resize-handle yui3-resize-handle-b"><div class="yui3-resize-handle-inner yui3-resize-handle-inner-b">&nbsp;</div></div></div></div>

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

On 10/8/2021 at 7:32 AM, mdr_willis said:

Site URL: https://beersupply.ca/nbf/tasty-nickelbrook-august-2021

I'm looking for the code for image cards.
 

i'm active so often with making new posts that I ideally just want to enter the code that would be to make an image card into the coding box. i generate my own text and info that i'd want to plug into that image card without having to make a new image card every single time. can anyone help with this?
 

I look at this one for an example which is #block-yui_3_17_2_1_1628285269767_20362 on https://beersupply.ca/nbf/tasty-nickelbrook-august-2021


I'd like to re-create this in a CODE box. Please help. Ideally as an example i'd like to recreate the above block-yui but plug the below span, etc into this custom image card box.

<span style="font-size:18px"><strong>Mocha Machine</strong></span><br /><span style="color:#000000"><span font-size:13px>Beachwood Brewing & Blendery</span><br /><span style="font-size:12px"><em>9.20% - Imperial Coffee Chocolate Porter </em></span><br /><br /><span style="font-size:11px">Mocha Machine is a well-engineered endeavor in massive aromatics and rich flavors. Brewed with an array British and German malts, this burly brew is infused with masterfully roasted coffee from Portola Coffee Lab in Costa Mesa, CA. It is then aged on cacao nibs from Equador, adding an awesomely deep dimension of fudge.</span><br /><br /><span style="font-size:10px"><strong>Characteristics: </strong>Coffee, Mocha, Creamy, Nuts, Dark Fruits, Chocolate, Fudge, Roasty, Dark</span><br /><br /><span style="font-size:10px">SKU 108676 - 24(1 X 0.354 L) - $4.75<br />Shipped from Container World</span>                
                
This is the div code for the image card at the aforementioned  #block-yui_3_17_2_1_1628285269767_20362 on https://beersupply.ca/nbf/tasty-nickelbrook-august-2021

                
                
                
                
                




<div id="block-yui_3_17_2_1_1628285269767_20362" class="yui3-widget yui3-block-base yui3-block-parent-base sqs-block-image yui3-block-image-base yui3-block-image sqs-block image-block sqs-block-editable yui3-dd-drop yui3-block-image-focused sqs-block-focused sqs-block-editing sqs-edit-dialog-open" aria-labelledby="yui_3_17_2_1_1633652808718_8423"><div class="sqs-layout-insert-point-container"><div class="sqs-prevent-block-focus-change sqs-layout-insert-point sqs-layout-insert-point-type-block sqs-layout-insert-point-position-top"><button class="sqs-layout-insert-point-button" data-test="insert-point-trigger"><span class="insert-point-icon"></span></button><span class="sqs-layout-insert-point-line"></span></div><div class="sqs-prevent-block-focus-change sqs-layout-insert-point sqs-layout-insert-point-type-block sqs-layout-insert-point-position-bottom sqs-layout-insert-point-topmost"><button class="sqs-layout-insert-point-button" data-test="insert-point-trigger"><span class="insert-point-icon"></span></button><span class="sqs-layout-insert-point-line"></span></div></div><div id="yui_3_17_2_1_1633652808718_992" class="yui3-block-image-content sqs-block-content image-block-outer-wrapper layout-caption-below design-layout-card image-position-right image-block-v2 sqs-text-ready" data-scrolled="true"><div id="yui_3_17_2_1_1633652808718_21332"><div id="yui_3_17_2_1_1633652808718_1031" class="yui3-widget sqs-image stretch sqs-intrinsic intrinsic yui3-resize" style="overflow: hidden; transform: translate3d(0px, 0px, 0px); max-width: 500px;"><div id="yui_3_17_2_1_1633652808718_1033" class="sqs-image-content" style="padding-bottom: 100%;"><img style="cursor: auto; object-position: 50% 50%; object-fit: cover;" data-image-focal-point="0.5,0.5" data-parent-ratio="1.0" class="" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/5f838db03f116375541aae8f/1628285409210-JO79PCU53HONTKECV1WE/tongue+tied+on+white.png?format=500w"><div class="sqs-editing-overlay"></div></div></div></div><div class="image-card-wrapper sqs-image-card image-block-animation-text" id="yui_3_17_2_1_1633652808718_19036"><div class="image-card sqs-dynamic-text-container" id="yui_3_17_2_1_1633652808718_19035"><div id="yui_3_17_2_1_1633652808718_1123" class="sqs-dd-invalid-handle yui3-widget sqs-html image-title-wrapper sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content image-title sqs-dynamic-text" contenteditable="true" data-width-percentage="42.4" style="font-size: 42.4%;"><h1 style="white-space:pre-wrap;"><strong><em>NICKEL BROOK BREWING </em></strong>Tongue Tied</h1></div></div><div id="yui_3_17_2_1_1633652808718_1157" class="sqs-dd-invalid-handle yui3-widget sqs-html image-subtitle-wrapper sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content image-subtitle sqs-dynamic-text" contenteditable="true" data-width-percentage="42.4" style="font-size: 42.4%;"><p class="" style="white-space:pre-wrap;"><strong>5.60% - Juicy Double Dry-Hopped IPA</strong></p><p class="" style="white-space:pre-wrap;">This brew is sure to tie your taste buds up in knots thanks to mouth-watering notes of papaya and pineapple. Tongue Tied is a bright and juicy IPA with a soft kiss of stone fruit on the finish.</p><p class="sqsrte-large" style="white-space:pre-wrap;"><strong>Characteristics:</strong></p><p class="" style="white-space:pre-wrap;">Bright, Juicy, Stone Fruit, Citrus, Papaya, Pineapple</p><p class="sqsrte-large" style="white-space:pre-wrap;"><strong>Find at:</strong></p><p class="" style="white-space:pre-wrap;">NEW BEER - <a href="mailto:office@Beersupply.ca"><strong>REQUEST IT BY EMAILING US</strong></a></p></div></div><div class="image-button-wrapper" id="yui_3_17_2_1_1633652808718_19040" style="display: none;"><div class="image-button sqs-dynamic-text" data-width-percentage="0" id="yui_3_17_2_1_1633652808718_19039" style="font-size: 0%;"><div class="image-button-inner" id="yui_3_17_2_1_1633652808718_19038"><a id="yui_3_17_2_1_1633652808718_19037"><div id="yui_3_17_2_1_1633652808718_1195" class="sqs-dd-invalid-handle yui3-widget sqs-html sqs-empty sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content" contenteditable="true"><span class="rte-placeholder ProseMirror-widget" data-placeholder="Add text" contenteditable="false"></span><br></div></div></a></div></div></div></div></div><div id="yui_3_17_2_1_1633652808718_1107" class="sqs-dd-invalid-handle image-caption-wrapper sqs-image-caption yui3-widget sqs-html sqs-empty sqs-editing" style="max-width: 500px;"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte image-caption sqs-html-content" contenteditable="true"><p class="rte-placeholder" data-rte-preserve-empty="true" style="white-space:pre-wrap;" data-placeholder="Add an image description"><br></p></div></div></div><div class="sqs-block-outline" id="yui_3_17_2_1_1633652808718_18540"></div><span data-test="block-label" class="sqs-block-label-tag" id="yui_3_17_2_1_1633652808718_8423">Image</span><div id="yui_3_17_2_1_1633652808718_8440" class="yui3-widget sqs-widget sqs-block-editor-button-container" role="toolbar"><div id="yui_3_17_2_1_1633652808718_8442" class="sqs-block-editor-button-container-content" data-test="block-toolbar"><div id="yui_3_17_2_1_1633652808718_8456" class="yui3-widget sqs-widget sqs-label"><div id="yui_3_17_2_1_1633652808718_8458" class="sqs-label-content">Image</div></div><div id="yui_3_17_2_1_1633652808718_8486" class="yui3-widget sqs-widget sqs-data-widget sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded sqs-dialog-button--edit" data-test="button" title="Edit" role="button" tabindex="0"><div id="yui_3_17_2_1_1633652808718_8488" class="sqs-button-vanilla-content active"><div class="label">Edit</div><div class="waiting" hidden="hidden" style="display: none;"></div></div></div><div id="yui_3_17_2_1_1633652808718_8520" class="yui3-widget sqs-widget sqs-data-widget sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded sqs-dialog-button--remove" data-test="button" title="Remove" role="button" tabindex="0"><div id="yui_3_17_2_1_1633652808718_8522" class="sqs-button-vanilla-content active"><div class="label">Remove</div><div class="waiting" hidden="hidden" style="display: none;"></div></div></div><div class="sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded Class-button-wrapper" title="Class" style="width: auto;"><div class="sqs-button-vanilla-content addClass-button active" data-action="addClass" data-not-block="-1"><div class="label" style="line-height:36px;color:#000!important;padding:0 10px" data-not-block="-1" data-action="addClass">Classes</div></div></div></div></div><div class="yui3-resize-handles-wrapper"><div class="yui3-resize-handle yui3-resize-handle-b"><div class="yui3-resize-handle-inner yui3-resize-handle-inner-b">&nbsp;</div></div></div></div>

Have you tried using the code block in squarespace yet?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 weeks later...
On 10/27/2021 at 12:04 AM, mdr_willis said:

yes and i need the code to put that in there. this is what i've asked.

Did you solve or still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.