Display only the “vsel-image-info” column

Resolved keith2657
(@keith2657)

2 years, 10 months ago
Hi Guido,
A great plugin and massive help too many like myself. I have a Wordpess website page consisting of 3 columns.

in my left col I list my VSEL events meta, and have the vsel-image-info hidden by Custom CSS, as I wish only to display Tile/Date/Time.

In my right column I wish only to display the “vsel-image-info” BUT it is not displaying the full width of the WP col, there is whitespace gap to the left, even though I have set “vsel-meta” to display:none;
```
.page-id-305 .wdfs_right_col .vsel-meta {
  display:none;
}
```
I have test targeted many vsel css elements.
Can you point me in the right direction to fill that right WP column, with only the vsel-image-info ?
Many Thanks
Keith

The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 20 total)

1 2 →

Plugin Author Guido
(@guido07111975)

2 years, 10 months ago
Hi Keith,

The width of the image-info section is auto-generated when setting a width for the meta section via the settingspage. It’s being added as inline CSS. With a gap of 4%.

You can change (override) the with of the image-info section in the right column similar to the CSS you’ve added for the left column:
```
.page-id-305 .wdfs_right_col .vsel-image-info {
	width:100% !important;
}
```
I notice you’re using the block editor. From upcoming version of WP (5.8) you can consider using the widget for both columns, as the meta section and the image-info section of the widget is full width by default. And hide the relevant section of both widgets with custom CSS.

Guido
Thread Starter keith2657
(@keith2657)

2 years, 10 months ago

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

Plugin Author Guido
(@guido07111975)

2 years, 10 months ago

Hi Keith,

You’re very welcome and thank you very much.

About your second request, I don’t fully understand what you’re trying to do here. You want to display certain posters (event featured images), but ordered by event date? Posters from upcoming events, something like that?

Guido

Thread Starter keith2657
(@keith2657)

2 years, 10 months ago

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
Plugin Author Guido
(@guido07111975)

2 years, 10 months ago
Hi,

Guess you can use the VSEL shortcode for that as well, because the textual part of the image-info section can be hidden as well:
```
.page-id-305 .wdfs_right_col .vsel-info {
	display:none;
}
```
FYI: getting an event date value from database is possible, but changing that value to a human-readable format or using this for ordering is not that easy. And you should not forget to add timezone, because all date values are stored in database as UTC+0.

Guido
Thread Starter keith2657
(@keith2657)

2 years, 10 months ago
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
Plugin Author Guido
(@guido07111975)

2 years, 10 months ago
Hi Keith,

First thumbnail is not possible, the meta section comes first.

With this CSS you get a stacked layout:
```
.page-id-1894 .vsel-meta {clear:both; width:100%;}

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

.page-id-1894 .vsel-image-info .vsel-image {float:left; margin:0;}

.page-id-1894 .vsel-info {display:none;}
```
(change page-id / prefix to your needs)

But with WP 5.8 you can use the widget as well, because meta and image-info section are full width by default (as mentioned before). So you need less custom CSS.

Guido
Thread Starter keith2657
(@keith2657)

2 years, 10 months ago

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

Thread Starter keith2657
(@keith2657)

2 years, 10 months ago

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
Plugin Author Guido
(@guido07111975)

2 years, 10 months ago
Hi,

WP 5.8 will be available in a couple of weeks.

I forgot something in the CSS..

Change this:
```
.page-id-1894 .vsel-image-info .vsel-image {float:left; margin:0;}
```
Into:
```
.page-id-1894 .vsel-image-info .vsel-image {float:left; margin:0; max-width:100%;}
.page-id-1894 .vsel-image-info .vsel-image-left {float:left; margin:0; max-width:100%;}
```
Guido
Thread Starter keith2657
(@keith2657)

2 years, 10 months ago
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;
}
```
Plugin Author Guido
(@guido07111975)

2 years, 10 months ago

Hi,

That will require more tweaking.. For that you should add width and alignment to the .vsel-content div (that’s the wrapper around each event in the list).

But when I take a look at that page (741), I notice you’ve added a hr tag underneath each event? That must be removed because it’s outside the wrapper.

Guido

Thread Starter keith2657
(@keith2657)

2 years, 10 months ago

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

Plugin Author Guido
(@guido07111975)

2 years, 10 months ago

Hi,

You can add your own class to each VSEL shortcode, so you will be able to target that class with your custom CSS for the grid layout.

Where does the hr tag between the events come from?

Guido
Thread Starter keith2657
(@keith2657)

2 years, 10 months ago
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 🙁

Viewing 15 replies - 1 through 15 (of 20 total)

1 2 →

The topic ‘Display only the “vsel-image-info” column’ is closed to new replies.