webhoes Posted May 30, 2017 Share Posted May 30, 2017 Hello, I want to showcase my website made in processwire. https://chrysemys.nl/ Goal of the website There are quit some websites with information about turtles. Most of them are very limited in information. This website main goal is to be very complete in information. Information about turtles, there natural behaviour, detailed descriptions. Next is also associations ( (bi-)directional links) with caresheets, books, food, illnesses, etc... Second goal is to learn PHP as I started an education for application engineering 4 months ago. Setup It is build on the latest version (3.0.61) and makes use of the latest template strategy. I use the pw-append, pw-replace classes in combination with _main.php and several template files. Most of the rendering is done from custom functions in _functions.php. In the back-end the pages are styled with the options for visibility and group in logical blocks. This is a very nice feature with processwire and makes the pages easier to fill. Next to the core modules I have used the following extra modules: AIOM+ - obviously Connect Page Fields - This module is very important. The whole site is considered a relational database. The base is the enity turtle. This entity has bidirectional associations with books, caresheets, locations (voor google maps), regions (to group locations), the different classifications of the animal taxonomy, food, etc. To make these kind of associations it greatly simplified the output on the other templates. This module was a mandatory feature for being able to create a site as I wanted to. Otherwise it would it would be very inefficient to keep everything up to date. Now I can add a new book and connect it to one ore more turtles. After the save you can see the book also on the turtle page. This goes for all the bidrectional links. This page is about a species - https://chrysemys.nl/schildpadden/emys-orbicularis/ This species has several sub species (basicly the same turtle but live in another country/region and has some different charasteristics). I have decided to make no distinction between species and sub species (on a template level) and use this module to connect them to each other. One reason was that this way the url would not be too long. This turtle lives in several different habitats. These are also bidirectional associations. The same goed for food, books, food to mention some. The biological taxonomy is also build this way as entities that have no parent/child relation. They are connected to each other with page reference (in this case). Both methods (page reference or parent/child) have their pro's and cons, in the end this setup seemed to work best for me. Map Marker - This is used for the map marker field for the locations (verspreiding). Everyt turtle can live in one ore more locations and the will show up on the google map. Also I have the possibility to add location specific information about the climat on the pages (missing on almost all other websites). Map Markup (Google Maps) - For the output of the google map. The js script for this is only outputted on the pages where it is used (template strategy). Markup Sitemap XML - obviously Social Share Buttons - Added this as it is recommended for a better SEO score. Get Video Thumbnails - The blog story can have a youtube link. This module automatically grabs an image and places it as the image for the blog. No more extra steps needed. Video embed for YouTube/Vimeo - I slight changed the output for this module so it always is placed under the body. Datamaps.js - Also I had some very important help from @adrian with help of using datamaps.js. This page is a datamaps script that read all turtles that live in the US and shows them in the correct state. https://chrysemys.nl/kaart-verenigde-staten/ A php function renders the output for the script and fills the variables. These are added to te script on rendering the page. The website is not finished and probably never will be as new information and functionality will be added all the time. But it is finished enough to serve as a showcase. Roadmap There are several things I want to add in the future: A find selector for overview pages (select by size, region, family, etc). Worked on this but, could not get it working. Datamaps.js for all regions (also with a selector to select another region). Optimize the queries to make the site faster. Several front-end improvements (marging/padding/font-size, etc...) 12 Link to comment Share on other sites More sharing options...
rick Posted May 30, 2017 Share Posted May 30, 2017 The site is fantastic! It loads very fast for me too. Only suggestion I'll make is to quicken the menu animations slightly. It just seems a little sluggish compared to the speed of the rest of the site. Link to comment Share on other sites More sharing options...
webhoes Posted May 30, 2017 Author Share Posted May 30, 2017 That is good to hear @rick specially since you are on the other side of the world ;). I will adapt the speed of menu animation. Thanks. 1 Link to comment Share on other sites More sharing options...
webhoes Posted May 30, 2017 Author Share Posted May 30, 2017 The site now uses bootstrap 4 with a fixed with. I have seen a lot of increase in speed by resizing the images to there possible max within the bootstrap columns. The images will only be decreased of on a mobile device. All images use something like $item->images->first()->size()->url. Works like a charm. Also only loading needed assest when needed, specially heavy javascripts help a lot with the speed. I also try to keep the queries to a minimum. Every querie does add some additional time to the loading of the page. Tracybugger helped a lot with this. 1 Link to comment Share on other sites More sharing options...
AndZyk Posted May 30, 2017 Share Posted May 30, 2017 (edited) Very detailed write-up and nice site. Just wanted to mention that you should check the images on mobile. For me they are streched and not responsive. Edited May 30, 2017 by AndZyk Not just on mobile Link to comment Share on other sites More sharing options...
szabesz Posted May 30, 2017 Share Posted May 30, 2017 Thanks for sharing! I do like the design although the heavy usage of eye candies is a bit too much for my taste. A couple of artifacts I noticed in Mac Chrome: [...old and big image, I removed it to save space...] Link to comment Share on other sites More sharing options...
webhoes Posted May 31, 2017 Author Share Posted May 31, 2017 @AndZyk thanks for the remark. I noticed this only for the head banner and the footer background. Are there images where this occurs. What browser do you use? I do have the issue within the body. They won't take the size you give in the admin. This is because the class img is also used within the template for other images with a width of 100%. @szabeszthanks for the remark. I have noticed. It is on my todo list. I already took some eye candy out of the template. Mostly likely more will be taken out to get a better balance... 1 Link to comment Share on other sites More sharing options...
AndZyk Posted May 31, 2017 Share Posted May 31, 2017 Ok, so I have this issue only in Safari (10.1.11) so far. I guess it is related to this: .eco_hover_effect img { min-height: 100%; } In general, you should also give your images an width and height attribute. Also I wouldn't give all images an width of 100% (I don't think this rule is from Bootstrap). Link to comment Share on other sites More sharing options...
rick Posted May 31, 2017 Share Posted May 31, 2017 Also, your figure images in the photos section aren't aligned in Opera, Chrome, and Firefox... It might seem as though we're picking on your site, but in fact, quite the opposite. I really like this site and how you put it together so I hope you don't mind the help. 1 Link to comment Share on other sites More sharing options...
webhoes Posted June 2, 2017 Author Share Posted June 2, 2017 Ofcourse I understand. Any help is appreciated very much! Link to comment Share on other sites More sharing options...
webhoes Posted June 2, 2017 Author Share Posted June 2, 2017 On 2017-5-31 at 8:48 PM, rick said: Also, your figure images in the photos section aren't aligned in Opera, Chrome, and Firefox... This is by design. I was already in the template. It has something nice but could also look wierd. I have used as little as possible sofar. Link to comment Share on other sites More sharing options...
webhoes Posted June 2, 2017 Author Share Posted June 2, 2017 On 2017-5-31 at 8:09 PM, AndZyk said: In general, you should also give your images an width and height attribute. Also I wouldn't give all images an width of 100% (I don't think this rule is from Bootstrap). No it isn't. This was already in the template. Gradually I will make changes for the better. This one is on the list... 1 Link to comment Share on other sites More sharing options...
Juergen Posted June 4, 2017 Share Posted June 4, 2017 Great site! Maybe you have to correct (adapt) the breakpoint value for the navigation. The main menu has 2 lines in my case before switching to the mobile view. Best regards Jürgen Link to comment Share on other sites More sharing options...
webhoes Posted June 6, 2017 Author Share Posted June 6, 2017 @Juergen are you using a linux distro? The font type used is not a default on linux and gets substituted by a different font. That is what's causing this. I will either change the padding or take another font. @szabesz I changed the flip cards and they look better now. Execpt for the long names... 1 Link to comment Share on other sites More sharing options...
adrian Posted July 28, 2017 Share Posted July 28, 2017 @webhoes - the site looks fantastic, but just wanted to let you know that some pages are having css issues, eg: https://chrysemys.nl/habitats/ and https://chrysemys.nl/verspreidingen/kansas/ I expect there are many more also. Link to comment Share on other sites More sharing options...
webhoes Posted July 28, 2017 Author Share Posted July 28, 2017 Thanks @adrian! I expect that too... What did you found wrong with the css? Link to comment Share on other sites More sharing options...
adrian Posted July 28, 2017 Share Posted July 28, 2017 Just now, webhoes said: What did you found wrong with the css? Seems to be fine now - before I couldn't get the css files to load, so there was no page styling at all. I did reload a couple of times to check. Maybe it was an issue with AIOM, or some network glitch, but the css on other pages was ok. Maybe nothing to worry about, but I would suggest keeping an eye out. Link to comment Share on other sites More sharing options...
webhoes Posted July 28, 2017 Author Share Posted July 28, 2017 I am currently working on the caresheet page. Perhaps AIOM was refreshing/rebuilding at that moment. Link to comment Share on other sites More sharing options...
dragan Posted July 29, 2017 Share Posted July 29, 2017 I find it a bit annoying that on https://chrysemys.nl/habitats/ the link is only in the center of the image, while on other pages (e.g. https://chrysemys.nl/habitats/brak-water/) the click-area is the entire image (green overlay when hovered). I would increase the click-area to cover the whole image everywhere. 2 Link to comment Share on other sites More sharing options...
webhoes Posted July 30, 2017 Author Share Posted July 30, 2017 I know @dragan. I tried to fix that a couple of times but got it right. Link to comment Share on other sites More sharing options...
adrian Posted July 30, 2017 Share Posted July 30, 2017 CSS issues again right now: https://chrysemys.nl/verspreidingen/mississippi/ The CSS file is not found: https://chrysemys.nl/site/assets/aiom/css_chrysemys1f1a1b4c7f9475a33fbccc73a9188593.css If AIOM is causing these issues, then there must be something wrong somewhere Link to comment Share on other sites More sharing options...
webhoes Posted July 31, 2017 Author Share Posted July 31, 2017 I had the same issues with some pages just now. After a save of the page they are fine. Strange. What should I check for AIOM to see what could be the issue? Link to comment Share on other sites More sharing options...
juhis Posted July 31, 2017 Share Posted July 31, 2017 Have you cleared AIOM cache. Then path for css-file changes and template shows the old css-path (if template is cached). Link to comment Share on other sites More sharing options...
webhoes Posted July 31, 2017 Author Share Posted July 31, 2017 I did that also this morning. I will check later today if there are still some pages that are missing markup. It is not template bases as from the same template some pages work and a few not. I could not find a distinct pattern in this. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now