Responsive image in category description

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
odman
Registered User
Posts: 17
Joined: Tue Oct 02, 2018 8:45 am

Responsive image in category description

Post by odman » Wed Sep 25, 2019 9:49 am

Hi!

I want to add a wide, thin image at the bottom of my category description.

I have used the Image code to place an imgur image there.

Now I want 2 things:

1) The picture to be responsive, i.e change size when the size of the browser window changes – or when visiting the forum through a phone.
2) The picture's width to match the category description text field width without me having to resize/downsize the picture externaly before uploading it.

I'm on Pro Silver Special Edition 3.2.3.

Do any of you guys know how to set this up?

Thank you, inspiring master coders! ;)

User avatar
Christian 2.0
Former Team Member
Posts: 4509
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Responsive image in category description

Post by Christian 2.0 » Thu Sep 26, 2019 4:19 pm

Hi there,

Yep, you can use something like:

Code: Select all

.list-inner img {
    max-width: 100%;
}
I'd probably put it at the bottom of content.css

This will always force any images to stay inside the item-description container (width), and as it's a relative value, the image will automatically scale down (proportionately) :)

odman
Registered User
Posts: 17
Joined: Tue Oct 02, 2018 8:45 am

Re: Responsive image in category description

Post by odman » Wed Oct 02, 2019 4:43 pm

Wow! Thank you bro!
I'll definitely try this!

odman
Registered User
Posts: 17
Joined: Tue Oct 02, 2018 8:45 am

Re: Responsive image in category description

Post by odman » Sat Oct 05, 2019 7:54 pm

Oh no. When I edited the content.css file I got this messege when visiting my forum:

[phpBB Debug] PHP Warning: in file [ROOT]/phpbb/di/container_builder.php on line 146: require(./cache/production/autoload_4335734bbdd20f586549a504dff5f80c.php): failed to open stream: No such file or directory
[phpBB Debug] PHP Warning: in file [ROOT]/phpbb/di/container_builder.php on line 146: require(./cache/production/autoload_4335734bbdd20f586549a504dff5f80c.php): failed to open stream: No such file or directory

I put the original file back again but the error message is still there ... What can I do?

I've already checked this and wvwrything is as it should: https://www.phpbb.com/support/docs/en/3 ... rmissions/

odman
Registered User
Posts: 17
Joined: Tue Oct 02, 2018 8:45 am

Re: Responsive image in category description

Post by odman » Sat Oct 05, 2019 8:03 pm

Wow, I solved it. I just copied another autoload_xxx.php-file and changed its name into the file name in the error message and it worked...

User avatar
canonknipser
Registered User
Posts: 2096
Joined: Thu Sep 08, 2011 4:16 am
Location: Germany
Name: Frank Jakobs
Contact:

Re: Responsive image in category description

Post by canonknipser » Sat Oct 05, 2019 8:08 pm

Proper way to solve would normally be for any style change:
"Clear your board cache" either from the acp start page (Button "Clear Cache") or by deleting the content of the /cache/production-folder via acp instead of copying a random php file without knowing the function of that file.
Greetings, Frank
phpbb.de support team member
English is not my native language - no support via PM or mail
New arrival - Extensions and scripts for phpBB

odman
Registered User
Posts: 17
Joined: Tue Oct 02, 2018 8:45 am

Re: Responsive image in category description

Post by odman » Sat Oct 05, 2019 8:11 pm

I already tried the cache/production-folder-solution. I didn't try clear the board cache from the acp start page though. That might've fixed it!
Last edited by odman on Sat Oct 05, 2019 8:13 pm, edited 1 time in total.

odman
Registered User
Posts: 17
Joined: Tue Oct 02, 2018 8:45 am

Re: Responsive image in category description

Post by odman » Sat Oct 05, 2019 8:13 pm

Christian 2.0 wrote:
Thu Sep 26, 2019 4:19 pm
Hi there,

Yep, you can use something like:

Code: Select all

.list-inner img {
    max-width: 100%;
}
I'd probably put it at the bottom of content.css

This will always force any images to stay inside the item-description container (width), and as it's a relative value, the image will automatically scale down (proportionately) :)
It sure did work, bro! Thanks alot!

Post Reply

Return to “[3.2.x] Styles Support & Discussion”