|
mkreik
|
August 9, 2019 at 12:03 pm
I would like to change how the grid layout displays. Right now users have to hover over the image to see the title of the class and register link. I would like to change that so the title is above the image and the register link or button is below the image so our customers can quickly scan the event offerings. I don’t see the php for the grid template in the theme editor. Can I change the grid template php to display the events as I detailed? If so how do I change the php file? If I change the php file and either my theme or updates, will the php file be affected?
|
|
Josh
|
August 9, 2019 at 12:17 pm
Hi,
The simpler way to change this would be use CSS, and they if need be, you can make a copy of the PHP template can put the copy into your active WP theme. In other words, you copy the
espresso-grid-template.template.php file to your active WordPress theme, and make the PHP and html changes there.
Again though, that simple approach to avoid the hover would be to go to your site’s Appearance > Customize > Additional CSS page, and add the following:
.ee_grid_box_v2 .ee_overlay {
top: 0;
}
|
|
mkreik
|
August 10, 2019 at 10:53 pm
Thanks! I used that and now can see the text over the image without having to hover over it. On the grid template page on the Event Espresso site (https://eventespresso.com/product/eea-events-grid-view-template/), the sample overlay shows the title, then dates and then register now. On my site it shows register now and then the title although I cannot see most of the title because of the image size. I prefer to have the title first and then learn more or show details as a button. Do I need to make changes to the php file to do that? Is there an order I can change in the settings that I may be overlooking?
|
|
Tony
|
August 12, 2019 at 5:04 am
Hi there,
There’s no setting to change the output but you can do it by changing copying the template used to your theme (preferably a child theme) and editing the file there, EE will use that in place of the default one.
If you are not using a child theme, follow this to create one:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
Then, copy the template in use from /eea-events-grid-view-template/templates/
Place that template file in the child theme and then edit that copy.
To change it so the Register button is shown last, move line 47 to be after this line:
<p class="start-date"><?php echo $startdate; ?></p>
So it looks like this – https://monosnap.com/file/jie4JNaoylgLeXf1G8TVZYnFRv2Tdp
|
|
mkreik
|
August 20, 2019 at 8:43 am
Thanks.
|
|
mkreik
|
August 20, 2019 at 5:02 pm
I used Lilaea Media’s child theme configurator, which I have use before, and it doesn’t show any of EE’s php files to copy over to the child theme. I can see the php files for WooCommerce and other plugins, but not yours. Is there another way I can find and copy the grid template php from the parent to the child theme?
|
|
Tony
|
August 21, 2019 at 3:36 am
Do you have a copy of the template in the parent theme? It won’t be there by default, only if you copied it over.
What you need to do is grab a copy of the template from the plugin itself, the theme doesn’t have the template.
So, copy the template in use from /eea-events-grid-view-template/templates/
(Download the add-on from yout account page, open the zip and browser from there if needed)
Place the copy of the template in the root directory of your child theme and edit the template there, the tool above won’t find that template from the plugin for you.
|
|
mkreik
|
September 4, 2019 at 10:56 am
I appreciate your help with this. I would like to change the grid template to show the title above the image and the date/time and register below the image. Do you have PHP you can share to do that? If so, then I would also like to remove the overlay on the image.
Also rather than having four images across, can it be changed to show three larger images?
|
|
Josh
|
September 4, 2019 at 11:00 am
The PHP is all there in the template, you would move the elements within the template into the order you want them to be displayed.
Also rather than having four images across, can it be changed to show three larger images?
It is usually 3, but your site’s theme may be doing its own thing. If you can share a link to the page in question, we can take a look and see what it will take to make the grid go to 3 wide instead of 4.
|
|
mkreik
|
September 4, 2019 at 11:31 am
This reply has been marked as private.
|
|
Tony
|
September 5, 2019 at 3:21 am
Grid sizing aside for a minute, is this what you are looking to do with the grid elements?
https://monosnap.com/file/myO8GGaZxBkajZoxwcWktQbVAaFtzr
|
|
mkreik
|
September 5, 2019 at 8:19 am
Yes! I would like every event to show up like the first when you open the page. I notice that the year wraps to the second line and that is likely because of the size of the column. In a perfect world the day would be on one line and the start time on the next. I may also want to include the excerpt but only if the number of columns is reduced and the size is larger.
|
|
Tony
|
September 9, 2019 at 3:33 am
To do what I did in the screenshot you’d change the template to be something like this:
https://gist.github.com/Pebblo/63c46c5f1327bec96a2d026df4438433
Then add this CSS to your site:
.ee_grid_box_v2 .event-title,
.ee_grid_box_v2 .start-date,
.ee_grid_box_v2 .event-link a {
color: #000;
}
I notice that the year wraps to the second line and that is likely because of the size of the column. In a perfect world the day would be on one line and the start time on the next.
You have full control of the template so you can set it to display however you prefer, for example for the above change line 8 to be <br/>
Changing the size needs some additional CSS:
.ee_grid_box_v2 img {
width: 300px;
height: auto;
}
.ee_grid_box_v2 {
/* Set the max width to the width of the img above */
max-width: 300px;
}
You can add the CSS to your site in Appearance -> Customize -> Additional CSS.
|
|
mkreik
|
September 9, 2019 at 1:36 pm
Perfect! Thank you! I also found another forum post about adding the excerpt and fixing the height for the grid items so they’re uniform. The page looks great now.
|
|
mkreik
|
September 11, 2019 at 8:31 am
I realized that I cannot see the start date and time. Using the code below does not return a result for the start date and start time:
<p class=”start-date”>
<span class=”event-start-date”><?php echo $start_date; ?></span>
<span class=”event-start-time”><?php echo $start_time; ?></span>
</p>
I tried:
<p class=”start-date”>
<span class=”event-start-date”><?php echo $startdate; ?></span>
</br>
<span class=”event-start-time”><?php echo $starttime; ?></span>
</p>
But that shows the start date and time on one line because it recognizes $startdate but it doesn’t recognize $starttime. Is there code other than $start_date that is just the date? And then code other then $start_time that is just the time that will allow the start date and time to display on the site?
I’ve tried $event_start_date, $post_start_date, $post->post_start_date.
|
|
Tony
|
September 11, 2019 at 9:13 am
Can you post the entire template code you are using, please?
However, do not post it directly on the forum, use Pastebin and post the link for us to view here.
By default, this should work:
<span class="event-start-date"><?php echo $start_date; ?></span>
<br/>
<span class="event-start-time"><?php echo $start_time; ?></span>
None of the other variables you are using are set in the default template I’m using so I’ll need to see your full template.
|
|
mkreik
|
September 11, 2019 at 9:23 am
Here it is: https://pastebin.com/X9kYDN0R
|
|
Tony
|
September 11, 2019 at 9:40 am
My apologies, my local version is a little different from the live version so the above is my fault for not double-checking that first!
Change line 40 from this:
$startdate = date_i18n( $date_format . ' ' . $time_format, strtotime( $datetime->start_date_and_time('Y-m-d', 'H:i:s') ) );
To this:
$start_date = date_i18n( $date_format, strtotime( $datetime->start_date('Y-m-d') ) );
$start_time = date_i18n( $time_format, strtotime( $datetime->start_time('H:i:s') ) );
Now the code I gave you earlier should work.
|
|
mkreik
|
September 11, 2019 at 9:49 am
Thank you! That fixed it!
|
