Using Featured Image in Pro or Basic creates a full page image on the Event

[Bridget]

Hello,

Using Featured Image in Pro or Basic works in List, Calendar, and Widget how I want it to. However, I have found that there is a theme confllict with both Pro and Basic use of Featured Image when I go to the Event instance itself, the image takes up the entire web page. I troubleshot this by activatng the base theme (TwentySixteen) and it displayeed correctly.

Do you have any way of helping me on this? And if not, and my recourse is again, to go the theme developer, can you give me any technical wording on what techology was used for that particular feature (“Featured Image”).

Thank you,
Bridget

[Bridget]

My current system info:
HOME URL

Home

SITE URL

Home

SITE LANGUAGE
English
CHARACTER SET
UTF-8
NAME
Bridget Doran
EMAIL
[email protected]
INSTALL KEYS
–
WORDPRESS VERSION
4.8
PHP VERSION
5.6.29
PHP
max_execution_time = 30
memory_limit = 256M
upload_max_filesize = 64M
post_max_size = 64M
display_errors =
log_errors = 1
SERVER
Apache
SAPI
cgi-fcgi
PLUGINS
LayerSlider WP version 5.2.0b1 by Kreatura Media(http://kreaturamedia.com/)
BackWPup version 3.4.1 by Inpsyde GmbH(http://inpsyde.com)
Broken Link Checker version 1.11.3 by Janis Elsts, Vladimir Prelovac
CMSMasters Content Composer version 1.2.3 by cmsmasters(http://cmsmasters.net/)
Contact Form 7 version 4.7 by Takayuki Miyoshi(http://ideasilo.wordpress.com/)
Custom Sidebars version 3.0.3 by WPMU DEV(http://premium.wpmudev.org/)
Event Tickets version 4.4.4 by Modern Tribe, Inc.(http://m.tri.be/28)
MailChimp for WordPress version 4.1.5 by ibericode(https://ibericode.com/)
Revolution Slider version 4.5.9 by ThemePunch(http://themepunch.com)
TablePress Extension: Automatic URL conversion version 1.3 by Tobias Bäthge(https://tobias.baethge.com/)
TablePress version 1.8 by Tobias Bäthge(https://tobias.baethge.com/)
The Events Calendar version 4.5.8 by Modern Tribe, Inc.(http://m.tri.be/1x)
Yoast SEO version 4.5 by Team Yoast(https://yoast.com/)
Wordpress File Upload version 3.11.0 by Nickolas Bossinas(http://www.iptanus.com)
NETWORK PLUGINS
–
MU PLUGINS
SSO version 0.1 by Garth Mortensen, Mike Hansen
THEME
EcoNature
MULTISITE
–
SETTINGS
tribeEnableViews =
Array
(
[0] => list
[1] => month
)
schema-version = 4.5.8
recurring_events_are_hidden = hidden
previous_ecp_versions =
Array
(
[0] => 0
[1] => 3.12
[2] => 3.12.1
[3] => 3.12.2
[4] => 3.12.3
[5] => 3.12.5
[6] => 3.12.6
[7] => 4.0.4
[8] => 4.0.5
[9] => 4.1.0.1
[10] => 4.1.3
[11] => 4.2.4
[12] => 4.2.5
[13] => 4.2.7
[14] => 4.3.0.1
[15] => 4.3.1.1
[16] => 4.4.0.1
[17] => 4.4.4
[18] => 4.5.7
)
latest_ecp_version = 4.5.8
last-update-message = 3.12
earliest_date = 2015-11-19 02:00:00
latest_date = 2018-03-13 17:00:00
donate-link = 1
postsPerPage = 10
liveFiltersUpdate =
showComments =
showEventsInMainLoop =
eventsSlug = events-calendar
singleEventSlug = event
multiDayCutoff = 00:00
defaultCurrencySymbol = $
reverseCurrencyPosition =
embedGoogleMaps =
embedGoogleMapsZoom = 10
debugEvents =
tribe_events_timezone_mode = event
tribe_events_timezones_show_zone =
stylesheetOption = tribe
tribeEventsTemplate =
viewOption = month
tribeDisableTribeBar = 1
monthEventAmount = 3
enable_month_view_cache =
dateWithYearFormat = F j, Y
dateWithoutYearFormat = F j
monthAndYearFormat = F Y
dateTimeSeparator = @
timeRangeSeparator = –
datepickerFormat = 0
tribeEventsBeforeHTML = <!–

Calendar

Find out about upcoming NEUAC and partner events. Be sure to check back often for updates. –>
tribeEventsAfterHTML = <style>
body.events-archive .headline.cmsms_color_scheme_default {<br /> display:none<br />}<br />h1.calendar-page {<br /> padding: 25px 0 0;<br />}<br />#tribe-events-bar .tribe-bar-filters {<br /> margin: 0 0 20px;<br /> padding: 0 0 10px;<br />}<br />#tribe-events-content {<br /> padding: 20px 0;<br />}<br /></style>
earliest_date_markers =
Array
(
[0] => 1113
)
latest_date_markers =
Array
(
[0] => 2548
)
ticket-enabled-post-types =
Array
(
[0] => tribe_events
)
ticket-authentication-requirements =
previous_event_tickets_versions =
Array
(
[0] => 0
[1] => 4.3
)
latest_event_tickets_version = 4.4.4
disable_metabox_custom_fields = show
pro-schema-version = 3.9
mobile_default_view = list
hideLocationSearch =
hideRelatedEvents =
week_view_hide_weekends =
weekDayFormat = D jS
eventsDefaultOrganizerID = 1924
eventsDefaultVenueID = 0
eventsDefaultAddress =
eventsDefaultCity =
eventsDefaultState =
eventsDefaultProvince =
eventsDefaultZip =
defaultCountry =
eventsDefaultPhone =
tribeEventsCountries =
logging_level = debug
logging_class = Tribe__Log__File_Logger
WP TIMEZONE
Unknown or not set
WP GMT OFFSET
Unknown or not set
SERVER TIMEZONE
UTC
WP DATE FORMAT
F j, Y
WP TIME FORMAT
g:i a
WEEK STARTS ON
1
COMMON LIBRARY DIR
/home2/neuacorg/public_html/wp-content/plugins/the-events-calendar/common/src/Tribe
COMMON LIBRARY VERSION
4.5.8

[Jennifer]

Hi Bridget,

Thanks for reaching out!

The first thing I would recommend here is going under Events > Settings > Display and try changing the Default stylesheet used for events templates and Events template settings. These settings help control how much the events pages’ styling draws from the theme.

If none of those settings work for you, go ahead and use the ones that work the best, and then if you can send me a link to an event where the featured image is too big, I can suggest some CSS code that you can add to your site to make it smaller (along with some instructions on how to add it). No need to contact the theme author!

Thanks,

Jennifer

[Bridget]

Hello Jennifer, I have tried all three Default stylesheets used for events
templates and they all three have the same result, a full page image on the
event page. (e.g.: https://neuac.org/event/todays-tweet/) Fyi: this is the
only event that I have set the image through the ‘featured image’ component.
Any others you see (if you were to browse), are images that I have set right
in the body of the page, which I ultimately do not want to do because it
does not give me the hover over image that I want to see in the calendar and
list views prior to going directly to the Event page.

Hope that makes sense, and I do hope you can help. Also, in a post script
below, I have placed the settings for you, in case you require that.

Thanks much,
Bridget

p.s.
HOME URL

Home

SITE URL

Home

SITE LANGUAGE
English
CHARACTER SET
UTF-8
NAME
Bridget Doran
EMAIL
[email protected]
INSTALL KEYS
events-calendar-pro = 6554################################bdc4
WORDPRESS VERSION
4.8
PHP VERSION
5.6.29
PHP
max_execution_time = 30
memory_limit = 256M
upload_max_filesize = 64M
post_max_size = 64M
display_errors =
log_errors = 1
SERVER
Apache
SAPI
cgi-fcgi
PLUGINS
LayerSlider WP version 5.2.0b1 by Kreatura Media(http://kreaturamedia.com/)
BackWPup version 3.4.1 by Inpsyde GmbH(http://inpsyde.com)
Broken Link Checker version 1.11.3 by Janis Elsts, Vladimir Prelovac
CMSMasters Content Composer version 1.2.3 by
cmsmasters(http://cmsmasters.net/)
Contact Form 7 version 4.7 by Takayuki
Miyoshi(http://ideasilo.wordpress.com/)
Custom Sidebars version 3.0.3 by WPMU DEV(http://premium.wpmudev.org/)
Event Tickets version 4.4.4 by Modern Tribe, Inc.(http://m.tri.be/28)
The Events Calendar PRO version 4.4.14 by Modern Tribe,
Inc.(http://m.tri.be/20)
MailChimp for WordPress version 4.1.5 by ibericode(https://ibericode.com/)
Revolution Slider version 4.5.9 by ThemePunch(http://themepunch.com)
TablePress Extension: Automatic URL conversion version 1.3 by Tobias
Bäthge(https://tobias.baethge.com/)
TablePress version 1.8 by Tobias Bäthge(https://tobias.baethge.com/)
The Events Calendar version 4.5.8.1 by Modern Tribe,
Inc.(http://m.tri.be/1x)
Yoast SEO version 4.5 by Team Yoast(https://yoast.com/)
Wordpress File Upload version 3.11.0 by Nickolas
Bossinas(http://www.iptanus.com)
NETWORK PLUGINS
–
MU PLUGINS
SSO version 0.1 by Garth Mortensen, Mike Hansen
THEME
EcoNature
MULTISITE
–
SETTINGS
tribeEnableViews =
Array
(
[0] => list
[1] => month
)
schema-version = 4.5.8.1
recurring_events_are_hidden = exposed
previous_ecp_versions =
Array
(
[0] => 0
[1] => 3.12
[2] => 3.12.1
[3] => 3.12.2
[4] => 3.12.3
[5] => 3.12.5
[6] => 3.12.6
[7] => 4.0.4
[8] => 4.0.5
[9] => 4.1.0.1
[10] => 4.1.3
[11] => 4.2.4
[12] => 4.2.5
[13] => 4.2.7
[14] => 4.3.0.1
[15] => 4.3.1.1
[16] => 4.4.0.1
[17] => 4.4.4
[18] => 4.5.7
[19] => 4.5.8
)
latest_ecp_version = 4.5.8.1
last-update-message = 3.12
earliest_date = 2015-11-19 02:00:00
latest_date = 2018-03-13 17:00:00
donate-link = 1
postsPerPage = 10
liveFiltersUpdate =
showComments =
showEventsInMainLoop =
eventsSlug = events-calendar
singleEventSlug = event
multiDayCutoff = 00:00
defaultCurrencySymbol = $
reverseCurrencyPosition =
embedGoogleMaps =
embedGoogleMapsZoom = 10
debugEvents =
tribe_events_timezone_mode = event
tribe_events_timezones_show_zone =
stylesheetOption = tribe
tribeEventsTemplate =
viewOption = month
tribeDisableTribeBar = 1
monthEventAmount = 3
enable_month_view_cache =
dateWithYearFormat = F j, Y
dateWithoutYearFormat = F j
monthAndYearFormat = F Y
dateTimeSeparator = @
timeRangeSeparator = –
datepickerFormat = 0
tribeEventsBeforeHTML = <!–

Calendar

Find out about upcoming NEUAC and partner events. Be sure to check back
often for updates. –>
tribeEventsAfterHTML =
body.events-archive .headline.cmsms_color_scheme_default {
display:none
}
h1.calendar-page {
padding: 25px 0 0;
}
#tribe-events-bar .tribe-bar-filters {
margin: 0 0 20px;
padding: 0 0 10px;
}
#tribe-events-content {
padding:
20px 0;
}
earliest_date_markers =
Array
(
[0] => 1113
)
latest_date_markers =
Array
(
[0] => 2548
)
ticket-enabled-post-types =
Array
(
[0] => tribe_events
)
ticket-authentication-requirements =
previous_event_tickets_versions =
Array
(
[0] => 0
[1] => 4.3
)
latest_event_tickets_version = 4.4.4
disable_metabox_custom_fields = show
pro-schema-version = 4.4.14
mobile_default_view = list
hideLocationSearch =
hideRelatedEvents =
week_view_hide_weekends =
weekDayFormat = D jS
eventsDefaultOrganizerID = 1924
eventsDefaultVenueID = 0
eventsDefaultAddress =
eventsDefaultCity =
eventsDefaultState =
eventsDefaultProvince =
eventsDefaultZip =
defaultCountry =
eventsDefaultPhone =
tribeEventsCountries =
logging_level = debug
logging_class = Tribe__Log__File_Logger
WP TIMEZONE
Unknown or not set
WP GMT OFFSET
Unknown or not set
SERVER TIMEZONE
UTC
WP DATE FORMAT
F j, Y
WP TIME FORMAT
g:i a
WEEK STARTS ON
1
COMMON LIBRARY DIR
/home2/neuacorg/public_html/wp-content/plugins/the-events-calendar/common/src/Tribe
COMMON LIBRARY VERSION

[Jennifer]

Hi Bridget,

Thanks for sharing that link, but unfortunately it gives me a 404 ‘page not found’ error. However, I did some testing with the Avada theme, and while the featured images were displaying at the right size on my end, can you try adding the following under Appearance > Customize > Additional CSS:

.single-tribe_events .tribe-events-event-image {
max-width: 700px !important;
}

You can adjust the number up or down to see what fits best, but it should prevent the image from being full size.

Let me know if that helps!

Thanks,

Jennifer

[Bridget]

You shoud be able to see it now, (with your CSS edit taht looks terrible, see below for all that I tried): https://neuac.org/event/todays-tweet/

It’s a great idea, but the image looks terrible. I’ve played around with the sizing, but it looks like it crops the image when it pulls from ‘featured image’, so the original image is trashed on the screen with that sort of code manipulation.

I also tried this — display:none; so that I could bypass the wole featured image call and utilize the single event page itself to add the image in the page (as opposed to pulling it from the featured image, yet keeping the featured image functionality on the hover-over in calendar view). But that was a fail, it went back to the full page spread again. I am out of my depth here, in the way CSS is structured within this environment.

I wonder how the featured image gets ‘called’, and whether we could find that container and see what it’s passing? Any other ideas?

[Bridget]

I am on a timeline for this project and really need a follow up. I hope I can get a response asap. thank you so much.

[Jennifer]

Hi Bridget,

I’m sorry about the delayed response – our forums have been a bit busier than usual this week!

I think I found where the issue is coming from (take a look at this screenshot). You can see that by unchecking the “width: 100%” rule for the image’s container, the image shrinks back down.

Try adding this CSS:

#tribe-events-content.tribe-events-single .cmsms_single_event_inner .cmsms_single_event_img.cmsms_single_event_full_width {
width: 50%;
margin: auto;
}

The “margin: auto;” centers the image, so if you want the image on the left, you can leave that part out. However, it does look like the image may be getting “cropped” as you mentioned using this method.

If you’d like to add the image to the content instead of using the featured image, you can use “display: none;” instead of setting the width and margin above to hide the featured image entirely.

Please let me know how that works for you!

Thanks,

Jennifer

[Bridget]

Hi Jennifer, I guess we are getting a little closer but still not useable. See how this image looks: https://neuac.org/event/tweet-this-picture/ and you will get what I mean. The picture is still cut up and actually totally resized from my original regardless of how we manipulate the container.

What I want, is the image to remain the size it was when I attached it to the featured image. THAT is what is causing the problem. THe code is resizing the photo somehow. I knwo this because I have triple checked (and more) the size that I attach. Can you tell me why it is doing this and how to change that?

I do not want to add the image to the content because then I do not get the picture nicely showing up on the Calendar view.

thank you for any help!

[Bridget]

sorry – I am seeing that the photo on the one I referenced was an odd siize that I uploaded. If you could hag on a moment whiel I get the right size p there. But meanwhile actually, my question would be, is your code re-sizing the photo when it places it on the Event?

[Bridget]

Okay – Please look at this page again, with the code you gave me: https://neuac.org/event/tweet-this-picture/

It looks really bad and nothing like the photo I uploaded. The size I uploaded was 440px (w) x 220px (h). What displays is a very poor version of it from a pixelated standpoint, and it is not a correct size.

please help. I think my last question is the right one. is your code re-sizing the photo when it places it on the Event? And can we change that.

thanks

p.s. please don’t forget about me. It’s really difficult because I need to try on my own when I don’t hear from you, and then we are out of synch again with the code being off. I really appreciate that you are working hard!

[Jennifer]

Hi Bridget,

Sorry about the delayed response here – I didn’t forget about you, but the thread wasn’t showing up as waiting on a response for some reason. Sorry about that!

The only thing I see that our styles are doing is setting the a max-width of 100% and a height of auto, but it looks like that is actually being overriden somewhere. If you would like the image to display at it’s actual size (see screenshot), you can add this:

#tribe-events-content.tribe-events-single .cmsms_single_event_inner .cmsms_single_event_img .tribe-events-event-image img {
width: initial;
height: initial;
}

If you would like it to display larger but still proportioned (see screenshot):

#tribe-events-content.tribe-events-single .cmsms_single_event_inner .cmsms_single_event_img .tribe-events-event-image img {
max-width: 100%;
height: auto;
}

Both ways worked in my browser, so either one should get the image displaying better for you. Let me know if that helps!

Jennifer

[Bridget]

getting closer, Jennifer but the latest code actually put a huge white space between the photo and the text in the event page. See attached. Can we fix this? If not, I will have to quickly revert.

thanks

[Bridget]

This reply is private.

[Jennifer]

This reply is private.

[Author]

Posts