CMS Development

CandiceLloyd
参加者

Flip tile once selected

解決

"I'm wondering if we can change the functionality of a page. Ideally, the page would have the events organized in tiles of three horizontally. The front of the tile would have the graphic, title, and date of event. After the tile is clicked on, it flips over without the page changing and additional write up and details are on the flip side (including link to register).Maybe not load it... but have a link to it as well as the detailed description of the event that is already listed?? Not load the event... but have a link to it as well as the detailed description of the event that is already listed??"

 

How would I go about implementing this?

This is not something I have done before.

 

I appreciate any help and feedback.

 

Regards,

Candice

0 いいね!
1件の承認済みベストアンサー
AJLaPorte_diagr
解決策
キーアドバイザー

Flip tile once selected

解決

Hi @CandiceLloyd,

 

I found this codepen that may be a good start to helping you get the basic card flipping down: https://codepen.io/Zacaree/pen/ZvQjOG

 

Essentailly they are using JS to toggle a class on the card with the onclick event. You could use this as a base and then add in the HubL for the events. How you choose have the events generated would be up to you. You could do this one of two ways:

 

  1.  Manually through a repeating group in a custom module. You could then use a page selector in the module to allow them to link the "More Info" button on the back of the card to another page either on the CMS or externally. Note: doing it this way would mean that when an event is over, you would most likely have to go in and manually delete the event card. 
  2. (Recommended) Using HubDB to generate the events and list them out. Using the Dynamic pages with HubDB would allow you have the ability for them to click a button in the info part of the card and be redirect to a page with more details on it. The benefit of this is the ability to add parameters on the items that would be pulled in so you could have past events be skipped from pulling onto the page. 

 

For more information on HubDB, see here: 
https://designers.hubspot.com/docs/tools/hubdb 
https://designers.hubspot.com/docs/tutorials/how-to-build-dynamic-pages-with-hubdb

 

For info on using repeating fields see here:
https://designers.hubspot.com/docs/modules/repeating-fields-and-loops

 

Hope this helps point you in the correct direction!

-----------------------
AJ LaPorte
www.wearediagram.com

元の投稿で解決策を見る

4件の返信
AJLaPorte_diagr
解決策
キーアドバイザー

Flip tile once selected

解決

Hi @CandiceLloyd,

 

I found this codepen that may be a good start to helping you get the basic card flipping down: https://codepen.io/Zacaree/pen/ZvQjOG

 

Essentailly they are using JS to toggle a class on the card with the onclick event. You could use this as a base and then add in the HubL for the events. How you choose have the events generated would be up to you. You could do this one of two ways:

 

  1.  Manually through a repeating group in a custom module. You could then use a page selector in the module to allow them to link the "More Info" button on the back of the card to another page either on the CMS or externally. Note: doing it this way would mean that when an event is over, you would most likely have to go in and manually delete the event card. 
  2. (Recommended) Using HubDB to generate the events and list them out. Using the Dynamic pages with HubDB would allow you have the ability for them to click a button in the info part of the card and be redirect to a page with more details on it. The benefit of this is the ability to add parameters on the items that would be pulled in so you could have past events be skipped from pulling onto the page. 

 

For more information on HubDB, see here: 
https://designers.hubspot.com/docs/tools/hubdb 
https://designers.hubspot.com/docs/tutorials/how-to-build-dynamic-pages-with-hubdb

 

For info on using repeating fields see here:
https://designers.hubspot.com/docs/modules/repeating-fields-and-loops

 

Hope this helps point you in the correct direction!

-----------------------
AJ LaPorte
www.wearediagram.com

CandiceLloyd
参加者

Flip tile once selected

解決

Hi AJ,

 

This is perfect thank you, so much information which will be incrediably useful!

Thank you for all your effort and going into detail, I am positive that I will be able to use something from which you have provided.

 

Thank you again!

 

Kind regards,

Candice

0 いいね!
jennysowyrda
コミュニティーマネージャー
コミュニティーマネージャー

Flip tile once selected

解決

Hi @CandiceLloyd,

 

Are you referring to setting something up like this

 

Additionally, @AJLaPorte_diagr helped a user with a similar request in this thread

 

Here is another conversation on the Community discussing the same thing. 

 

If you are looking to create something else, please let us know. The more details, screenshots and links (including examples) that you can share, the better the Community can assist.

 

Thank you,
Jenny

0 いいね!
CandiceLloyd
参加者

Flip tile once selected

解決

Hi Jenny,

 

Thank you so much for the feedback and additional links.

I will have a look through them and see what I can apply to our website.

 

Kind regards,

Candice

0 いいね!