Dentro Blog Image Issue With Lead Article - Question | JoomShaper

Dentro Blog Image Issue With Lead Article

C

conshelf

Template 4 years ago

Hello,

I discovered an issue with the blog image layout with the leading article of the Dentro template.

If you visit the template preview, you see the intro text is truncated, or made to appear that way. http://demo2.joomshaper.com/2019/dentro/index.php/blog

On our site, here the image appears too small, and it's 100% related to the amount of intro text that is displayed.

Now I realize I could simply just reduce the amount of text that is set as the intro text, but since that can vary from article to article, it seems that a way to truncate the text is a better solution. This way, as each new article is posted, regardless of character count, the blog image looks correct.

Unless of course there is a CSS fix to make sure that image stays the same width and height no matter what.

Kind regards, John

0
8 Answers
C
conshelf
Accepted Answer
4 years ago #18366

Hello,

I was able to fix this issue by modifying the template override file found here; templates/dentro/html/com_content/category/blog_item.php

I changed line 58:

Tried posting my solution but it wouldnt allow me to add the PHP code here 

Got my solution from this article: https://forum.joomla.org/viewtopic.php?t=891543

But I had to modify it slightly, you will need to change this portion of the code from this:

$item->introtext

to this:

$this->item->introtext

While this was a relatively easy fix, it would be nice if there was an option to limit the introtext characters/words in the Helix Ultimate blog settings. This would also help prevent this mod from getting overwritten with each template update.

Kind regards, John

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #18370

Hi conshelf!

Thanks for sharing your experience with us.

I will convey your wish to the team.

Best Regards

0
C
conshelf
Accepted Answer
4 years ago #18532

Hi Rashida,

I'm still having issues with this, the article title also affects the width of the main image.

How can I make sure that the image and text take up equal space?

Kind regards, John

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #18546

Hi conshelf,

Did you set up image sizes within the Blog tab of your Template options, already?

Best Regards

0
C
conshelf
Accepted Answer
4 years ago #18653

Hi Rashida,

Yes, I had sizes set for Thumbnail and Medium, but the Leading Image was set to Large in the list settings.

I switched it to medium, but that made it even worse. The image size for medium is 540x284 but as you can see on the page, it's getting resized by the browser to 232x 122 which isn't a size I've set anywhere.

Kind regards, John

0
C
conshelf
Accepted Answer
4 years ago #18698

Hi Rashida,

The biggest issue at hand is, the image changes size depending on the size of the main title.

It's not consistant at all.

Kind regards, John

0
C
conshelf
Accepted Answer
4 years ago #18701

Hello Rashida,

I fixed the issue by adding the following CSS to my cusomt.css file override the template.css classes.

.article-list.articles-leading .article .article-body {
    flex: 1 1 0;
}

.article-list .article .article-feature-gallery, .article-list .article .article-featured-audio, .article-list .article .article-featured-video, .article-list .article .article-intro-image {
    flex: 1 1 0;
}

This is the original CSS from the template.css file line 549:

.article-list.articles-leading .article .article-body {
    padding-right: 30px;
}

This is the original CSS from the template.css file line 580:

.article-list .article .article-feature-gallery, .article-list .article .article-featured-audio, .article-list .article .article-featured-video, .article-list .article .article-intro-image {
    margin: 0;
    border-radius: 0;
    border-bottom: 0;
    overflow: hidden;
}

Seems the additon of flex: 1 1 0; is necessary to make sure these divs are evenly spaced. If you inspect element in Chrome and add additonal text to the titles and intro text on the demo here: http://demo2.joomshaper.com/2019/dentro/index.php/blog you can see the images change size there as well.

May be worth adding flex: 1 1 0; to those classes in a future update.

Kind regards, John

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #18733

Hi conshelf,

Many thanks for sharing your observation with us.

I will talk to developers about it.

Best Regards

0