Changing presentation of data in views

[fifteen15studios]

Hi! We have the Pro and Filters plugins, so we get to give the user the option of seeing their data presented in multiple ways. We would like to modify the layout of some of these, particularly the “List” and “Photo” view. I know I can go in and modify the PHP (somewhere) and also add some CSS. However, I’d prefer if I could create a list element in PHP by building an HTML frame and adding the PHP variables for title, price, description, image, location, etc. wherever I wanted. Is there a way to do this? What’s the easiest way to edit the layout?

Thanks!
Brendan

[Geoff]

Hey Brendan–nice to see you again and hope all is well!

The best way to modify layouts is to do a template override–basically copying the appropriate template from the plugin, dropping into a new folder in your theme called tribe-events, then modifying the layout from there. This is detailed way more thoroughly in our themer’s guide.

From there, you can customize the views however you would like–add elements, remove elements, create conditions that display different data for different users. Totally up to you. 🙂

Will that help you get started? Please let me know.

Cheers!
Geoff

[fifteen15studios]

Thanks, but I was asking about the modification of the code. Sure, I’ll copy it so I can do an override, but what code do I copy? It seems to be in bits and pieces everywhere which might make creating a new format a bit more complex. What I’m looking to do is just create an HTML and CSS box which displays the elements in the manner I choose (ie. date over here, in this font, followed by the price over here in this font, followed by an icon here if there’s a map, followed by the image presented in this div, etc.)

Can I do that?

[Geoff]

Hi Brendan,

Sure, that’s totally possible with template overrides. Here are the templates you will want:

• List View: the-events-calendar/src/views/list/single-event.php
• Photo View: events-pro/src/views/pro/photo/single-event/php

Add the HTML where you would like the box to display, then use CSS (either in your theme styles or using a plugin like Simple Custom CSS) to style it.

Does that help a little better?

Cheers!
Geoff

[fifteen15studios]

It does! However, it’s still not full control over the content. For example, I see this code:
<?php echo tribe_event_featured_image( null, 'medium' ) ?>

That’s great, but I want to not process that image in any way other than what I want to do with it. Is there a way just to get the URL?

Thanks,
Brendan

[Geoff]

Absolutely! That image function is a wrapper for the default WordPress wp_get_the_post_thumbmnail() function so you can remove it altogether and use something like <i>wp_get_attachment_image_src()</i> instead, then use that to build out the markup for your image.

Geoff

[fifteen15studios]

Thanks, but that didn’t work. It gave me an error. I added it to my single-event.php page, and got this:

Warning: Missing argument 1 for wp_get_attachment_image_src(), called in /homepages/2/d499430932/htdocs/clickandbuilds/CabinFever/wp-content/themes/responsive/tribe-events/list/single-event.php on line 90 and defined in /homepages/2/d499430932/htdocs/clickandbuilds/CabinFever/wp-includes/media.php on line 695

Any ideas why? Am I doing something wrong?

My implementation looks like this: <?php wp_get_attachment_image_src() ?> and this `
<?php echo wp_get_attachment_image_src(); ?>`

Also, is there a list of ALL these functions which I can use to grab raw data? 🙂 Like price, title, map, etc?

• This reply was modified 10 years, 3 months ago by fifteen15studios. Reason: Add info

[Geoff]

Hey Brendan!

I think the default usage example of wp_get_attachment_image_src() in the WordPress Codex is a good illustration of how to call the function in the template:

https://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src#Default_Usage

And, yes, we do have full coverage of the calendar’s available functions in our documentation. The functions are categorized by plugin, but you can use the search feature to find functions across all of the plugins, if needed.

Happy new year’s eve!

Geoff

 

[fifteen15studios]

Thanks! And Happy New Year! Thanks for working on the off-time! (And I’m pretty sure that’s your face featured on the elf?)

This is helpful, but it opens the door for a lot of other questions. I still can’t seem to get it to work, mainly becuase I don’t know what the $attachment_id = 8 means. Where does that id come from? Is it unique to each event? If so, I’ll probably need a different number for each post, and I don’t know how to get that.

It seems like TheEventsCalendar, as well as other software, makes a bunch of functions to easily populate our page with information while giving us control through the backend. This is to make things easy, but if we’re modifying the code, it seems to make it near impossible. all I want is raw data, really. Just the price, in string form, with no formatting. Just the image source. Just the title. Just the summary. Just the address. Then I can piece it all together using my own code. 🙂 I wonder, is there a way to get all these in a neat array or a series of variables for each post listing in the Lists view?

Thanks,
Brendan

[Geoff]

Hey there!

Oh yeah, you can ignore the attachment ID in the example. Instead you would be looking at something like this:

<?php
$image_attributes = wp_get_attachment_image_src(); // returns an array
if( $image_attributes ) {
?>

<img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>">
<?php } ?>

It seems like TheEventsCalendar, as well as other software, makes a bunch of functions to easily populate our page with information while giving us control through the backend. This is to make things easy, but if we’re modifying the code, it seems to make it near impossible. all I want is raw data, really.

I totally hear you. While we try to create as many of our own functions for returning the data you need to customize the template, we do prefer to rely on default WordPress functions wherever possible–that allows us to leverage what comes with WordPress right out of the box instead of creating additional functions to document and maintain.

Where we have created custom data, such as a cost field, we have functions to go along with them in our documentation. So, for example, the ones you mentioned above:

• Image source: wp_get_attachment_image_src() (default WordPress since the event image uses the WordPress featured image)
• Title: the_title() (default WordPress since the event title uses the WordPress title field)
• The excerpt: the_excerpt() (default WordPress since the event excerpt uses the WordPress excerpt field)
• Address: tribe_get_full_address()

As far as formatting goes, some functions do return markup in the data. When that happens, there’s always the possibility of using strip_tags when calling a function.

I wonder, is there a way to get all these in a neat array or a series of variables for each post listing in the Lists view?

You can totally create arrays as needed. In fact, you will often see that we do the same in the calendar’s templates.

I can tell you that, me personally, I typically refer to the calendar’s existing templates when digging into customizations. Every function is accounted for in some way and see how they are used in the templates often gives me a solid example as I start writing my own views.

Do you have enough ammo as far as the process for creating custom Photo and List Views? In other words, you know which templates to use, where to find them and how to add them to your theme directory to start mashing some code together?

Cheers!
Geoff

(Ha, yes, I did end up being the elf this year. Not sure what lottery I won there but it does make me laugh!)

[fifteen15studios]

Well, though I understand PHP well enough, it seems like WordPress wants to use its own language. I’m still having trouble. The code you suggested I use gives the same error. It wants a parameter and I don’t know what to put there. I can put “1” or “null”, but it doesn’t make the image appear.

[Geoff]

Hi Brendan,

This seemed to fetch the featured image URL when I tried it out:

<?php
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo $feat_image;
?>

Does it work for you as well? Of course, you would want to use it to build your image tag rather than echo the URL, but you get the idea. 🙂

Geoff

[fifteen15studios]

Ok, cool! That worked! That gets me most of the way there. The preset classes and styles on that image were messing me up. You’ve been a great help. Thanks!

By any chance, would you know how to get just the raw data for each part of the address, time, cost, etc? I know these display by default too, but I’d like to remove the formatting and put my own on it. 🙂

Thanks!
Brendan

[Geoff]

Awesome, glad that helps!

I think strip_tags will remove the formatting for you so you’re left with raw data for the address. Might have to play around with that a little bit, but it’s the same basic idea as the featured image, but including the call to strip tags.

I think you’re well on your way! Did you have any other questions specific to the process for how to create different layouts for different calendar views? I think we’ve veered off that a bit but wanted to make sure before closing this thread out.

Cheers!
Geoff

[fifteen15studios]

Nah, I think I’m all set. If I have another question, I’ll open another post. Thanks! That was helpful! I’ll play around with the functions and features a bit.

Thank you very much for all your help!

[Author]

Posts