0

So I know EE3 have a built in image manipulation where you can either crop or constrain the image.

Image Manipulation CP

I'm using picturefill to swap images for Desktop, Tablet and Mobile. But the images for some reason are not showing up. Get empty src for images. I believe there is a special way to display images for Desktop, Tablet and Mobile in my case.

{banner}
        <picture class="bg-image">
            <!--[if IE 9]><video style="display: none;"><![endif]-->
            <source srcset="{banner:home:desktop}" media="(min-width: 1000px)">
            <source srcset="{banner:home:tablet}" media="(min-width: 760px)">
            <!--[if IE 9]></video><![endif]-->
            <img srcset="{banner:home:mobile}" alt="" />
        </picture>
{/banner}

Can you spot what am I doing wrong here? Basically images that are uploaded I need to crop them to 3 sizes and then display them.

1

The issue here is that your syntax is incorrect in a few ways.

  1. Within a File field tag pair you should not prefix variables with the parent tag (banner:).
  2. You should not include the directory name (home:) as prefix segment in the variable names.
  3. You're using lowercase for your manipulation names in your template, but uppercase in your settings (I'm not positive this will throw things off, but you should always be consistent, and make them match).

Your code should be revised to look like this:

{banner}
    <picture class="bg-image">
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source srcset="{url:Desktop}" media="(min-width: 1000px)">
        <source srcset="{url:Tablet}" media="(min-width: 760px)">
        <!--[if IE 9]></video><![endif]-->
        <img srcset="{url:Mobile}" alt="" />
    </picture>
{/banner}

Check the docs on File fields for more info on the variables, and examples.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.