Site Designer and the future of Web...

User 2699991 Photo


Registered User
5,558 posts
Online Now

Stonecherub wrote:
Ah, the magic phrase "(as long as you know what or how to do it)!"

How the hell, within the framework of CoffeeCup, do I find out "what or how to do it?"

I bought the Materialize components for handling images and find myself experimenting where I don't quite understand the explanations or they aren't complete.

For example, I would like to put short captions on the images in a MaterialBox grid gallery. Where do I find out how to do that?

CC software is good but leaves me immensely frustrated.


ASK

Look Listen & Learn
There are of people on this forum, that can help,

and you don't need to use materialize components to put captions over images.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS

User 244626 Photo


Registered User
811 posts

Use the data caption attribute as per the instructions on https://materializecss.com/media.html
Bootstrap 5 CSS Grid.
User 2040390 Photo


Registered User
95 posts

Twinstream wrote:
Use the data caption attribute as per the instructions on https://materializecss.com/media.html


Thankyou for the link, Twinstream. I experimented with this but it did not work. Maybe because I am using MS Edge as the default browser to preview changes to my website.
User 122279 Photo


Senior Advisor
14,736 posts
Online Now

Did you add the initialisation script?
Here is a wee file that I just banged together. No images, just the placeholders.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
811 posts

Stonecherub wrote:
Twinstream wrote:
Use the data caption attribute as per the instructions on https://materializecss.com/media.html


Thankyou for the link, Twinstream. I experimented with this but it did not work. Maybe because I am using MS Edge as the default browser to preview changes to my website.


Ok, sorry you will not be able to use the data-attribute method. This is probably because Coffeecup does not allow adding data-attributes directly to the <img> tag.
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Actually it works here as the data-attribute is added to the div tag that wraps the picture tag that wraps the img tag..

https://material-components.coffeecup.c … albox.html
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Here is a sample project of the Material Box if it helps...
Attachments:
Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
5,558 posts
Online Now

Here is a video demo of one I have as a component but with the Foundation framework not materialize
captions & text overlay too

https://youtu.be/IpAdGsvQaW4
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.