Add image underlay/overlay to aid built web pages

[Rob]

Feature request from @Pinegrow_User

[Pinegrow_User]

Thanks @Rob , overlay or underlay ? Actually that may be a good feature of it also. Allowing the user to toggle. Start as underlay, but as things get styled out and the mockup is covered up - allow the user to switch to overlay with transparency setting to test how things match vs their design when they get it styled, images placed, etc,. Sorry just random ideas being thrown out, but hopefully the Pinegrow team get the gist of the idea.

What is your work flow to go from design mockup to full website?

[quote=“Terry44, post:17, topic:359”] Using a graphic design software like Photoshop, Fireworks, Affinity Designer or whatever you can use Lorem Ipsum text for filler text content and various image blocks to represent components like carousel galleries. tabbed boxes, buttons etc…[/quote] @Terry44 , This may sound silly, but one option you could try for using a visual mock-up as your starting point in Pinegrow would be design your mock-up in any of those programs you mentioned at a desired des…

What is your work flow to go from design mockup to full website?

@Terry44, it was just a basic example ideal for your mockup image workflow desires. But yes using a DIV allows for more manipulation and features via CSS and the current UI. If it was to be an actual feature as previously hinted at … Then it could be hidden from the user in the page tree, much like the “actions bar” etc., is on page items. Instead only accessible via it’s UI controls, and not directly by the user like a typical page item. I think this type of feature is also something that c…

[Rob]

I’ve update the title to reflect the over/under option

[Rob]

Couldn’t remember where this topic was so I posted in what I thought was the most relevant topic! Anyhow, I tried a quick attempt at this using Pinegrow by adding a section to overlay the page I was creating, it was a quick experiment and with a little bit more time and effort I’m confident I could have convert the jpeg used in the overlay to HTML using Pinegrow. Click here to view more info on my OverlayExperiment+Links to demo.

[Pinegrow_User]

Nice job @Rob, looks like a good quick proof of concept for an integrated feature for Pinegrow as mentioned and discussed above.

Even as a quick experiment, and using some images like you did in places and not being a complete build with everything in place or taking all aspects into consideration, it still shows the benefit such a workflow could have for users.

It shows the ability such a feature would have for rapid development and visualization as well as for design minded people. Allowing users to perhaps better visualize as they set out to work with Pinegrow and use the various LIB , PROP , CSS , etc., to get and set the basic structure in place. Before they move on to refine things in the areas of adding or adjusting responsive aspects, breakpoints, media queries, responsive visibility, styling, animations, and on and on, past the basic structure they created. It may allow users whom wish to use mockups or reference images to get to those aspects quicker.

Thanks for sharing your example.

[Thomas]

Hi guys,

as in the other thread pointed out, I obviously missed the sense of this. So I better ask.

Is it something like this?

1. Take a screenshot of your artwork (or page example)

2. In Pinegrow chose “body”

3. Select PROP and add the screenshot as the Bck Image

4. Add a style for positioning such as:

   body {
   background-image: url(‘screenshot.jpg’);
   background-repeat: no-repeat;
   background-position: center top;
   }

Finally add elements from LIB trying to re-create it?

Cheers

Thomas

[Rob]

@Thomas that’s pretty much the idea. I added it to a div so the div could be easily switched on or off so the user could see their layout without the jpg so they get to see how they are progressing. Also when I first saw the discussion about this as an idea I thought it would be underlying the elements being added but it was suggested that it could be an overlay which wouldn’t be doable using a background image on body. I think an underlay is a better option as once you have you finished with creating an element in PG you no longer have the overlaid image having an impact on the visual in PG (if the overlay is set to opacity: 0.3 for example will make what you are working on look washed out until you switch it off, little eye icon).

Also because of the fact that it is added as an overlay it means you can’t directly select an element you’ve added in PG because the top element is the overlay so you have to select the element using the doc tree or switch off the display of the overlay and then select.

If somebody likes to work this way I think what you’ve suggested is an excellent solution unless they want the artwork to overlay their work in PG, it they do then what I’ve done is one option but involves some extra steps to get the most out of it. Both solutions that work depending on the requirements of end user. Maybe adding a class to the overlay that you could add or remove from the container allowing a user to “switch” it on or off while developing their layout. This would also make it a lot easier when choosing to preview it in a browser removing the requirement to delete the overlay container in order to view your work in a browser without the overlay. Actually I’m going to update that layout to do that and then it anyone wants to see how that works they can use the inspect tool to switch the css rule on or off.

Great suggestion on a simple was to implement an underlay version.

[Rob]

I’ve updated the css that controls the display of the overlay. By adding a class overlay hidden {opacity: 0;} to the overlay container it means that you can effectively switch on or off the display of the overlay container just by going to the css panel and clicking the + or - when you have the overlay selected on your page. It also means if you choose to view your page in a browser with the overlay displayed you can still switch it on or off just by using the inspect tool and selecting the overlay container and clicking the opacity checkbox in .overlayhidden class. This seems like a better way to handle this aspect of an overlay that can easily be switched on or off when building pages in PG. I’d love to hear feedback on this change.

[Thomas]

Thanks for clarifying, Rob.

Oh yes - the DIV. Much more clever and flexible.

Cheers

Thomas

[Pinegrow_User]

@Thomas

Oh yes - the DIV. Much more clever and flexible.

That was already discussed in the other thread as well.

@Terry44

Problem with setting it to the Body tag is that if you wanted to temporarily hide the image you can’t because it would hide the whole page.

@Pinegrow_User

@Terry44, it was just a basic example ideal for your mockup image workflow desires. But yes using a DIV allows for more manipulation and features via CSS and the current UI.

@Rob,

I still feel this would be better served as an integrated feature.

@Pinegrow_User

It may be nice to have it as a feature via the UI or something similar on another level under the page. Have it so the user can chose and set a mockup / design image, the ability to toggle it on and off, set the opacity or overlay color, and delete the image as well.

Then it could be hidden from the user in the page tree, much like the “actions bar” etc., is on page items. Instead only accessible via it’s UI controls, and not directly by the user like a typical page item.

[Pinegrow_User]

@matjaz & @Emmanuel

This idea / thought seems even more relevant now with Pinegrow 3 / 4 / and beyond …

Especially with the new CSS improvements across the app and in conjunction with using the new Visual CSS Editor. It would be a way for users to easily mock up and scaffold websites visually to start their development process when pared with the new CSS features in the app.

Again as stated above:

it would allow Pinegrow users to use the various LIB , PROP , CSS , etc., to get and set the basic structure in place. Before they move on to refine things in the areas of adding or adjusting responsive aspects, breakpoints, media queries, responsive visibility, styling, animations, and on and on, past the basic structure they created. It may allow users whom wish to use mockups or reference images to get to those aspects quicker.

This feature seems like a smart partner to be used in conjunction with the Visual CSS Editor, etc.

[Terry44]

Pixel Perfect positioning with images without the CSS being cluttered inline as well.

[Pinegrow_User]

What exactly do you mean? Are you presently dealing with inline CSS in Pinegrow 3 /4 ?

[matjaz]

Here’s a sneak peak of the overlay feature, currently in internal use.

[Pinegrow_User]

Looks really nice in concept @matjaz . Thanks so much for the feedback and effort on this feature.

---

I am also really happy to see perhaps an updated new look for Pinegrow’s site as well, v4 deserves that.

[Rob]

@matjaz excellent work adding this and how it is implemented being able to adjust positioning, etc.

[schpengle]

That there is one Large dose of awesome.
Respect!

Hows that for User Feedback being taken into consideration?
Good luck with that sort of thing with Adobe…

[matjaz]

@Rob, @Pinegrow_User you can try the feature in the latest beta. Use Display helpers (in top bar) -> Image overlay to set it up.