Shortcode with col=”1″ gives a croped event-cover

  • Resolved Mahmoud

    (@mahnas92)


    6 years, 10 months ago

    Hi,
    I am using a page to show all current events on my facebook page, but since want to have large boxes for each event I make an event span a whole row by putting the attribute col to 1.

    The problem is that the height of the box containing the date, title and event-cover remains the same, resulting in a cropped event picture. It would be nice if the height fitted the whole picture and increased in proportion with the width, even if it took up more vertical space – something I kind of expected, even wanted.

    Can you fix this in a future update? Are there an easy temporary “hack” (e.g. css-fix?)
    Thank you in advance!

    • This topic was modified 6 years, 10 months ago by Mahmoud.
    • This topic was modified 6 years, 10 months ago by Mahmoud.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Xylus Themes

    (@xylus)

    6 years, 10 months ago

    Hello @mahnas92,

    Thanks for reaching out to us and notify issue.

    We will fix it in an upcoming release. until that you can use below custom CSS to fix the issue. Also please change 260px to as per your requirement.

    .img_placeholder {
    min-height: 260px !important;
}

    Thanks,
    Xylus Themes

    Thread Starter Mahmoud

    (@mahnas92)

    6 years, 10 months ago

    Hi!
    So I’ve been struggling with this for many hours now and found out better ways to solve it. Not sure why you marked it as resolved (as I just noticed)…

    The problem with the code (see bellow) you gave me are many!

    .img_placeholder {
    min-height: 260px !important;
}

    First, it is non-responsive, so it did not work for me, since my WordPress main container width is quite large (so the height would still be cropped with a height of 260px, needed like 350px)
    Also, even if it worked – it would break on a phone!

    I simply did like this:

    	width:100%;
	height: 0;
        padding-top: 52.4%;

    The 52.4% comes from the quota of the Facebook event-banner dimensions 262×500
    (i.e. 262/500 = 0.524)

    The other problem I came to find is that Facebook includes my WHOLE banner-image in the embedded snippet, which means if I have a 400×500 picture, most of the right part of it will cropped. The optimal solution is to crop evenly from both the right and left side (and top and bottom), so I needed to also add these:
    background-position: center center !important;

    In your code (did an HTML-inspection) you do a position along “Left Top”, please change that too!

    Code snippet in full:

    .img_placeholder {
	width:100%;
	height: 0;
	padding-top: 52%;
	background-position: center center !important;
}

    Thank you for this nice plugin, and hope my full-day research is helpful! ^^

    • This reply was modified 6 years, 10 months ago by Mahmoud. Reason: Code indentation
    Plugin Author Dharmesh Patel

    (@dharm1025)

    6 years, 10 months ago

    Hello @mahnas92,

    Thanks for a do research on this and provide useful resource. We will forward your CSS snippet to our development team.

    Let us know if you have any other issues or difficulties.

    Thanks,
    Xylus Themes

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Shortcode with col=”1″ gives a croped event-cover’ is closed to new replies.