Support » Plugin: Page Builder by SiteOrigin » Resize PNG Image to PB Column Width

  • Resolved wireB

    (@wireb)


    Is it possible to have a PNG image resize to the current PB column width? The benefit would allow the image to stretch depending on the visitor’s screen resolution as does the paragraph’s width stretch. So as the paragraph’s content width adjust according to the visitor’s screen resolution so shall the image.

    wb

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Andrew Misplon

    (@misplon)

    Hi wb

    Have you tried the following?

    * Edit the row concerned.
    * Click on the cell/column you’d like to add the background too.
    * Cell Styles then appear in the right column.
    * Open the Design section, add your background image and change Background Image Display to Cover.

    Hi Andrew and thank you for your response.

    The image is a non-background image which I would like to auto resize as text width resizes according to the visitor’s screen resolution. Text within a column re-flows according to your screen resolution but the image stays static.

    Cheers,

    wb

    Plugin Author Andrew Misplon

    (@misplon)

    Hi wb

    Thanks for the update. Which widget are you using to insert the image? If you’re using the SiteOrigin Image widget, scroll down within that widget and enable the Full-Width setting. That should do the trick.

    Hello Andrew and hope your weekend was great.

    The widget is the standard Black Studio TinyMCE Widget “Visual Editor” which integrates well with text and images. So the question, if I may rephrase it:

    How can I achieve image resize – similar to the impact of – text paragraph length resizing – to accommodate the client’s screen resolution? The image within the Visual Editor is clearly a PNG and want to do this all within the TinyMCE.

    Cheers,

    wb

    Plugin Author Andrew Misplon

    (@misplon)

    Hi 🙂 Please, send a link to the page you’re working on so I can take a look. If the image has been inserted, you could set the image width using CSS to 100%. The width will then resize as the column width changes, however, the height will adjust too. At the moment, there isn’t anything else that comes to mind.

    Hello again Andrew,

    That is what I would like to see, what I think would be useful for any content contributor, is to be able to auto resize and image maintaining scaling within a CSS as a global CSS setting. Could you provide this. I need to have content provides who are non coders to be able to integrate this setting for thier own unse. Currently there is no CSS for image resizing.

    Thank you for you assistance.

    wb

    Plugin Author Andrew Misplon

    (@misplon)

    Thanks, I’m still not quite clear on what you’re after. You can try editing a given row, opening Attributes on the right and adding a class name like:

    custom-image-scale

    And then in Customize > Additional CSS you might add:

    .custom-image-scale img {
    	width: 100%
    }

    That would target all images in the row making their width 100%.

    Our free support scope doesn’t really cover custom development. We do our best to assist where we can.

    I haven’t looked into this much but perhaps there is a plugin that can help. Here is a round-up I came across with a few ideas: https://www.wpeka.com/responsive-images-plugins-for-wordpress-websites.html.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.