Site Designer and the future of Web...

May 2nd, 2019 at 01:09 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,596 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.
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials
https://mawarputih.coffeecup.com/forms/contact-wayan/
May 2nd, 2019 at 02:10 PM
User 244626 Photo

Twinstream
Registered User
811 posts

Use the data caption attribute as per the instructions on https://materializecss.com/media.html
Bootstrap 5 CSS Grid.
May 2nd, 2019 at 02:37 PM
User 2040390 Photo

Stonecherub
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.
May 2nd, 2019 at 02:50 PM
User 122279 Photo

Inger
Senior Advisor
14,752 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
May 2nd, 2019 at 02:53 PM
User 244626 Photo

Twinstream
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.
May 2nd, 2019 at 03:36 PM
User 244626 Photo

Twinstream
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.
May 2nd, 2019 at 04:46 PM
User 244626 Photo

Twinstream
Registered User
811 posts

Here is a sample project of the Material Box if it helps...
Attachments:
Bootstrap 5 CSS Grid.
May 2nd, 2019 at 06:16 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,596 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
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials
https://mawarputih.coffeecup.com/forms/contact-wayan/

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.