Liferay 7 blog cover image dimension problem

[samuel tian, geändert vor 7 Jahren.]

After upgraded to Liferay 7, every time we upload an image and use it as the cover image of a blog article. It will be down-sized to a certain resolution (height 360 is reduced to 271 in my case) which doesn't fit our original design.

I guess it should have a setting somewhere (as like in portal-ext.properise) which allows us to control the maximum height and width or the ratio. Did a bit of digging from GitHub but wasn't able to find it.

Please let me know if you know how to customize the cover image of a blog article. Or if there is a better way to implement this.

Any help is appreciated.

Cheers

[samuel tian, geändert vor 7 Jahren.]

Following the source code and realized that there is a crop feature which allows you to drag and move the area you want to display when the image is bigger than the allowed dimension.

But the problem is still if there is a setting somewhere allow us to set the actual resolution we want?

[Sergio González, geändert vor 7 Jahren.]

Hey Samuel,

There is no portal.property to configure the height of the cover image in blogs. However, changing it to any other height should be feasible using a theme.

In order to allow to have a larger selection area when adding a cover image, you need to modify the height in the following selector:

.taglib-image-selector.draggable-image .image-wrapper {
height: 400px;
overflow: hidden;
width: 100%;
}

Finally, in order to show a larger image when displaying the blog entry, you need to modify the height of the following css selector:
.portlet-blogs .entry-body .cover-image-container {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 600px;
}

We implemented this to be extended with a theme because it's much more extensible and powerful than adding 1 or 2 portal.properties.

Let me know if you have any additional question

[samuel tian, geändert vor 7 Jahren.]

Thank you very much for your solution Sergio.

In our case, we now haven't got a plan of extending the Liferay default admin theme, but we do have our own portlet to retrieve blogs and displays it. All of our blog articles are edited and published by professionals, and cover images are exactly the same size as we needed. So we did a bit of analysis of the folder structure and did the following in our blog portlet:

            FileEntry coverImgFileEntry = PortletFileRepositoryUtil.getPortletFileEntry(blog.getCoverImageFileEntryId());
            Folder parentFolder = PortletFileRepositoryUtil.getPortletFolder(coverImgFileEntry.getRepositoryId(), coverImgFileEntry.getFolder().getParentFolderId(), "com.liferay.blogs");
            FileEntry imageFileEntry =PortletFileRepositoryUtil.getPortletFileEntry(themeDisplay.getScopeGroupId(), parentFolder.getFolderId(), coverImgFileEntry.getFileName());
            String imgUrl = DLUtil.getPreviewURL(imageFileEntry, imageFileEntry.getFileVersion(), null, "");

(Works under liferay 7.0.2 GA3)

This way we're retrieving the originally uploaded blog image rather than the cropped one. This is more of a skipping of this cover image feature, but it is kinda what we needed at the moment.

Just to post it here, in case anyone else might need to do the same.

[Andrew Jardine, geändert vor 6 Jahren.]

No doubt that answer worked, but I wanted to throw in another option for people that come across this post.

In my case, I didn't want the images cropped at all. The first thing I did was created a jsp override for the blogs-web module, modifying the edit_entry.jsp file. In that file you can search for a tag --

<liferay-item-selector:image-selector draggableImage="vertical" fileEntryId="<%= coverImageFileEntryId %>" itemSelectorEventName="<%= coverImageSelectedItemEventName %>" itemSelectorURL="<%= blogsItemSelectorHelper.getItemSelectorURL(requestBackedPortletURLFactory, themeDisplay, coverImageSelectedItemEventName) %>" maxFileSize="<%= PropsValues.BLOGS_IMAGE_MAX_SIZE %>" paramName="coverImageFileEntry" uploadURL="<%= uploadCoverImageURL %>" validExtensions="<%= StringUtil.merge(imageExtensions, &quot;, &quot;) %>" />

-- and you can modify the "draggableImage" attribute so that it has a value of none. When you do this the whole "viewport" thing in the blogs entry form goes away and you now get the whole image. Changing that property mean that when the image is saved, the whole cropping process is bypassed.

As a second part to this, I am leveraging the image magick portion to handle the sizing of images dynamically. This way, if someone uploads a 5mb image that they want to use as a cover photo, but then they want to just show a 250x250 version of it, we can resize the image on the fly to avoid your phone having to download the hugungous file. To do this I had to enable this property --

 image.auto.scale=true

... in my portal-ext, restarted and then updated all the places where I am referencing the images to include two additional url parameters. So for example, if you have this --

<img src="${entry.getCoverImageURL()">

then you would update it to this --

<img src="${entry.getCoverImageURL()&amp;height=250&amp;width=250">

.. so that a smaller image is generated, and returned. That all worked for me. I'm going to take it one step further and add a property to the portal-ext, something like blogs.cover.image.cropping.enabled and then use the PropsUtil to read that value and update the view entry so that we can use a conditional to determine whether or not the images should be cropped.