Bug RE: width, max-width, and height CSS

Suggestions and comments about SummitPost's features, policies, and procedures. Post bugs here.
User Avatar
adventureharder

 
Posts: 7
Joined: Wed Jan 09, 2019 8:50 am
Thanked: 2 times in 2 posts

Bug RE: width, max-width, and height CSS

by adventureharder » Sat Mar 23, 2019 5:43 am

Video Walkthrough link on Dropbox. I don't know how else to explain this other than through a demonstration.

Source Page: White Butte, ND State Highpoint

The following user would like to thank adventureharder for this post
Matt Miller

User Avatar
Matt Miller
Site Admin
 
Posts: 567
Joined: Tue Sep 01, 2015 3:44 pm
Thanked: 187 times in 129 posts

Re: Bug RE: width, max-width, and height CSS

by Matt Miller » Sun Mar 24, 2019 9:00 pm

Thank you for the detailed video! I see the problem and will have to track it down. I am not sure exactly where in the code the erroneous changes might be being made. It is obvious that when the HTML is submitted it is being changed. This is either happening in the editor's javascript code or on the backend of our PHP code. My guess is that it is in the javascript code because I don't recall modifying the image code in that way. But I will have to poke around and see what I can figure out.

User Avatar
adventureharder

 
Posts: 7
Joined: Wed Jan 09, 2019 8:50 am
Thanked: 2 times in 2 posts

Re: Bug RE: width, max-width, and height CSS

by adventureharder » Sat Apr 06, 2019 11:16 am

Is there any progress or an ETA to report?

User Avatar
Matt Miller
Site Admin
 
Posts: 567
Joined: Tue Sep 01, 2015 3:44 pm
Thanked: 187 times in 129 posts

Re: Bug RE: width, max-width, and height CSS

by Matt Miller » Sat Apr 06, 2019 3:14 pm

Unfortunately, no. I am hoping that there might be a way to globally fix this with all images on all pages with a global CSS or Javascript change. I need to spend some time researching that. This is not my area of expertise however and, right now, I lack funds to hire someone to help again. I have been fixing other things on the site (lots of pages have broken formatting) and it is also the busy season with our other business (FlytrapStore) so I haven't had a ton of time to spend working on this particular issue.

I do have it as a high priority though to (hopefully) make all of the images on all pages "responsive" by changing width to max-width and setting width to 100% (or something along those lines).

User Avatar
Matt Miller
Site Admin
 
Posts: 567
Joined: Tue Sep 01, 2015 3:44 pm
Thanked: 187 times in 129 posts

Re: Bug RE: width, max-width, and height CSS

by Matt Miller » Sat Apr 06, 2019 7:18 pm

I found a built-in CSS class within bootstrap (the responsive framework we're using) to make images responsive by default. The class is "img-responsive".

I just edited your White Butte page, removing from the images all specification of width, height, etc. and putting in class="img-responsive" and it appears to work now.

Please take a look and let me know what you think.

User Avatar
Matt Miller
Site Admin
 
Posts: 567
Joined: Tue Sep 01, 2015 3:44 pm
Thanked: 187 times in 129 posts

Re: Bug RE: width, max-width, and height CSS

by Matt Miller » Sat Apr 06, 2019 7:27 pm

I believe this is the default functionality we want, so I will likely roll in a change to all pages to allow for responsive images like this.

User Avatar
Matt Miller
Site Admin
 
Posts: 567
Joined: Tue Sep 01, 2015 3:44 pm
Thanked: 187 times in 129 posts

Re: Bug RE: width, max-width, and height CSS

by Matt Miller » Sat Apr 06, 2019 7:44 pm

NOTE: There is still an issue with the editor inserting width and height on the wrapping <figure> element for images when the page is edited. I will try to figure out why and where this is happening and prevent it from doing so if it doesn't break anything else.

User Avatar
Matt Miller
Site Admin
 
Posts: 567
Joined: Tue Sep 01, 2015 3:44 pm
Thanked: 187 times in 129 posts

Re: Bug RE: width, max-width, and height CSS

by Matt Miller » Thu Apr 18, 2019 9:09 pm

OK, I scraped together some funds from our tax return and was able to get the programmer to help get this fixed!

Please test and let me know your results. I believe that all images inserted with the new editor will now be responsive by default and will behave as described in the video walkthrough you put together, adventureharder. Thanks again for making that video.

User Avatar
adventureharder

 
Posts: 7
Joined: Wed Jan 09, 2019 8:50 am
Thanked: 2 times in 2 posts

Re: Bug RE: width, max-width, and height CSS

by adventureharder » Sat Apr 20, 2019 6:34 am

Glad to help. The page functions much better. I cleaned up some extraneous CSS code that was injected from somewhere. It's possible that was leftover from previous edits. I'll report back if I find any other oddities.

Thank you for the fix!

User Avatar
Matt Miller
Site Admin
 
Posts: 567
Joined: Tue Sep 01, 2015 3:44 pm
Thanked: 187 times in 129 posts

Re: Bug RE: width, max-width, and height CSS

by Matt Miller » Sat Apr 20, 2019 3:38 pm

OK, great!

User Avatar
adventureharder

 
Posts: 7
Joined: Wed Jan 09, 2019 8:50 am
Thanked: 2 times in 2 posts

Re: Bug RE: width, max-width, and height CSS

by adventureharder » Wed May 15, 2019 5:32 am

I pulled up the White Butte page today and all the images were broken again. The page was loading correctly on April 19th, 2019 when I made my last post here in this forum thread. I haven't made any edits to the page since then.

There was no rhyme or reason to the new code. All 5 images had 5 separate, random iterations of <figcaption> and <img> HTML. Unfortunately, I can't provide any more details on changes in the code.

Furthermore, the very first Facebook image URL will not resolve. It's loading fine on Facebook. The other 4 images are pulled from the same Facebook gallery and they are resolving correctly. I double, triple, quadruple checked the code for the href and img URLs. It was correct ... /shrug. I dunno why that image won't load.

Edited To Add: The broken image URL is resolving correctly here in the forums from the link above. Same URL. Again, I don't know why it won't load on the Peak page. It's the only image which won't display.

User Avatar
Matt Miller
Site Admin
 
Posts: 567
Joined: Tue Sep 01, 2015 3:44 pm
Thanked: 187 times in 129 posts

Re: Bug RE: width, max-width, and height CSS

by Matt Miller » Wed May 15, 2019 5:22 pm

adventureharder wrote:Furthermore, the very first Facebook image URL will not resolve.

That is because it is a link to a page, not to the actual image. I've altered the HTML to link directly to the image stored on Facebook. It appears to work now.

However, I'd suggest uploading the images directly to SummitPost to avoid any complications with images stored off the site.


Return to Site Feedback

 


  • Related topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 0 guests