Forum

Thread tagged as: Question

How do I, give the client image placement options

Hi,

I am looking for a way to give the client/user some options for placing images within the content area. For now, let say I'm after the following:

a: full-width image between the title element and the content area b: smaller image placed on the left of the content area, with text flowing around the image c: same as 'b', but aligned to the right

I think I can achieve this using blocks. However, I have hit an issue. Currently, this is my standard content area code:

<h1>
  <perch:content id="heading" type="text" label="Heading" required="true"
  help="Please give the article a descriptive title." />
  </h1>
<p>
  <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" />
</p>
<perch:blocks>

  <!-- INTERNAL CTA -->
  <perch:block type="internal-cta" label="Internal call to action">
    <div class="cta">
      <div class="container">
        <div class="cta-text">
          <p>
            <perch:content id="cta-text" type="text" label="Call to action text" required="true" help="Please give your Call to Action some text. Maximum 130 charactors" chars="130" append="…" />
          </p>
        </div>
        <div class="button cta-button">
          <a href="<perch:content id="link" type="pagelist" label="Page"  help="Please select the page you wish to link to." required="true" />" class="button" target="_self">
            <perch:content id="button" type="text" label="Button text" help="e.g See More" required="true" />
          </a>
        </div>
      </div>
    </div>
  </perch:block><!-- END INTERNAL CTA -->

<!-- EXTERNAL CTA -->
  <perch:block type="external-cta" label="External call to action">
    <div class="cta">
      <div class="container">
        <div class="cta-text">
          <p>
            <perch:content id="cta-text" type="text" label="Call to action text" required="true" help="Please give your Call to Action some text. Maximum 130 charactors" chars="130" append="…"/>
          </p>
        </div>
        <div class="button cta-button">
          <a href="https://<perch:content id="url" type="text" label="Website url" required="true" replace="https://| " help="e.g. www.theglobelibrarystokesley.org"/>" class="button" target="_blank">
            <perch:content id="button" type="text" label="Button text" help="e.g See More" required="true"/>
          </a>
        </div>
      </div>
    </div>
  </perch:block><!-- END INTERNAL CTA -->

  <!-- INTERNAL BUTTON -->
  <perch:block type="internal-button" label="Internal button">
    <div class="button cta-button">
      <a href="<perch:content id="link" type="pagelist" label="Page"  help="Please select the page you wish to link to." required="true" />" class="button" target="_self">
        <perch:content id="button" type="text" label="Button text" help="e.g See More" required="true" />
      </a>
    </div>
  </perch:block><!-- END INTERNAL BUTTON -->

  <!-- EXTERNAL BUTTON -->
  <perch:block type="external-button" label="External button">
    <div class="button cta-button">
      <a href="https://<perch:content id="url" type="text" label="Website url" required="true" replace="https://| " help="e.g. www.theglobelibrarystokesley.org"/>" class="button" target="_blank">
        <perch:content id="button" type="text" label="Button text" help="e.g See More" required="true"/>
      </a>
    </div>
  </perch:block><!-- END EXTERNAL BUTTON -->

  <perch:block type="full-image" label="Full Width Image">
    <img class="full-width-content-img" src="<perch:content id="full-width-image" type="image" label="Full Width Page Image" width="100%" height="300px" crop="false"/>" alt="<perch:content id="alt" type="text" label="Alt text" />" />
  </perch:block>
</perch:blocks>

You'll see there isn't anything that special here:

  • A title
  • Content area
  • Call to action options
  • Button options
  • and my attempt at a full with image block.

This kind of works, however, I cannot arrange the image block inbetween the title and content area. I could make them blocks as well. However, I wonder if that isn't particularly user friendly? As they are going to have to add them to every page they create. I'm concerned they may not realise these are required?

Is there a better way?

Grant Smith

Grant Smith 0 points

  • 3 years ago
Simon Clay

Simon Clay 127 points

Hi Grant,

You could remove the image from blocks and use perch:if to allow the editor to choose where the image should go.

The challenge will be getting the text to flow around the image. Normally you don't wrap a Perch textarea in <p> because the editor will put it's own ones in automatically. Maybe you've found a way to get around this somehow with markdown="true"?

That issue aside, here's how you'd give the options...

<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">
  <img class="full-width-content-img" src="<perch:content id="image" type="image" label="Image" width="100%" height="300px" crop="false"/>" alt="<perch:content id="alt" type="text" label="Alt text" />" />
</perch:if>

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

<p>
<perch:if id="image_position" value="Left of Text" match="eq">
  <img class="half-width-content-img float-left" src="<perch:content id="image" type="image" label="Image" width="300px" 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="half-width-content-img float-right" src="<perch:content id="image" type="image" label="Image" width="300px" 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" />
</p>

<!--Then your CTA blocks-->

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)

Simon Clay

Simon Clay 127 points

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.