Hints for a beginner page I want to do

[Michkael]

Hey guys,

I am extremely new with HTML/php/CSS/mySQL and to better learn I want to do a small, pretty easy project.
The difficulty for me now is to understand where to find the right tools/modules/API/.... so you don't have to give me the entire solution, although some hints will make the difference.

Here the details about the page
 A scrolldown page where are shown all the post (chronologically) inserted by the users registered (and approved) to the website. It will be like a photo album for my vacations that can be uploaded live and followed by my family.

My questions are:

1) How can I make a field input accessible only from verified users as follows? The new item will be seen as a childpage, or how does it work? Is this brute coding or can I find a module/app for this? -- This field input should offer the possibility to add a picture (or pictures), a title and a description.

2) How can I make the pictures low quality to speed up the navigation but when clicked, the entire article opens up (like in a popup window) with the high quality pictures?

Thank you very much for all your help.
And if you have any useful tip to give me, I will be greatful. (I have whatched the 2 videos of Philipp Reiner: ProcessWire Basic Guide - First Steps)

Michael

[pwired]

Hi Michkael and welcome to processwire,

There is already a truckload with answers for beginner questions:

https://processwire.com/docs/tutorials/
https://processwire.com/docs/tutorials/hello-worlds/
https://processwire.com/docs/tutorials/but-what-if-i-dont-know-how-to-code/
https://processwire.com/docs/tutorials/simple-website-tutorials/the-basic-website/

http://processwire.com/talk/topic/2296-confused-by-pages/
http://processwire.com/talk/topic/5667-help-a-noob-get-started/page-2#entry55820
https://processwire.com/talk/topic/4173-grouped-forum-posts-links-articles-tutorials-code-snippets/

Outside the forum

https://www.benbyford.com/articles/processwire-tutorials/
https://webdesign.tutsplus.com/tutorials/search/processwire
https://www.smashingmagazine.com/2016/07/the-aesthetic-of-non-opinionated-content-management-a-beginners-guide-to-processwire/

Youtube
https://www.youtube.com/watch?v=IHqnLQy9R1A

http://processwire.tv/

 

[szabesz]

Hello @Michael and welcome to ProcessWire,

1 hour ago, Michkael said:

I am extremely new with HTML/php/CSS/mySQL and to better learn I want to do a small, pretty easy project.

What you are aiming for is not a pretty easy project but if you really want to learn and have the time to spend on it then you can start learning by doing it especially if it's a family project which means all your users should be patient, cooperative and help you by testing ? 

1 hour ago, Michkael said:

1) How can I make a field input accessible only from verified users as follows?

Read up on permissions and roles. Beside the docs I also recommend a google search in the Blog posts, something like this: https://www.google.hu/search?q=access+permissions+roles+site%3Aprocesswire.com%2Fblog

You probably want to stick to backend – that is the PW's administration area – for user management features and do not want to implement front-end user management features because that is not something for complete beginners, at least there is a lot more to learn before I can recommend for you to do that.

1 hour ago, Michkael said:

2) How can I make the pictures low quality to speed up the navigation but when clicked, the entire article opens up (like in a popup window) with the high quality pictures?

This is sort of provided by the admin but I guess you are talking about the frontend. To make things easier, you might want to install ProcessWire by also installing this site profile: https://processwire.com/talk/topic/13572-bootstrap-4-minimal-site-profile/ by @flydev

This way you can rely on Bootstrap 4 which can help a lot if you are new to CSS and SASS.

For showcasing images on the front-end, here are some libraries to pick from:

• http://photoswipe.com/
• http://chocolat.insipi.de/#demo
• http://dimsemenov.com/plugins/magnific-popup/

Hope this helps! Happy developing ?

Edited May 23, 2018 by szabesz
typos