A list of suggestions for improvements

[skafte]

Hi Andrii,

Hope you are well.

I have now (finally) finished the site I’ve been working on using the Shogun theme. I’ve been really impressed with the theme and all it’s functionality + your hugely kind support, and so there’s full satisfaction from here! Thank you very much! :-)

Whilst working on the site, I took a few notes of things I think could improve the theme, both my own ideas, and things my client mentioned/requested. Here they are:

1. Pop-up images are being ‘cut off’ by the header
they pop-up really nicely, but if you scroll down even just a slight bit, and you’ve activated the sticky header, then the header is shown above the image. Here’s an example: http://goo.gl/cDJxN8

2. Add breakpoints to masonry tiles (+ more)
I would propose that the tiles get breaking points so that they don’t become so small on mobile screens. Here’s an example where, with 3 columns, the images gets hard to see and hit with your fingers: http://goo.gl/3lMCBX – as I will also point out later (point 8), I’ve been struggling with choosing which gallery structure to use for my pages (VC’s or Shogun’s). Each option have strengths and weaknesses. Here’s a breakdown:

Shogun’s portfolio:
— Scales the images with the browser size (no minimum image size).
— No breaking points.
— No control over cropping of images (ref. point 4 and 5 on my list).
— No ‘previous/next’ image feature.
— Overlay titles/excerpts.

VC’s gallery:
— Doesn’t scale the images when browser is being re-sized (they simply jump down underneath each other).
— Got breaking points.
— Control cropping of images by using thumbnails.
— WP lightbox features included; ‘previous/next’.
— No titles or excerpts.

Ideal solution, in my opinion, would be:
— Scales the images with the browser size (no minimum image size).
— Got breaking points.
— Control cropping of images.
— Previous/Next image feature.
— Option to add titles/excerpts (as overlay or underneath above the image).

In order to show you examples of how the two current options differ, here are two pages at which I’ve been experimenting:

Shogun’s portfolio: http://goo.gl/ukWO2U
VC’s gallery: http://goo.gl/BOswsL

3. Add custom margin option for masonry tiles
I reckon it would be great if it was possible to chose the margin on the masonry tiles :-)

4. Add option to choose fitting style for masonry tiles
This is a ‘nice to have’ feature, might be a bit too far away from what you envisaged for Shogun. Anyway, the masonry tiles currently auto crop the images to fit the squares (1×1, 1×2, 2×2, etc.). I think it would be cool if you could chose to force images to fit into the squares (ie. with a white background) OR allow the tiles to have varying sizes; similarly to here: http://wearebuild.com/work/

5. Add thumbnails option to masonry tiles
As an alternative to above suggestion (point 4), you could perhaps consider making it possible to use thumbnail images for the tiles. In that way it would be possible to better control what’s shown in the portfolio by cropping the thumbnails as you like (as of now, it’s hard to get it just right). Furthermore this might also make the loading of the tiles quicker as you’d only need to load the thumbnails and not the full and large images.

6. Logo loads twice and seems a bit bulky
I’ve experienced that the logo in the header loads twice on retina screens (I am using Safari, Chrome and Firefox). First it loads the non-retina version and then after that the retina one. Here’s a little video showing what I am experiencing: http://goo.gl/W2Yxeo – please also notice the re-loading/animation of the header and logo when the browser window is being re-sized. UPDATE: between noting this down and sending if off to you I’ve found a solution to this using the ‘Picturefill’ method instead of the ‘Retina.js’ method in the WP Retina X2 plug-in that comes with the theme. This change of method prevents the images from loading twice, however I am not yet sure how compatible this method is with the whole of the theme and with different browsers? It seems to work well in Chrome, however Firefox and Safari is struggling a bit – at least with my site anyway :-)

7. Add overlay on Visual Composer elements
With great satisfaction I’ve built my site with a combination of built-in Shogun and VC elements. The only thing that seems to set those two ‘tools’ apart (from a UX perspective) is that all the VC elements don’t have the black overlays that Shogun has, and so therefore it feels a bit inconsistent. I’ve made a bit of a clunky solution here: http://goo.gl/LauCXk ; where I’ve added a background to the individual images, and then, with custom CSS for that particular page, forced the images to lose opacity when hovered. Downfall of this solution is that the images have to fill the whole column as otherwise the background will be exposed when you scale the browser size and the breakpoints set in (I hope that makes sense!?) Anyway, this means that the site gets slower as all the images will have to be larger than necessary and that the tablet-view will have to have large images filling out the whole of the columns. Here’s an example where you can see how my solution is bulky: http://goo.gl/aJvZuO (the top image has a maximum size, which I like for this particular page, and the next image has got no black background being exposed, but is too big). Anyway, this might not be something you plan to work on as VC is third-party plugin. Just thought I would mention it anyway.

8. Titles on masonry tiles
I’ve experienced a dilemma between choosing whether to make pages using the built-in Shogun features or the VC features. More precisely between Shogun’s ‘masonry portfolio template’ or VC’s ‘posts grid’ feature. I had a page on which I wanted to have all the images showing on a masonry grid with titles above or underneath each image AND have the images popping out in the lightbox on click (as a WP gallery). The pop-out lightbox is not possible to have using the ‘posts grid’ feature, but adding titles is not possible with the ‘masonry portfolio template’ :-( So, unfortunately I haven’t yet found a solution to this issue, but I can definitely live with how it is for now. Just thought I would point out the need of being able to add titles to masonry tiles.

9. WooCommerce seems to overwrite page styles
I had a hope that I could make WooCommerce use an alternative ‘Product Archive / Shop Page’, so that I could more freely design the main shopping page. However, WooCommerce seemed to overwrite any changes I made to the shop page even though I had pointed WC to use a different page as ‘Product Archive / Shop Page’ – no matter what I did to the standard ‘.com/shop/’ page WC overwrote it. In the end I decided to make the main shopping page be ‘.com/shop-home/’. This works out fine, although it is a bit of a compromise. Anyway, just thought I would let you know…

10. Added to cart message
When I add an item to my cart I get the following message: “View cart, “Yellow & Midnight Mini Square Column” was successfully added to your cart.” I would think that it makes more sense, if ‘View cart’ came after, so that it’s “‘Yellow & Midnight Mini Square Column” was successfully added to your cart. View cart.” – but perhaps this is something I can find a plug-in to change…

11. Make it possible to hide logo completely / make minimisation of header happen earlier
With your help I’ve already managed to hide the logo from the header on scroll instead of it becoming smaller. However, if this is an option you would consider making a theme feature, then perhaps a more smooth transition could be good; I’d imagine, for example, that the logo would simply scroll out of the screen like this yellow bar: http://goo.gl/MXfZfo – but keeping the menu. Also, is it possible to make the header minimise earlier? Now that I’ve made the logo hide on scroll it feels like it the menu takes a while to register the scroll. Here’s an example: http://goo.gl/Wpn81L

12. WooCommerce CodeStyling Localization bug
As I wanted to change the word ‘coupon’ to ‘voucher’ I found that the CodeStyling Localization plug-in isn’t compatible with the theme. Here’s the message I got: “Loading Issue: Author is using load_textdomain instead of load_plugin_textdomain function. This may break behaviour of WordPress, because some filters and actions won’t be executed anymore. Please contact the Author about that.” – I am aware that it might be that the theme simply isn’t optimised to be compatible with CodeStyling Localization, or that I am just doing something wrong, but I just thought I would let you know about it anyway.

13. Previous/Next project/blog post
And perhaps also a ‘back to blog/portfolio’ button. I reckon this would be nice :-) But much less needed than the points above.

That’s all! Sorry about the long list. I hope it’s useful for the further development/fine-tuning of the theme.

Please feel welcome to shoot me any questions if there’s anything you’d like me to elaborate on, or if there’s anything I can help with.

All the best,

Jonas

[skafte]

Hi again,

—

Re point 1 (‘Pop-up images are being ‘cut off’ by the header’) – I found a solution, which I thought I would share in case anyone should be interested. I simply changed the z-index of the header in my style.css file as follows:

.fixed-header {
z-index: 1000;
}

Before it was 9000, whereas the pop-up images are 1102.

As far as I know this doesn’t conflict with any other elements of the site.

—

Re point 12 (‘WooCommerce CodeStyling Localization bug’) – actually I think the issue is with WooCommerce and not the theme? Anyway, I found a solution by manually downloading the .PO and .MO files, translating them using http://poedit.net/, and re-uploading them. This worked a treat! :-)

—

Re point 6 (‘Logo loads twice and seems a bit bulky’) – unfortunately my solution wasn’t good enough and this issue showed up to be a bigger problem than I thought it was in that Firefox really isn’t compatible yet with the ‘Picturefill’ method of the ‘WP Retina 2x’ plugin. I reverted back to the ‘Retina.js’ method, which works, but which slows the site down dramatically as all images are loaded twice on retina devices. Anyway, through playing around with this I found another, and much more problematic issue, which is that if an uploaded image isn’t big enough for ‘WP Retina 2x’ to generate a @2x version of it for all thumbnail sizes, and if you then call a thumbnail on your site that hasn’t got a @2x version, then the image won’t display and the browser just shows the image filename instead of reverting back to using the low res version instead… This means that in order to ensure that all images will be shown whenever called, the original file will have to be a minimum size of 2208px on the short edge as this is twice the size of the ‘square’ image thumbnail size that the Shogun theme uses. Hope that makes sense? Here’s an example, on this page using Firefox on a retina device, the images shows up, but then disappears soon after the browser has realised that there are no @2x versions of the images (ignore the slider): http://onlygraphicdesignerscare.com/

Anyway, we’ll probably have to wait for Firefox to catch up re using the ‘Picturefill’ method and in regards to the other issue, I’ve also reported this to the developer of the WP Retina 2x plugin in the hope that this can be fixed.

Please do not hesitate to ask me any questions if I haven’t explained well enough. Then I’ll do my best to flesh it out some more :-)

Anyway, none of these are pressing issues/suggestions, just thought I would share them here anyway.

Cheers!

Jonas

PS. I’m still also interested in the below (and above) points if anyone has got suggestions :-)

2. Add breakpoints to masonry tiles (+ more)
3. Add custom margin option for masonry tiles
4. Add option to choose fitting style for masonry tiles
5. Add thumbnails option to masonry tiles
7. Add overlay on Visual Composer elements
8. Titles on masonry tiles
9. WooCommerce seems to overwrite page styles
10. Added to cart message
11. Make it possible to hide logo completely / make minimisation of header happen earlier
13. Previous/Next project/blog post

[skafte]

Hi again, again :-)

Just wanted to follow up on point 6 (‘Logo loads twice and seems a bit bulky’), and say that I’ve now found a solution to this problem.

After having struggled for a while trying out different settings combinations, I finally found out that it was simply the inbuilt retina.js javascript of the theme that made WP Retina 2x not able to work properly; it would not default back to a low-res version if an @2x version wasn’t available and switching method to ‘Picturefill’ wasn’t possible as the retina.js script was in the way. I simply deleted this script and WP Retina 2x is now working fine. For anyone interested in doing the same (switching to the Picturefill method), please note that you’ll have to define the size of your logo. I did it like this:

#logo img {
width: 300px;
height: auto;
max-width: 90% !important; (to make the logo always fit on mobile screens)
}

.fixed-header #logo img {
width: 150px;
height: auto;
max-width: inherit !important;
}

—

Also, in regards to point 9 (‘WooCommerce seems to overwrite page styles’), then I found a solution in simply making a 301 (permanent) redirect of the shop page to a new page which WooCommerce doesn’t overwrite (in my case: /home-shop/). Here are the instructions if that’s something you want to do yourself: http://www.woothemes.com/2013/11/htaccess-url-redirects/

—

Hope that’s helpful.

Best,

Jonas

An updated list of wishes/things that I am working on:

2. Add breakpoints to masonry tiles (+ more)
3. Add custom margin option for masonry tiles
4. Add option to choose fitting style for masonry tiles
5. Add thumbnails option to masonry tiles
7. Add overlay on Visual Composer elements
8. Titles on masonry tiles
10. Added to cart message
11. Make it possible to hide logo completely / make minimisation of header happen earlier
13. Previous/Next project/blog post

[satori]

Hey Jonas,

thank you for the extensive suggestions and comments!

I will take them in in bits :) here are preliminary comments to the respective items:

1. Pop-up images are being ‘cut off’ by the header – I’ve added the z-index declarations to the theme core, thank you for bringing this up!

2. Add breakpoints to masonry tiles (+ more) – added breakpoints for smaller screens (767px and less), will include them into version 1.3 of the theme (you can see how it works here).

3. Add custom margin option for masonry tiles – will consider adding this option to the next version, thanks!

4. Add option to choose fitting style for masonry tiles – the theme envisages the portfolio items as either squares (1×1) or rectangles with the sides as multiples of the smallest square (i.e. 2×3, 1×2, etc), so far I haven’t got an idea how to reconcile this with your proposed feature.

5. Add thumbnails option to masonry tiles – this might also be an interesting feature for the upcoming versions.

7. Add overlay on Visual Composer elements – there is indeed an option to have portfolio-like overlays on VC elements, namely the Posts Grid items – you can see how it works on the front page of the theme demo, where the 6-item portfolio extract has been created using the Posts Grid VC element. Have you tried using Posts Grid?

8. Titles on masonry tiles – hm, in this case again it is a question of design – in Shogun’s masonry portfolio template the titles are displayed on top of the items, as overlays.

10. Added to cart message – could you please tell me where exactly does the message appear? I cannot seem to be able to locate it.

11. Make it possible to hide logo completely / make minimisation of header happen earlier – I’ve included the feature whereby the logo is being hidden on scroll automatically when the user chooses the centered header layout to the theme core, thank you for this one! On your website, I can currently see that the logo first becomes smaller (smoothly), and then disappears on scroll – have you made changes to the code, or does it look different on your machine? Regarding the timing of the disappearing of the logo and minimization of the header, you can try tinkering with the number parameter on this line in the header-functions.php file (should be around line 926, depending on your theme version):

var homax = homore + 20;

If you make the “20” smaller or 0, the menu will contract earlier.

13. Previous/Next project/blog post – if I understood you correctly, such a feature already exists in the theme – see e.g. this project. Did I misunderstand your question? Regarding the “back to portfolio” button – the problem is that the theme has no way of telling which page is considered as the portfolio in a particular website set-up; but I will think of how this could be circumvented, e.g. by letting the user pick one manually.

Sincerely,
Andrii / Satori Studio

[skafte]

Hi Andrii,

Thanks for your response and sorry about the long list I added – hope it’s okay.

1. Cool! I’m glad it was useful.

2. Looks great! Looking forward to version 1.3.

3. Ok. Hope you will, although I personally don’t need this feature atm. Might be useful for others though.

4. I understand, and if point 5 is something you might add to a future update, the need for different fitting styles becomes less relevant as you can easily crop thumbnails.

5. This would be great!

7. I’ve used the Post Grid method with success, however I was hoping that perhaps a future update of the theme would also have overlays on the single images, posts sliders, galleries and the widgetised sidebar (the thumbnails) of the Visual Composer plugin. Although I am aware that it might not be a very easy plugin to work with, from a developer’s perspective, and so I completely understand if this isn’t something you are planning to do – but it would be quite nice if so.

8. I completely understand, and there are more important features to potentially work on anyway.

10. E.g. if you add the Tokai Helmet (https://satoristudio.net/shogun/product/tokaido-helmet/) to your cart, then it pops up just above the image of the item.

11. Thanks for this! I’ve made changes to the code in order to hide the logo manually (thanks for your help with this earlier on). So does this mean that in the newest version of the theme the logo will hide on scroll if the site is using the centered layout, or is it something you’re considering for the next update?

13. Aha! That makes sense re the ‘back to portfolio’ button. No worries and thanks for the explanation. An option to manually add the parent page/portfolio/blog would be cool – but it would only be a ‘nice to have’ feature… Re the example you send of the previous/next feature, how do you activate this? Is it only applicable to projects and not blog posts?

—

One last thing. I am trying to make the site load a bit quicker – it’s a bit too slow at the moment for what’s acceptable for my client – and so if I want to make it not call all scripts (i.e. the retina.js script as it conflicts with WP Retina 2x, and the jquery.nicescroll.js script as I don’t use it at all), do I then simply delete these lines from functions.php file?:

94. wp_register_script(‘retina’, get_template_directory_uri() . ‘/scripts/retina/retina.js’, array(‘jquery’), false, true);

105. wp_enqueue_script(‘retina’);

[and the same for jquery.nicescroll.js]

NB. I am also installing W3 Total Cache in the hope that this will also help it load faster. Considering MaxCDN too…

—

Anyway, thanks for your help!

Best,

Jonas

[satori]

Hey Jonas,

please find my comments below:

10). Thanks! I’ve added an extra filter into the “functions.php” file, now the message appears in the correct order (no idea why WooCommerce would want to make it in that order by default). It will be included into version 1.3 of the theme as well.

11). Yes, in Shogun 1.3 the logo will disappear on scroll by default in case the centered header layout is chosen.

Regarding your question about disabling the scripts: yes, you can just comment out / remove the lines which register and enqueue the respective scripts in the “functions.php” file just like you’ve illustrated.

As an aside: I’d recommend installing a caching plugin only when the website is fully completed – if still in development, it might hinder you from applying changes to the code (you probably know that, but though I’d mention it just in case).

Best,
Andrii / Satori Studio

[Author]

Posts