How do I, give the client image placement options

Sometimes I throw in a little inline style option for clients. In this case a floating heading with a colour and position chooser for the client.

    h1.tweak {
        color: <perch:content id="color" type="select" label="Floating Heading Color" options="black, white, grey, orange" default="white" help="Heading Color in case background separation is needed. Default is white" /> !important; 
        text-align: <perch:content id="align" type="select" label="Align text options" options="left, right, center" default="left" help="Position controls" /> !important;
    }

Ian

Thanks for the replies all, this works to a point, but as Simon said. The text doesn't wrap around the photo? Just trying to find a way to make this work.

FIXED!!!!

Simon solution worked a treat I just need to mess around with css a bit, along with not defining size in the content template. The code is below for future reference.

<h1>
  <perch:content id="heading" type="text" label="Heading" required="true" help="Please give the article a descriptive title." />
</h1>

<perch:if id="image_position" value="Full Width" match="eq">
  <div class="content-full-image">
    <img class="full-width-content-img" src="<perch:content id="image" type="image" label="Image" crop="false"/>" alt="<perch:content id="alt" type="text" label="Alt text" />" />
  </div>
</perch:if>

<perch:content id="image_position" type="radio" label="Image Position" options="Left of Text, Full Width, Right of Text" suppress="true" />


<perch:if id="image_position" value="Left of Text" match="eq">
  <img class="content-img-left" src="<perch:content id="image" type="image" label="Image" crop="false"/>" alt="<perch:content id="alt" type="text" label="Alt text" />" />
</perch:if>

<perch:if id="image_position" value="Right of Text" match="eq">
  <img class="content-img-right" src="<perch:content id="image" type="image" label="Image" crop="false"/>" alt="<perch:content id="alt" type="text" label="Alt text" />" />
</perch:if>

<perch:content id="body" type="textarea" label="Body" markdown="true" editor="ckeditor" html="true" help="Use this text area to type your content." size="L" count="words" />

Associated SASS

  .content-full-image
    display: block
    box-sizing: border-box
    height: 300px
    width: 100%

    .full-width-content-img
      width: 100%
      height: 100%
      +object-fit(cover)

  .content-img-left
    width: 350px
    height: 250px
    float: left
    text-align: left
    margin: 0 24px 24px 0
    +object-fit(cover)

  .content-img-right
    width: 350px
    height: 250px
    float: right
    text-align: right
    margin: 0 0 24px 24px
    +object-fit(cover)

Object fit SASS Mixin required (https://github.com/bfred-it/object-fit-images/blob/master/preprocessors/mixin.scss)

Great stuff, well done Grant.

I do something similar, make the heading optional, and make the whole thing a block. Clear that in the CSS and the block is useful for any long-flowing article with images placed as most appropriate or pleasing.

Hi John,

That sounds interesting. Would you mind sharing?

We can forget the block, and simply think of it as a multiple item region.

I use classes and a select box to choose a right or left image, but the idea is the same.

In an article, you wouldn't want required="true" headlines, so mine is a small textarea where section headlines can be chosen.

Otherwise, the idea is the same, with the addition of using the <div class="clearfix"> to clear whatever was in the previous section.

Template:

<div class="clearfix">
    <perch:if exists="heading">
        <perch:content type="textarea" id="heading" label="Heading for article or section" html="true" markdown="true" editor="markitup" size="xs"  />
    </perch:if>
        <figure class="figure <perch:content type="select" id="choose_arrange" label="Choose from Main Image followed by Text, or Text followed by Main Image." options="Image on right with wrapping text|figcap_rt, Image on left with wrapping text|figcap_lft" allowempty="false" html="true" help="To place images right or left in the article with text that will be to one side and then wrap below the image." />" >
            <img class="thumbnail" src="<perch:content type="image" id="image_rt_art" label="Image" title="true" />" alt="<perch:content type="text" id="alt" label="Description" help="A short description will be available to screen readers, aiding accessibility." help="A short and simple description of the image to be used by screen readers. This will not appear on the page."  required="true" />" />
        </figure>
    <div>
        <perch:content type="textarea" id="figtext" label="Add content here" html="true" markdown="true" editor="markitup" size="m" />
    </div>
</div>

clearfix CSS- I must have copied this from the internet as I can't fully explain it exactly as written:

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

If you're interested, my templates often contain the option of a caption and a sub-caption for citing photographer, copyright option, etc. This would be inserted right after the <img> tag:

                <!--Begin caption and citation area-->
                <figcaption class="figure-caption">
                    <p><perch:content id="figure_caption" type="text" label="Caption for the image" help="The caption appears as a line beneath the image." html="true" /></p>
                                        <cite>
                                        <p>
                                            <perch:content type="checkbox" id="copyrightsymbol" value="1" label="Check this box to display the © symbol" suppress="true" checked="checked" />
                                            <perch:if exists="copyrightsymbol">
                                                    <span class="copyright">© </span> 
                                            </perch:if>
                                                    <perch:content id="citation" type="text" label="Artwork Citation or additional info…" help="Complete the copyright information if needed; otherwise, enter whatever information you would like." html="true" />
                                        </p> 
                                    </cite>
                </figcaption>
                <!--End Caption and Citation area-->

Thanks John, It's interesting to see your long form titles and radio options in the labels. I'm usually trying to shave it to a single word but i'm sure some of my clients would prefer the descriptive form.