Docs

[liealexius]

Hi,

Need your advice on how to make the image in promo shortcode appear with same size. I use 3 different image size and it appear in the same size if I use recentpost shortcode, but in the promo shortcode the image appear with different height.

Please look at http://karirakademi.com/time-management/
I put the promo shortcode near to the bottom of the article.

Kindly advice

Regards

Alexius

[Paul R]

Hi Alexius,

You can add this under Custom > Edit CSS in the Customizer.

.page-id-536 .x-promo .x-promo-image-wrap {
    overflow: hidden;
    max-height: 155px;
}

But instead I would recommend cropping the images to the same sizes before uploading.

Thanks

[liealexius]

Hi Paul,

I tried the code, the issue still appear.
Any other advice? I use the same image that I use for post, is there any other way instead of cropping each image?

Regards

Alexius

[Christopher]

Hi there,

Please update previous code to :

.x-promo .x-promo-image-wrap {
    height: 105px;
}

Please note that images have different dimensions and they couldn’t be displayed with equal height. Adding provided code crop the bottom part of larger images.

Hope it helps.

[liealexius]

Hi,
I decide to make all the picture size using the same size.
Now I have more question:
1. how to make the box promo all same size, because each box have different length word written there, it make the box height different.
2. I want if my cursor move to the box, a hover for the box (include the word and picture) is appear and if people click on it, then it will redirect to the article link to it. The function I want is similar to recent post shortcode. Please advice

Please look at http://karirakademi.com/time-management/

Any advice how to make the box height the same?

Thank you
Regards
Alexius

[Joao]

Hi Alexius.

1- Please add the following code to Appereance > Customizer > Custom > CSS

.x-promo-content {
    min-height: 100px;
}

2-

Please add the code below in text mode of editor inside promo at the very end of it.

change # to whatever URL you like.

Then please add the code below into Customizer -> Custom -> Javascript:

jQuery('.x-promo').each(function(){
	jQuery(this).find('img').wrapAll('<a href="' + jQuery(this).find('.promo-link').attr('href') + '" />')
});

Hope it helps.

Joao

[liealexius]

Hi Joao,

Issue no 1 solved, thank you
Issue no 2, can you clarify which code that you mean with your sentence “Please add the code below in text mode of editor inside promo at the very end of it.change # to whatever URL you like.”

Regards

Alexius

[Friech]

Hi Alexius,

Sorry it seems the anchor/link code was not pasted. Joao means this code:

<a href="#" class="promo-link"></a>

Append an anchor/link code (something like that above) on the bottom of your promo element text content.

Replace the # with the URL where you want the image to be link.

Hope this helps, Cheers!

[liealexius]

Hi Friech,
Thank you the code working fine.

Regarding hover fading colour, at the moment its look like white transparent, can you suggest CSS code to change it to dark transparent, exactly like recent post shortcode?
Thank you

Regards

Alexius

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-promo-image-wrap:hover a {
    background-color: rgba(0,0,0,0.65);
    display: inline-block;
}

Hope that helps.

[liealexius]

Thank you Christopher, the code working well.

[Joao]

Glad to hear we managed to help,

Joao

[Jade]

You’re most welcome!

[Author]

Posts