Jump to content

Archived

This topic is now archived and is closed to further replies.

janpeeters

Edge-to-edge images

Recommended Posts

janpeeters

Hi, I have a container with on the left a 6 column image section and on the right a six column text section. I'm not succeeding in getting a edge-to-edge image on the left. Even with padding set to 0, there remains a white gap under and on the left of the image. So I'm researching if I'm overlooking something, if I've found something that could be improved in PL5 or if this is 'by design'?

I've set site lay-out in settings to 100%. I've set pl-framework-base to 'full width'/'unwrapped'. (sidenote: in the end I want to have this 'read width' but for testing purposes I set it to full width. This might ask for an override function in the editor so people can always choose to full-width a section although other content is read width.) The images beneath show the settings and lay-out. 

56486bb05ff98_ScreenShot2015-11-15at12.256486a5d60368_ScreenShot2015-11-15at12.1 564869395c37a_ScreenShot2015-11-15at12.1

I've set all padding on the container to 0, but there remains a gap underneath the image and on the left. 
I've done the same for the padding on the image.

564869d5576d7_ScreenShot2015-11-15at12.056486c6c04f85_ScreenShot2015-11-15at12.0

I've inspected this with Chrome Dev tools and it shows the following:

56486cb35b0e6_ScreenShot2015-11-15at12.156486cb689345_ScreenShot2015-11-15at12.1

I could create custom CSS to remove these spaces but for PL5 to be even more flexibleI I would think that being able to have edge-to-edge images without too much hassle would be a great feature. You see this a lot in recent webdesign. But I might be overlooking something and it is already possible. 

Additionally…

I've done some testing with the Window Height setting. I think it would be great if images could fill their container edge-to-edge too with this setting active.56486d4a9f3a7_ScreenShot2015-11-15at12.0

I've tried to make the image taller but then the aspect ratio changes. A locked aspect ratio function would be great for this. With responsive designs images get cropped all the time so for me cropping would not be a problem. Keeping it's aspect ratio locked automatically or as a setting would be nice. I guess most designers wouldn't want it unlocked. 

56486d4660930_ScreenShot2015-11-15at12.0

That's it, a whole visual story. I hope that it's clear what I'm saying if not let me know and I'll try to clarify. 

Thanks, Jan

(by the way, the current forum software you're using is really the best you've had. It works so easily, brilliant)

There seems to pop an image at the bottom that I didn't put here, forget about the image below, it's already above.

Screen Shot 2015-11-15 at 12.03.56.png

Share this post


Link to post
Share on other sites
Andrew

A live link and i could address this easier. This is possible, maybe even a new feature we could add.

Share this post


Link to post
Share on other sites
micstepl

I do fully agree to Jans suggestion !!!
I do also agree to the situation that there is still margin (although there shouldn´t be - as in the test mentioned):


In addition I would like to add a comment pointing into the same direction, but for page/post content too. Maybe I am saying the same - just looking at it form a different - or other angle. 

Currently pages/posts are handled differently than PL-page-content.

  • if you added a full with section within"PL-page-content" and apply eg. a color background, the color reaches from edge to edge  (this garants a modern state of the art look).
  • If you do the same in a "content area" of a page/post .... there are white spaces to the right and left towards the browser edge

I suggest, that you allow

  • sections within the content area, and their background to reach edge-to-edge (so that it looks like a "PL-page-content")

Maybe the solution

  • remote this mentioned padding
  • allow to define individuelly the "Reading Width" (Padding/Marging)
    • this is currently quite stange (allowns not to scale up) (maybe a bug)

 

There shouldn´t be a visual difference between these 2 types, in order to maintain the state of the art look with sections from edge-to-edge within content areas.

Share this post


Link to post
Share on other sites

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have noticed that all thumbnails on www.michaelkummer.com are scaled down in CSS or HTML, rather than on the backend by Jetpack's Photon. See https://db.tt/vNJCn7Gh and https://db.tt/3ZpkHM7G. 
      Any idea why Pins sets the image width and height to something much larger than what's shown on the screen? Is there any way to fix this so that Photon can do a better job in rescaling the images on the backend before they are delivered to the browser?
      Thanks
      Michael 
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • ppotent
      By ppotent+
      It seems that whenever media is set to be on the left, there is a problem with the way safari displays them. I used to have boxes with media on left when i was using DMS2, but since PL5, I've had to use only media on top. I know there are a few css suggestions that people have offered, but I'm wondering if such suggestions can't be built into the boxes code for PL5 rather than having to add extra CSS. Otherwise, am really liking PL5 over DMS2.

    • richardjacruz
      By richardjacruz+
      I received our monthly Alexa report, and it pointed out that there were missing alt tags on EVERY page on our site. Upon closer inspection, it looks like the QuickSlider which is used for the scrolling banners at the top of the site doesn't bring in the alt tags. Recently, you made a change to the RevSlider to allow images to have "alt" tags. Can you do that for the QuickSlider too?
      Thanks.
    • jvheintze
      By jvheintze+
      I just tried to figure out how to use Lax in combination with Post Thumbnails the following way: instead of showing the Featured Image on top of the content section I would like to have a Lax section above the content which loads for each post the featured image. To do so it seems there should be some kind of word press hook support necessary (not ready yet)? Or did I miss something?
×