The migration is mostly complete. I'd value some input

Showcase
1

Here’s my wordpress site.

Here’s what I’ve done to make it a Grav site by creating a Quark child/inherited theme.

As soon as I feel 100% confident it’s up-to-date, I’ll be moving the files to the wordpress domain.

Some things I’m not certain about…

  1. I feel like I did the header links (flights, maintenance, stuff) wrong.
    What I did was create directories at
    /user/pages/02.flights and
    /user/pages/03.maintenance and
    /user/pages/04.stuff and then in the default.md file include a single line with something like redirect: '/category:flights'
    Is this really the correct way to do a header menu to go to a page showing only specific categories?
  2. I want to include another header link item that goes to a Contact page, but my head is drawing a blank on the best way to do this.
  3. How does the Grav logo in the Quark header change color with the background on a demo site, but it’s only a black color on my site?
  4. How do I make the archive pages load thumbnails instead of full-size images? The archive pages are taking about 10-15 seconds to load because all the images are about 150k when they should be about 15k.

I’ll probably have some more questions, but I’m pretty tired as I’ve been awake about 30 hours now working on this

2

Hi, I don’t use the Quark theme much so I have no quick advice on your menu question - save to say I might have used tags. Mainly I just wanted to say how jealous I am of your plane, it’s a beauty! And I’m guessing you can land it in a really short space, so great for exploring too?

3

Nice plane and blog :+1:

My advice is to create separate topic for yours problems and share source code with us…

  1. Why not if U got a lot of categories, but why U creating page and setting up a redirect…?
  2. Please share code of your current header nav, as not all of us are familiar with your theme…
  3. Sorry I didn’t get what U want to achieve
  4. For post from collection U can resize img… something like:

src="{{ post.media.images|first.resize(800, 400).url|e }}

U might also consider using .webp img formats…
src="{{ post.media.images|first.resize(800, 400).convert('webp').url|e }}

and use lazy loading for images…

Some extra…
You could reduce loading time of your css files by serving only one file instead multiple css files…

https://learn.getgrav.org/17/themes/asset-manager#example

4

Thanks for the kind words. It’s actually an airplane designed for speed and efficiency on a small, economical engine so I do get to explore places far away, just not places with short and/or unimproved runways.

5

Question 3, Logo problem:
Here’s how it works for me.
I assume you are working with a child theme.

  1. copy logo.html.twig from /themes/quark/templates/partials to /themes/quark-child/templates/partials
  2. open the copy of logo.html.twig and w10.svg with an editor
  3. copy the complete logo code and replace with it in the file logo.html.twig the code from {% if logo %} to and with {% endif %}
  4. change width and height to auto
  5. in /themes/quark-child/css/custom.css add the following code:
    .mobile-logo img, .mobile-logo svg {
    height: 42px;
    margin-top: 1rem;
    width: auto;
    }
  6. delete the previously inserted SVG logos in the theme administration area
  7. save all, clear cache, reload page

Good luck!

6

Thanks for sharing this. I was going to create several individual posts for each of my four issues in the original post. I’ve barely had a moment at the computer the past week, but will try your suggestion when I have a moment and report back my results.

7

I had a chance to try your suggestion and it worked, thanks!

The editor that I used for the svg file in step 2 was this website: https://editsvgcode.com/

I uploaded my svg file there and it produced a file for download. I copied the entirety of that file from the opening <svg> tag to the closing </svg> tag and pasted it into the appropriate place in logo.html.twig and now the svg file changes to contrast the background color.

I don’t know how to complete step 4.

I did complete step 5, though I’m not sure exactly what it does nor how to verify it’s working.

I couldn’t complete step 6 because I can’t figure out what part of the admin I used to upload the original svg file. :confused:

Regardless, the logo image is displaying the way I want it to so thanks for your instructions :+1:

8

Step 4:
The logo should be positioned at the left edge of the layout grid, which is not the case at the moment. You can achieve this by changing the code of your SVG logo right at the beginning from

<svg xmlns=“SVG namespace” version=“1.0” width=“300.000000pt” height=“173.000000pt”

to

<svg xmlns=“SVG namespace” version=“1.0” width=auto height=auto

1 Like
9

Worked! Thanks again.