Creating Gallery with WordPress and Pods

The gallery section is one of the most important features of the website because users will have ability to share images of their pets with other members. Therefore, this section is going to be crucial.

Creating right Pod

Before any pod has been created, planning of functions of gallery had to be done.
Features of gallery –

1. Title
2. Summary
3. Location of event
4. Event date
5. Main images 1120 x 600
6. Thumbnails 400 x 400

With this in mind, decision to create two separate pods with relationship between each other has been made.

However, while creating those two pods, finding out that this would work with only one pod has been made.

This is what the pod looks like –

After further research about creating gallery in WordPress, another way of creating thumbnails was discovered.
This is done by WordPress automatically creating thumbnails from chosen image and re-sizing it according to settings.

This is done by activating ‘Featured Image’ in ‘functions.php’ file –

Then go to Pods Admin > Gallery > Advanced Options > Support – tick ‘Featured Image’ option. Then save the pod and go to Gallery > Add New. In there, Featured Image should be now activated in widgets panel on right side –

However, it is not showing there. Another option to activate it, is to click on ‘Screen Options’ on the same page and activate it there –

However, it is not showing there either.

After further research about Featured Image option, conclusion not to use this feature has been made as it has let downs such as –

1. possibility to stretch chosen image to wrong size therefore not looking appropriate for the website

Decision to let the client upload thumbnails has been made to avoid this problem.

Creating Gallery posts

Next step was to create all gallery posts in order to create gallery –

Once that was done, back end side of the gallery is all done. Now it is time to focus on code in order to display all information from the gallery.

Code

Two files are needed in order to create gallery –

1. archive-gallery.php – front page with all thumbnails
2. content-gallery.php – page displaying actual images and all information after clicking on thumbnail on previous page

archive-gallery.php

This is the code that needs to be in archive-gallery.php –

Loop is created in order to display all thumbnails. To link content-gallery.php file so after clicking on thumbnail, it takes users to full gallery page, ‘get_template_part()‘ function needs to be used. However, after adding this code in, it is not working right as instead of thumbnails, it is displaying actual content of gallery. This is not right and further research is needed.

Solution

After research about ‘get_template_part()‘ function, it was realised that this function is not possible to use in this case as there would have to be a file called ‘single.php’ in order to make this work. This is not possible because ‘single.php’ file is already created and used for the blog page.

This means that ‘get_permalink()’ function needs to be used in this case.

Add $post_id = $type_of_pod->field(‘id’); with rest of the variables and echo it out by adding <a href=”‘<?php echo get_permalink($post_id) ; ?>” </a>. This is all done and linked now to specific gallery page i.e. Boxfit.

While research about  ‘get_template_part()‘ function, finding out that content-gallery.php file needs to be renamed to single-gallery.php.

Working with single-gallery.php file

The php code in ‘single-gallery.php’ file is more or less the same than in ‘archive-gallery.php‘ file.
However, after clicking on certain thumbnail, it is displaying gallery content from all posts rather than specific chosen one –

The URL is right as it is showing that i.e. Boxfit has been chosen, but all content is displayed.

This needs to be fixed by adding ‘$pod = pods( ‘Gallery’, get_the_id() ); ‘ in order to tell the code to display specific gallery content by ID.

However, old pap code is being used to display Pods content, therefore this needs to be replaced with new code to make it work. This is an example the is going to be used and old code is going to be implemented into it –

(Source: https://gist.github.com/Shelob9/7832561#file-2-related-fields-example-php)

Old code is using camel case which looks like ‘getTotalRows’ and new code is not using that. It is recommended to use new code to avoid future break down of the site just in case Pods decide to get rid off camel case.

After adding new code, it is displaying nothing on the website –

Solution

Solution to displaying specific content of the gallery is to delete –

and end closing curly brackets as loop is not needed because only one content is needed to be displayed.

Next step is to display actual images.