Dentro Blog Image Issue With Lead Article

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

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

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

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

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