How to add a restaurant menu to gantry 5
-
-
- Massimo
- Newbie
- Posts: 13
- Thanks: 0
-
Dear al
I am new to Gantry 5, whit the Theme: Isotope (v1.3.5 / rt_isotope) installed and running.
I would add a simple page to homepage of the web site for a restaurant menu with entries for name of the plate, description and price
That menu is available as a excel spreadsheet, but can be converted in any form, including graphic pdf or jpg.
I did not find the way to do that from the Base Outline (nor from the Default or Home-Particles) of the backend.
Later on it would be intetesting to implement the possibility to order from the menu, as in a tipical online shop.
Can anyone give to me some help for starting?
I apologize for asking these very basic questions, but unfortunately I did not find proper documentation for my basic level.
thank yo
mx - Last Edit: 4 years 10 months ago by Massimo.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
If this is going to be something that you have to maintain often then it might be worth developing your own particle for this - please refer to Gantry 5 docs the learn how. Otherwise, there may be particles in other templates that may fulfill this requirement or are adapatable to make them do so with suitable coding. There's also a particle available from inspirethemes for a "price list"
https://www.inspiretheme.com/gantry5-particles
. Finally, you can just use a customhtml particle on the layout and use Gantry 5 responsive grids to construct a tabular display of your items
http://docs.gantry.org/gantry5/advanced/responsive-content
.
Regards, Mark. -
The following users have thanked you: Massimo
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Massimo
- Newbie
- Posts: 13
- Thanks: 0
-
First of all thank you Mark for your answer!
If this is going to be something that you have to maintain often then it might be worth developing your own particle for this - please refer to Gantry 5 docs the learn how
You know, for a beginner like me, a develop process could require a quite long learning curve... But I do not disagree to do it in the future. Thanks for the idea.
Otherwise, there may be particles in other templates that may fulfill this requirement or are adapatable to make them do so with suitable coding. There's also a particle available from inspirethemes for a "price list" www.inspiretheme.com/gantry5-particles .
At the beginning I would like to find the way to display a menu even if by a graphic image (if too complicated to display an ordered text). The problem is that I really have no idea how to hook this "request" to the template. Looking through the various particles, I can't identify one that is suitable for the purpose. Evidently it's under my eyes, but I don't see it
Yes, I will look at the "price list" particle (even if a restaurant menu is not a real price list).
I forgot to write that I was looking for free stuff!
Finally, you can just use a customhtml particle on the layout and use Gantry 5 responsive grids to construct a tabular display of your items docs.gantry.org/gantry5/advanced/responsive-content .
Don't overestimate me, I'm still a novice
Thank you for your time!
I will try to do my experience, and I will be back.
Mx - Last Edit: 4 years 10 months ago by Massimo.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
All the options I gave you pretty easy.
If you really want to use an image (which I think is a bad idea since it won't be picked up by search engines) then you can just use a "logo/image" particle on the layout of your outline.
The quickest and easiest solution would be to use the responsive grids in a customhtml particle. It took me 30 seconds to whack this in and it seems to do what you want (See screenshot):
<div class="g-grid"> <div class="g-block size-70"> <p>Steak & Chips<br/>A slab of pure cow - covered in a nice peppercorn sauce</p> </div> <div class="g-block size-30"> <p>£15.99</p> </div> <div class="g-block size-70"> <p>Fish & Chips<br/>Finest North Sea Cod with mushy peas and a slice of bread & butter</p> </div> <div class="g-block size-30"> <p>£10.99</p> </div> <div class="g-block size-70"> <p>Pie & Chips<br/>Pure Aberdeen Angus steak pie, server with a garnish of seasonal vegetables.</p> </div> <div class="g-block size-30"> <p>£11.99</p> </div> </div>
Please let us know the outcome.
Regards, Mark. -
The following users have thanked you: Massimo
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Massimo
- Newbie
- Posts: 13
- Thanks: 0
-
Hi Mark,
yes the code works, but I wanted to ask you a better way of inserting that in the context of the web page.
Let me show how the template is organized and what is the rendering.
The section Utility is the one that manages the menu offer, as below:
This image is hidden for guests.
Please log in or register to see it.
The particle Banner Bottom contains the main description, and there is a button and a link which I would like to use to open a separate page for the menu
This is how it renders in the web page:
This image is hidden for guests.
Please log in or register to see it.
If I add the particle CustomHTML to the Utility section, I have a splitting of the view... While, I would like to open a separate page which contains the CustomHTML code.
Is it possible ?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
There are a million different solutions and I just gave you one quick example. If it were me, i'd be writing a particle to add that functionality and make it really easy to administer in the future. But, you can just put the HTML thatI gave you in the description field of your "banner bottom" and you can wrap it in a container in the HTML and make that pop-up using lightcase. Or you could drop the button in your existing particle and instead add another particle "popupmodule" that would add the button to your page and then poup a customhtml MODULE with the same content as I gave you.
As I said, many solutions it just depends on your skillset.
Regards, Mark. -
The following users have thanked you: Massimo
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Massimo
- Newbie
- Posts: 13
- Thanks: 0
-
Ok Mark, I see the point.
Let start with the easyest way: putting a HTML code as the one you gave me in the description field.
What I see now is the contents which take the main part of the main page, as it is a long list of name and prices.
Is it possible to apply a style inside the embedded code for smaller font or for have a 2 coloumn layout?
Also, You have mentioned that is possible to make that pop-up using lightcase. This point is obscure for me...
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
The code I gave you is a two column layout and yes you can chang ethe font style by adding a class on the code and styling that with custom CSS.
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Your subscription appears to have expired. Support does require a current subscription.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.046 seconds