Main Content

Magnolia Community Forums: Get help with Magnolia: Best way to integrate responsive images, different images for each viewport


  • prism
    prism
    Full name: Marc Johnen
    Posts: 10
    Last post: Apr 7, 2017 11:51:44 AM
    Registered on: May 11, 2016
    Best way to integrate responsive images, different images for each viewport
    #1 by prism on Apr 7, 2017 11:50:32 AM

    Hello everyone,

    I know about image variations and cropping in Magnolia. Sometimes this is not enough. We need entirely different images for the viewports, for example if there is text in the images which has to have a different size for each viewport to be readable. To implement this I see the following possibilities:

    1. Adding 4 different LinkFieldDefinitions to each Component (we have a lot). This clutters the dialogs, especially when using the DamFilePreviewComponent. Also we'd have to make a lot of code changes.

    2. I added a second resources to the dam-app /modules/dam-app/apps/assets/subApps/detail/editor/form/tabs/asset/fields/ with a different binaryNodeName. This works so far but is not supported by the DamTemplatingFunctions, which is why I used the ImagingTemplatingFunctions. (We will use thumbor.org for creating variations so we don't really need any of the DamTemplatingFunctions).

    Example:
    [#assign contentNode = cmsfn.contentById("5898e2a1-7297-49ea-adc3-e5e323242dd2","dam")]
    [#assign binaryNode = cmsfn.asJCRNode(contentNode).getNode('jcr:content')]
    [#assign imgLinkOriginal = imgfn.getImageVariationLinkFromBinary(binaryNode,'original')!]

    What I don't like about this is the way the URLs are looking:
    /.imaging/default/dam/Startseite/2017_KW14/Herostage_text_1260x400.jpg/jcr%3acontent.jpg
    the binaryNodeName.
    A big pro of this approach is that there is no need to adjust any dialogues. I was also thinking about maybe overwriting the DamTemplatingFunctions for my needs.

    3. One could write a custom editor, to edit the different variations?

    How do you implement responsive images? Do you know a nice way to integrate different images in a compact magnolia dialog?

    Thanks
    Marc

  • prism
    prism
    Full name: Marc Johnen
    Posts: 10
    Last post: Apr 7, 2017 11:51:44 AM
    Registered on: May 11, 2016
    Re: Best way to integrate responsive images, different images for each viewport
    #2 by prism on Apr 7, 2017 11:51:44 AM

    I wanted to write:
    What I don't like about this is the way the URLs are looking:
    /.imaging/default/dam/Startseite/2017_KW14/Herostage_text_1260x400.jpg/jcr%3acontent.jpg
    The binaryNodeName is also the filename, which is not good.

You don't have the permission to post on this thread

Sign in

To login on this forum, you can use your Magnolia Forge, Support or Partner account, or, below, your Google, Yahoo! or OpenID account. If you have trouble logging in, or any other sort of issue, please let us know in the Meta forum, on the user-list, or simply by email at forum-admin at magnolia-cms dot com.

* Required

... or sign in with:

  • icon http://{your-openid-url}
  • icon
  • icon https://me.yahoo.com/