Blog view: Auto resize images to make 100% same height/width? Topic is solved

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
djcaptpln880
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Mon Jul 26, 2021 9:32 am

Blog view: Auto resize images to make 100% same height/width?

Post by djcaptpln880 » Wed Dec 06, 2023 1:28 pm

Greetings

I am using J4 + Gantry 5 template

1. My blog output view has images that render as different sizes.
2. What is the best way to make all images the same dimensions to fit into the blog list view? Ie. when you click on a category mine shows different image sizes.

Any idea?

User avatar
Nidzo2203
Joomla! Explorer
Joomla! Explorer
Posts: 317
Joined: Sat Nov 21, 2009 4:52 pm
Contact:

Re: Blog view: Auto resize images to make 100% same height/width?

Post by Nidzo2203 » Wed Dec 06, 2023 1:57 pm

Try with css:

Code: Select all

height: 200px ; (enter value that suits your needs)
width: 100%;
object-fit: cover;

djcaptpln880
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Mon Jul 26, 2021 9:32 am

Re: Blog view: Auto resize images to make 100% same height/width?

Post by djcaptpln880 » Wed Dec 06, 2023 2:38 pm

Yes I need to try to fit this into my existing template CSS

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2522
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Blog view: Auto resize images to make 100% same height/width?

Post by ceford » Fri Dec 08, 2023 8:20 am

You should put your styles in your templates user.css file and you should make it specific to the class you are trying to affect. Here is an example from a component where the image is in a div with class="preview"

Code: Select all

.preview img {
  max-width: 100px;
  object-fit: cover;
}

djcaptpln880
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Mon Jul 26, 2021 9:32 am

Re: Blog view: Auto resize images to make 100% same height/width?

Post by djcaptpln880 » Fri Dec 08, 2023 4:53 pm

Yes I solved it by consulting with template developer.


Post Reply

Return to “Templates for Joomla! 4.x”