tranduyhung/grav-theme-big-picture

Big Picture theme is a port of Big Picture by HTML5 UP for Grav CMS

Big Picture theme for Grav CMS

Big Picture theme is a port of Big Picture by HTML5 UP.

Demo

You can find a demo of the theme at grav-theme-big-picture.flatfiledeveloper.com.

Features

• One page with contact form
• Fully responsive
• Built on HTML5/CSS3/Skel
• Font Awesome ready
• Released under Creative Commons Attribution 3.0 License

Installation

GPM Installation (Preferred)

The simplest way to install this theme is via the Grav Package Manager (GPM) through your system's Terminal (also called the command line). From the root of your Grav install type:

bin/gpm install big-picture

This will install the Gateway theme into your /user/themes directory within Grav. Its files can be found under /your/site/grav/user/themes/big-picture.

Manual Installation

To install this theme, just download the zip version of this repository and unzip it under /your/site/grav/user/themes. Then, rename the folder to big-picture.

You should now have all the theme files under

/your/site/grav/user/themes/big-picture

NOTE: This theme is a modular component for Grav which requires the Grav, Error, Problems, Email and Form plugins.

Setup

If you want to set Big Picture as the default theme, you can do so by following these steps:

• Navigate to /your/site/grav/user/config.
• Open the system.yaml file.
• Change the theme: setting to theme: big-picture.
• Save your changes.
• Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in Terminal and typing bin/grav clear-cache.

Once this is done, you should be able to see the new theme on the frontend. Keep in mind any customizations made to the previous theme will not be reflected as all of the theme and templating information is now being pulled from the big-picture folder.

Configuration with Admin plugin

If you have Admin plugin installed, you can fully manage the sub-pages via Admin plugin.

• For all of the sub-pages, there is a Heading option in Content tab which is used to define the heading of each page.
• Background Image option is available in Content tab for intro and info page file.

• There is an Images tab for gallery template, it is used to setup the image gallery.

• To manage the items in footer, you edit the theme's settings. Links with icons are on the left side of footer, on the right side are custom text.

• When you create a page with default template (file name is default.md), you can show a menu item linked to your home page at the top right corner of the page, you just need to enter the label of the menu item to Home Menu Item field at the bottom of Content tab.

Navigation Buttons

To have navigation button for each section, the folder name of your home page must be home, in its modular.md file you need to setup the custom ordering of your modular pages. Here is an example:

title: Home
content:
    items: '@self.modular'
    order:
        by: default
        dir: asc
        custom:
            - _intro
            - _what-i-do
            - _who-i-am
            - _my-work
            - _contact

Updating

GPM Update (Preferred)

The simplest way to update this theme is via the Grav Package Manager (GPM). You can do this with this by navigating to the root directory of your Grav install using your system's Terminal (also called command line) and typing the following:

bin/gpm update big-picture

This command will check your Grav install to see if your Gateway theme is due for an update. If a newer release is found, you will be asked whether or not you wish to update. To continue, type y and hit enter. The theme will automatically update and clear Grav's cache.

Manual Update

Manually updating Big Picture is pretty simple. Here is what you will need to do to get this done:

• Delete the your/site/user/themes/big-picture directory.
• Download the new version of the Big Picture theme from this repository.
• Unzip the zip file in your/site/user/themes and rename the resulting folder to big-picture.
• Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in terminal and typing bin/grav clear-cache.

Note: Any changes you have made to any of the files listed under this directory will also be removed and replaced by the new set. Any files located elsewhere (for example a YAML settings file placed in user/config/themes) will remain intact.

grav-theme-big-picture's Issues

Autoload.php missing while installing Tabs addon

Hello,
I get this error when I install tabs addon.

require(/home2/prizesciedu/public_html/fest/user/plugins/tabs/vendor/autoload.php): Failed to open stream: No such file or directory

Error sending the contact-form

By sending the contact-form there occurs an error.

if (!$page) {
throw new RuntimeException('Display page not found. Please check the page exists.', 400);
}

The E-Mail is sending successfully. I think it is just the "Thank you" Message.

Can`t change the image

Hello,
(1) I have the admin plugin, but I have 'Security" tab instead of "Images" tab.
Cant locate "Images" tab anywhere. (2) I tried to replace it using FTP (maintaining same file name), but I couldnt find it.

Wrong yaml file name

Hi, can you please rename bigpicture.yaml to big-picture.yaml? Otherwise the theme is not showing up in the Admin panel. See getgrav/grav-plugin-admin#643

No Images tab in admin panel.

I have installed the big picture theme on grav on my website. I was following the instructions in the readme to get pictures to display in the background on the main pages. However, there is no 'Images' tab on the page editor. This is on Grav v1.6.28 - Admin v1.9.17. How can I get around this issue? Also, do you have the markdown you used to make the demo website? That would be a great resource to learn from!

Inheritance - Missing footer

Hello,
and thank you for this simple Grav theme :)

I am new to Grav and have yet limited knowledge.
I did follow these instructions https://getgrav.org/blog/theme-development-with-inheritance.

Now my inherited theme do not have any options in Grav's admin panel (there is not "Big picture" image preview and the only button is to activate the inherited theme), and so, the resulting website show an empty footer.

Do you think I missed something or is there work to make the theme "Inheritance compatible" ?
Thank you.

All I would like to add to your theme is a way to switch languages with the Language Selector Plugin

Quick question.

Love the theme! I am a bit of a grav noob but how are you linking the main bg images?

Usuage

Hi,

Im trying to use your theme but having some difficulties.

I set the Home page to be type modular, I then create some modular pages of various types intro, info, contact etc and set their parent to be Home. However the navigation buttons to go to the next section don't appear.

Any suggestions on what maybe wrong with my setup?

Thanks
Dan

'Uncaught ReferenceError: breakpoints is not defined' after updating

Hello, I just updated from version 1.x to 2.x and the website doesn't look right (the 'jump to' sections is not smooth, and the fonts and images look wonky).

I get this error on the console:

Uncaught ReferenceError: breakpoints is not defined
    <anonymous> .../user/themes/big-picture/assets/js/main.js:15
    <anonymous> .../user/themes/big-picture/assets/js/main.js:219
[main.js:15:3](.../user/themes/big-picture/assets/js/main.js)

Gallery Lightbox not working.

There seems to be a jquery conflict with the gallery option. When trying to open a picture in Lightbox the following error hits:
jquery-3.x.min.js:2 Uncaught TypeError: e.indexOf is not a function error in jquery-3.x.min.js

Check https://odenwald-trekking.de/ for replicating the error.

I already fixed a line in your jquery main.js file that triggered the same error in console.

.load(function() { $window.trigger('resize'); });

Line 227. It should be.

			`.on('load',` function() {
				$window.trigger('resize');
			});`

In the end, I'm not sure why, but on your demo site the gallery uses jquery 2.x instead of 3.x. Testing it, I found the ancient 2.x version works fine, so I figured this is a theme problem, rather than a system problem.

It'd be nice, if you could take a look at it. Cheers and thank you!

Kind regards

And thanks for making this theme! It's very nice, very easy to use and just perfekt for a landing page!

Linkcolor white on white for modular/info

In the modular page template info, the textcolor for hyperlinks is set to white. As the backgroundcolor here is also white, links become quite invisible.

Contact Form Usage

Hi,

Sorry another usage question. How do you populate fields in the contact form using the admin plugin?

I've added the following using the expert tab in Frontmatter, however noting appears on the fronted :(

https://gist.github.com/Dan458/dcb1146bc8771e37132428038e65c231

form: name: 'Get In Touch' fields: - name: name label: Name type: text placeholder: 'Enter your name' autofocus: 'on' autocomplete: 'on' - name: email label: 'E-mail Address' type: email validate: required: true - name: textarea type: textarea label: 'Your Message' placeholder: 'Enter your message' - name: spacer type: spacer break: true buttons: - type: submit value: Submit - type: reset value: Reset process: - email: subject: ' Contact - {{ form.value.name|e }}' body: '{% include ''forms/data.html.twig'' %}' - message: 'Thank you for getting in touch, we will contact you as soon as possible' - display: thanks

Regards,
Dan

Upgrading skeleton

Hi, Thanks for bringing this theme up to date. Would you mind updating the skeleton also? Its download comes with Grav 1.6.8...

Gallery and Thumbnails

There is something up with the Thumbnail Max width/height setting or I don't understand where the containers are inheriting their settings.
For example, reducing from 540 (default) to 300 doesn't change the thumbnail container on the site. It does change the resolution of the same size thumbnail.
At 250

At 540

Image list is empty in gallery

I have uploaded a few pictures in the gallery using the admin plugin.
Image was successfully uploaded and saved.

However when I go to the Images tab to create an item, the list is somehow empty.

Any idea?

Menu on Mobile?

Hi,
where's the navigation/menu on mobile devices? If I test various screen sizes in firefox the navigation/menu dissapears...?

Changing the words "Big Picture" in the top left

Is it possible to change them? I can't see anywhere how to.

Error adding gallery Grav v1.6.6

Customizations : box transparency and padding

Hi,

First of all, thx a lot for your work. Big-Picture works great and is elegant and simple, exactly what I'm looking for.

I would like to customize the box color/transparency and some padding. I tried to modify _box.scss located in /assets/scss/components without any success. I also tried main.css in /assets/css.

I would be grateful if you could help me to achieve these customization.

Sorry if my question seems ridiculous, web-designing is completely new for me.

Thx for your help !

Step by Step to Create First Page with Background?

First off thank you for all the work on this! I'm excited to try and use it.

I can't get it to work though. No errors. Just 'how do I do a simple first page with background?"

Steps I've done already from Admin Portal:
-added theme
-activated theme
-cleared cache
-added gallery page
-added default page.

Nothing. Just shows default page?

how to chose menu items

home menu item's fields are not appearing, it's the folder name or the menu field's name instead. I don't understand how I choose sections that I want in the menu, and those I don't want.

Option to standardize gallery thumbnail size

Hi just wondering if you could consider to provide options to standardize thumbnail sizes. As of now, if i were to upload images with different orientation or aspect ratio, the alignment runs. I was hoping it would do some smart cropping so that I get a standard tile of images irregardless of what aspect ratio.

Error if JavaScript is added by a form field

Hi,

I've stumbled across something that I think may be a bug.

Running on Grav 1.7.17 I have noticed that when using recaptcha V3 the JavaScript added to the list to bundle at https://github.com/getgrav/grav-plugin-form/blob/develop/templates/forms/fields/captcha/captcha.html.twig#L15 doesn't get loaded

If I take the line an add it to partials/head.html.twig and populate the site-key and the theme all works as expected.

I haven't had any issues with V2 recaptchas rendering only when changing to V3 did this occur.

Grav plugins integration

For plugins compatibility is needed to load jquery with a priority (issue found with lightslider plugin).
My solution:
in file templates/partials/header.html.twig row 43

 -  {% do assets.add('theme://assets/js/jquery.min.js') %}
 +  {% do assets.add('theme://assets/js/jquery.min.js', 100) %}

radio buttons do not work

I can't get radio buttons to work in this theme. The code works properly using Quark theme. In big picture it only displays the values, in this example

Markdown
Twig

not

O Markdown
O Twig

as it should

form:
    action: /home
    name: contact-form
    fields:
        name:
            label: Name
            placeholder: 'Enter your name'
            autocomplete: 'on'
            type: text
            validate:
                required: true
        email:
            label: Email
            placeholder: 'Enter your email address'
            type: email
            validate:
                required: true
        message:
            label: Message
            placeholder: 'Enter your message'
            type: textarea
            validate:
                required: true
        my_choice:
            type: radio
            label: Choice
            default: markdown
            options:
                markdown: Markdown
                twig: Twig

etc...

It outputs this html:

            <div class="field">
                    <div class="form-field  ">
          <div class="form-data"
          data-grav-field="radio"
  data-grav-disabled=""
  data-grav-default="&quot;markdown&quot;"
    >
                          
        <div class="radio  ">
            <input type="radio"
                   value="markdown"
                   id="my_choice-markdown"
                   name="data[my_choice]"
                   class=" "
                   checked="checked"                                                                      />
            <label style="display: inline" class="inline" for="my_choice-markdown">Markdown</label>
        </div>
            
        <div class="radio  ">
            <input type="radio"
                   value="twig"
                   id="my_choice-twig"
                   name="data[my_choice]"
                   class=" "
                                                                                        />
            <label style="display: inline" class="inline" for="my_choice-twig">Twig</label>
        </div>
                    </div>
  </div>
                  </div>
                                      
            <div class="field">
                    <div class="form-field  ">
          <div class="form-data"
          data-grav-field="radio"
  data-grav-disabled=""
  data-grav-default="null"
    >

Accordion plugin isn1t compatible with TinyMCE

Hello,
I set up accordion functionality in TinyMCE plugin.
However, in the editor, I get this error:
Failed to load plugin: accordion from url https://prize-sci.org/fest/user/plugins/tinymce-editor/js/tinymce/plugins/accordion/plugin.min.js

P.S. This functionality is compatible with version 6 only of tinymce.

No Images register

Hello
I installed the big picture skeleton in version 1.4.1 in my ubuntu apache server.
Ubuntu 18.04
Apache: 2.4.29
PHP 7.2

Afterwards I installed the admin plugin via bin/gpm install admin

Unfortunately I'm not able to see the images register under "Pages"

Do you have a clue why?

Add reCaptcha

Is it possible to add reCaptcha to the Form? With the standard reCaptcha integration I get, 2 instead of 1 submit Buttons.

Mobile view no button

On mobile view the button to scroll down from one „page“ to the other disappears.
On the sample page is no menu/link to go back to home page.

[Feature] Add a modular for plain text

Please add a modular type for simple text.
This would be useful for longer passages, imprints or disclaimers.

This commit works for me, but it is merely a hack than a proper css solution.

Gallery and image size issues

Would it be possible to implement better responsive non-gallery image resizing? Like, if I add an image to an info-type section, it bleeds past the info box unless I use the cropResize argument.

Also, is it possible to add support for longer gallery captions and linking to another page in a gallery item, i.e. clicking on the full image leads to another page?

Language not submitted

The language is not submitted within the html markup:

Modifying similar the antimatter theme it works fine :

background images out of size on iOS device

I am struggling with the display of the big-picture theme on my iOS devices.
My own installation of Big Picture [v1.4.2] under Grav v1.7.27.1 always has the problem that the background pictures only show a small corner of the pictures but massively enlarged when viewed on my iOS devices (iPhone and iPad).


From a PC everything looks OK.
Interestingly, the demo at grav-theme-big-picture.flatfiledeveloper.com works OK on my iPhone, but shows the same behaviour on my iPad (screenshots above).

Can this be healed?

Thx

Background Image option is not visible in Content tab for intro and info page file.

Hi,
I'm struggling to figure out how to pass my images as a background image for those sections.

that is the exemple i get in the readme:

and that is what i actually get:

Am i missing something or does the feature was removed?
Thank you in advance