User defined image widths on grid

    Hello,


    I would like to be able to put some images in a grid-box and define a starting and ending column via select from the backend.

    My current situation:

    (The perch:blocks are for different content added later)


    So far it works nicely.

    To achieve optimal responsive image loading, I would like to use perch:if or something similar to take different paths based on the width of the image in columns.


    Is it possible to get the raw values of the select fields, to calculate the width and use it to branch? (This would be my prefered way)


    I tried to add another select field, where the user inputs the width himself and used it in perch:if. This works, but I don't know how to supress the output of the field and it's redundant.


    Also if I branch out my pictures/srcsets like this, does Perch still manage to automatically create different image sizes based on the output size?


    Bonus question: How would I retrieve the asset title to use in the caption?


    Many thanks and greetings from Germany

  • drewm

    Approved the thread.

    Hi Claus


    Perch won't be able to tell what your CSS is doing to the html. But you can create multiple images from the one image when it is initially uploaded by just using the same ID on multiple tags.


    E.g. The following will output three images with different sizes, all with the same ID. You then just use the different sizes in your template where appropriate. The srcset and sizes options available to the image tag can do this for you without you having to use <perch:if> conditionals. Image options in the Perch docs are here.


    <perch:content id="image" type="image" label="Bild" width="100">

    <perch:content id="image" type="image" label="Bild" width="400">

    <perch:content id="image" type="image" label="Bild" width="800">


    You can use suppress="true" or suppress to stop a field appearing in your template. However, a lot of people use two templates with things like collections. One to use as an edit form in the CMS, and the second to display fields on a webpage. I find it's a much cleaner method of working.


    As to the caption, it's not possible to use the asset title. If you think about it the CMS is creating several files from your original upload so which one would it use? I would recommend you just add the caption as a separate text field to the form.

    Hello ellimondo,


    thanks for your input. I think you misunderstood my question a little. I need to branch out with <perch:if>, because the image sizes are relative to the breakpoints. I have to tell the browser what the width in columns means (actual width) in different layouts (the sizes attribute). I got it to work like this:

    For example: a 1 column wide image on a large screen becomes actually larger on a medium screen.


    That`s why I need the width in columns to decide which sizes attribute is correct. All works fine. I just don´t like the fact, that the user has to type in the width in columns, since I could easily calculate it from startcol and endcol.


    Switching from C to webdev always feels like someone cut off your hands ;)

    Hello drewm,


    thank you, that's what I needed (I guess). I've managed to do it with:


    and

    Code
    1. sizes="<perch:content id="widthcols" type="text" default="Nothing to see here" filter="calculateWidth"/> 100vw">


    I tried to use <perch:content type="hidden"> for the output but it seems like it can't be filtered.


    I also tried to put the filter on one of the selects and set the value of the hidden field directly, but it doesn't show up in $this->content.

    (I guess the filter function is for manipulating and returning anyway)


    So question is, how do I use <perch:content type="hidden"> to output the strings / get rid of the input field in cms?

    Yes, now it works. I had to use for="startcol endcol", because for="" didn't work.


    One last thing. I tried to modularize the responsive image template a little so it doesn't show the startcol/endcol selects if the image is not inside a grid.

    I have:

    and


    As you can see, I tried to <perch:if> on a field in the surrounding blocks, but it doesn't see the field outside the template. Also even if the <perch:if> fails, the selects show up in the cms (it only affects the output i suppose).


    Is there a way for an included template to know if and where it has been included?

    Is it possible to display context relevant inputs in the cms?


    BTW: Most of my questions really come from not knowing what the execution and data flow of perch behind the scenes is. Is there some kind of diagram

    to see what calls what and how data is available and when? I'm kind of picking this up function by function and with a lot of trial and error, which is annoying.