Integrating image renditions and page layout
A system and method involves creating, based upon a set of image rendition parameters, a set of image renditions for an image. A set of previews are selected to display. Each preview includes a markup language file and breakpoints that specify how a particular image rendition from the set of image renditions is displayed. A rendered instance is created for the previews and based upon the particular image rendition and page content. The rendered instances are displayed as part of a user interface. Instructions are received from the user interface. The instructions specify modifications to a particular preview of the set of previews. The markup file is modified based upon the instructions.
1. A method comprising:
creating, for an image, a set of image renditions according to a set of image rendition parameters that correspond to image display capabilities of a predetermined set of electronic devices, the set of image rendition parameters including a set of cropping borders, a set of minimum image sizes, a set of maximum image sizes, a set of desired image display sizes selected, through the use of a set of image preview editing tools, from the set of image renditions, and a set of image display dimension breakpoints within a range of image display dimensions;
selecting a set of previews to display, each preview in the set of previews including a markup language file configured to render web pages and the set of image display dimension breakpoints that specifies a particular image rendition from the set of image renditions to display on an electronic display device from the predetermined set of electronic devices;
creating a rendered instance for each preview in the set of previews based upon the particular image rendition and page content identified by a corresponding preview;
displaying the rendered instances as part of a user interface;
receiving instructions from the user interface and that specify modifications to a particular preview of the set of previews; and
modifying, based upon the instructions, the markup language file configured to render web pages and corresponding to the particular preview.
2. The method of claim 1 , further comprising:
identifying violations of preview layout rules caused by the modifications to the markup language file configured to render web pages; and
adjusting the set of image display dimension breakpoints associated with the particular preview based upon the identified violations.
3. The method of claim 2 , further comprising:
identifying at least one gap between image display dimension breakpoints corresponding to displaying images associated with previews in the set of previews; and
selecting a set of additional previews corresponding with the at least one gap between image display dimension breakpoints of the set of image display dimension breakpoints.
4. The method of claim 3 , further comprising:
creating an additional rendered instance for an additional preview of the set of additional previews based upon the set of image renditions;
displaying the additional rendered instance as part of the user interface; and
modifying, based upon input from the user interface, the markup language file and a cascading style sheet (CSS) file that each correspond to the additional preview.
5. The method of claim 1 , wherein selecting the set of previews to display includes selecting previews that correspond to display capabilities of the predetermined set of electronic devices.
6. The method of claim 1 , wherein selecting a set of previews to display includes applying analytics to detect display capabilities of the predetermined set of electronic devices.
7. The method of claim 1 , wherein the instructions include at least one instruction selected from the group consisting of cropping, resizing, and replacing, relative to the particular image rendition.
8. The method of claim 1 , wherein the instructions specify that another image replaces the image corresponding to the particular image rendition.