What you need:
– Basic knowledge in HTML and CSS.
– A Mac and Xcode (no programming skills required) for exporting the app.

Images

Images can be implemented into text or into a column. All images placed in “small-column”, “medium-column” or “full-column” are automatically resized to the width of that column. If you insert images into a “large-column”, you may add a “div” with one of the “media-left” or “media-right” classes to the image for aligning it accordingly.

Notice that width declarations of img-tags will be ignored in all columns.

Remember that image dimensions alter between different screen sizes. Always implement large images (max 1024px width). Doing so nothing has to be scaled up.

Example for a picture within a “large-column”:

<div class="large-column float-left">
<h2>Image in text (right)</h2>
Lorem ipsum dolor sit amet.

<div class="media-right">
    <img src="images/dossier-01/image-in-text.jpg" alt="" width="400" height="600" /></div>
<!--Div media-right-->

 Aliquam erat volutpat. Aenean in nibh vitae leo placerat viverra.</div>
<!--Div large-column float-left-->

Example for a picture in a “small-column” or “medium-column”:

(the img width will be ignored)

<div class="small-column">
      <img src="images/dossier-01/image-in-column.jpg" alt="" width="400" height="600" /></div>
<!--Div small-column-->

Example for a picture in a “full-column”:

(the img width will be ignored)

<div class="full-column">
      <img src="images/dossier-01/image-in-column.jpg" width="400" height="600" />
</div><!--Div full-column-->

Laker is now on github! Please discuss issues, suggestions or tipps in the github forums of Laker. Thanks! ;)

9 Responses to “Images”

  1. Hi guys! In your sample file I noticed there is a difference for the first image of each dossier between the landscape (full width) and the portrait (partial view on the left side of the photo). How can I modify the code to allow viewing the whole photo in landscape (as it is now) and with a proportional reduction in portrait one?

  2. Hey Kamal,
    The start picture is always fits the height of the page. Take a look at the Photoshop-Template O provide in the Download section.

    If you want to modify the fitting-behaviour, take a look at .dossier-start-bg in structure.css. “Background-size:cover” manages the fitting of the image.

    cheers,
    florian

  3. Hello,

    How can I place an Image Map to be a full page? Can I add clickable areas above it to be interactive and show audio and video lightboxes?

    Thanks in Advance

  4. Hmm, don’t know about performance, but just try it out and let us know how it goes! ;)

  5. Hi Guys,

    anybody have tried to use the svg image format?

    I try without any good result.

    I try with this sintax:

    Or

    The application starts but the page are blank and any images are rendered.
    Thanks a lot

  6. How could I set a background-image with is fixed all time? background-attachment:fixed does not work. Already I ask myself how I can control, if I put this in body tag, Laker loads landscape or portrait image.
    Any Idea?

    Thanks, Andreas

  7. Great stuff. Is there iPad Retina support?

  8. If you want to include high res pictures you need to adapt the media queries a bit, so that is not yet implemented, right…

Leave a comment, suggestion or question.

You must be logged in to post a comment.