keith2657

Grateful thanks Jaime,
I will dig into what you have supported me with here and see where it leads me.
Regards
Keith

Ah thanks anyway Guido it is very kind of you to respond so promptly.
Regards
Keith

That worked Guido and brought the events into horizontal grid view.
I just need to increase the left & right spacing between them and reduce the image size to thumbnail.
Then as you mentioned, add some media queries.

Thank You for your expertise and time Guido.
Keith

Guido, I only ever added the HR tag (you mentioned) in vsel-page-template.php, but have today reloaded loaded the latest plugin files via ftp to my site…. but I still do not see a grid.
I disabled all the 741 custom code to see if that made any difference..but no luck as the current 3 events are displaying in List mode on that page.

page 741

.page-id-741 .vsel-meta { clear: both; width: 100%; }
.page-id-741 .vsel-info { display: none; }
.page-id-741 .vsel-image-info { clear: both; width: 100%; float: left; }
.page-id-741 .vsel-image-info .vsel-image { float: left; margin: 0; max-width: 100%; }
.page-id-741 .vsel-image-info .vsel-image-left { float: left; margin: 0; max-width: 100%; }
.page-id-741 .vsel-content .vsel-image { padding-top: 18px; }
.page-id-741 .vsel-content .vsel-image { height: 220px; width: 149px; }

Hello Guido,
I removed the HR tag which i added to vsel-page-template.php

 // end image info section
   $output .= $page_image_info_section_end;
// end event container
$output .= '</div><hr style=" height: 20px; background-color: #c42727;">';

I am not sure how to go about achieving the grid layout with my code so far:

.page-id-741 .vsel-meta { clear: both; width: 100%; }
.page-id-741 .vsel-info { display: none; }
.page-id-741 .vsel-image-info { clear: both; width: 100%; float: left; }
.page-id-741 .vsel-image-info .vsel-image { float: left; margin: 0; max-width: 100%; }
.page-id-741 .vsel-image-info .vsel-image-left { float: left; margin: 0; max-width: 100%; }
.page-id-741 .vsel-content .vsel-image { padding-top: 18px; }
.page-id-741 .vsel-content .vsel-image { height: 220px; width: 149px; }

`
#lostinspace ??

Sadly Guido, I fear that my quest to achieve a row of event images (grid layout) on my home page only, may now be at an end as I still require the List format for 2 other pages.
I can see that tweaking php template would probably change the List Format to Grid.

Grateful thanks for all you have done for me in getting the listings on other pages the way I needed them.

Excellent Support!
Keith

Thank You so much Guido,
Your Master Class is working beautifully, much appreciated sir!
The feature image is now stacked underneath the Meta data and resized via css.

I just cannot figure out how to change the css or shortcode to display the events in a Grid format (side by side) instead of the List format (one under another).

Here is what the page looks like now

My code so far:

.page-id-741 .vsel-meta {
  clear: both;
  width: 100%;
}

.page-id-741 .vsel-info {
  display: none;
}

.page-id-741 .vsel-image-info {
  clear: both;
  width: 100%;
  float: left;
}

.page-id-741 .vsel-image-info .vsel-image {
  float: left;
  margin: 0;
  max-width: 100%;
}

.page-id-741 .vsel-image-info .vsel-image-left {
  float: left;
  margin: 0;
  max-width: 100%;
}

.page-id-741 .vsel-content .vsel-image {
  padding-top: 18px;
}

.vsel-content .vsel-image {
  height: 220px;
  width: 149px;
}

Sadly Guido my wordpress version is 5.7.2 and I am “currently” unable to select the widget.

I used the CSS stacking snippets you offered to stack the meta data as you advised, that worked ok.
The image column stacked underneath, medium size with a hefty whitespace to the left of the image (I imagine that was where the info data was).

Is there a CSS way to left align the image / lose the whitespace?
the-Vsel-View-at-moment

Thank You
Keith

Ah your a good man Guido,
I apologise as my mind has been on seatplan social distancing with Ticket Source (in between our coversations).
Thank You for yet another very useful and constructive code snippet, which I will adopt later today once my brain is unfried from Seatplans
Yes I will defo use the Widget as advised.
Much Appreciated my friend.
Respectfully
Keith

Thank You so much Guido ??
That has given me the featured image (minus info) and I see more clearly now, how to proceed in achieving the 1 row of thumbnail images I need.
I fully understand the DateFormat issues involved and think you are right in weighing up the pro’s / con’s of using it. I now think that your great plugin can thankfully give me what I need (without hooking into wp dbase).

So with all that in mind and finally Guido, is there a CSS way to present my event details in this “stacked” manner:

• Thumbnail
• Title
• Date
• Time
• Cost

Much Appreciated.
Keith

Yes Guido exactly that,
I wish to display a one row grid or slider, of my current vsel events in date order, showing only 6 featured image thumbnails (no content info), with their Title/Date/Time/Cost – underneath the thumbnail.

I would be keen to understand how to go about this with VSEL and/or a mix of php/mysqli and probably the WP post/meta tables.
Thank You for yet another speedy response.
Keith

Wow that was spot on Guido,
And may I say it was such a speedy & professional response!
I have adopted your code snippet and it worked a treat..woo hoo ??
From my point of view my “vsel-image-info” request is Resolved.

On a seperate request but still in relation to “vsel-image-info”, and this may warrant another topic,
I would dearly like to draw together the meta Date/Title/Time and just the image(minus the info), so I can populate a scroller or slider of say 6 thumbnail posters via mysqli/php, but that means targetting the WP tables and that is where I am currently struggling ie which tables to Select from and join etc.

Grateful Thanks for your expertise on previous resolved query and I understand if my latest one is beyond the scope of vsel topic.
I will head over and buy you a coffee on your site.
Best Wishes
Keith

Thank You emranemranx, a schoolboy error as I had stupidly not set the Customizr feature image settings correctly (This Test Page Only)

Thankfully the image is now above both content and sidebar as I required…. but it stretches the full width of the page (even when boxed) and does not line up with the leftmost side of the title COST and rightmost side of the sidebar, it is also cropped and not displaying the full image.

I have tried identifying the css selector using firefox tool “inspect element” so I could add margin values to reduce the feature image displayed width, but am having trouble nailing the correct selector for the image width.