attachments - How to add a custom field for image in "Text and Full Image(text right)" layout?

admin管理员组

文章数量:1301510

I need add another image in the standard "Text and Full Image(text right) layout" in WordPress. This layout by default has a field for an image. I located the php file that renders this page which is text-and-full-image-text-right.php Is there a way I can add a new image field in this standard layout? The Screenshot below shows you where I need to place my new image. I know how to use custom fields in a template, but not sure how to use them in the layouts/rows in the edit screen?

How to override the following WordPress core file to add a custom image field in the layout shown by the image above.

<?php
$headline = get_sub_field( 'headline' );
$text_area = get_sub_field( 'text_area' );
$link = get_sub_field( 'cta' );
$image = get_sub_field( 'image' );
?>

<div class="bg-white-base">
  <div class="wrap-x">
    <div class="inside">
      <div class="row middle-xs mb0">
        
        <?php if($image): ?>
        <div class="col col-xs-12 col-md-6 mb0 col-img ">
          <picture>
            <source media="(max-width: 360px)" srcset="<?php echo($image['sizes']['xsmall']); ?>">
            <source media="(max-width: 668px)" srcset="<?php echo($image['sizes']['small']); ?>">
            <source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
            <source media="(max-width: 1280px)" srcset="<?php echo($image['sizes']['large']); ?>">
            <source srcset="<?php echo($image['sizes']['xlarge']); ?>">
            <img src="<?php echo($image['sizes']['xlarge']); ?>" alt="<?php echo $image['alt']; ?>" class="m-auto" />
          </picture>
        </div>
        <?php endif; ?>
        
        <div class="col col-xs-12 col-md-6 mb0">
          <div class="pt2x"></div>
          
          <?php if($headline): ?>
          <h2 class="mb0 color-tan-darkest alt-heading h5">
            <?php echo $headline; ?>
          </h2>
          <?php endif; ?>
          
          <?php if($text_area): ?>
          <article class="body-area mt">
            <?php echo $text_area; ?>
          </article>
          <?php endif; ?>
          
          <?php if($link): ?>
          <div class="mt2x">
            <a href="<?php echo $link['url']; ?>" target="<?php echo $link['target']; ?>" class="btn btn-tan" role="button">
              <?php echo $link['title']; ?>
            </a>
          </div>
          <?php endif; ?>
          
          <div class="pb2x"></div>
        </div>
        

        
      </div>
    </div>
  </div>
</div>

I need add another image in the standard "Text and Full Image(text right) layout" in WordPress. This layout by default has a field for an image. I located the php file that renders this page which is text-and-full-image-text-right.php Is there a way I can add a new image field in this standard layout? The Screenshot below shows you where I need to place my new image. I know how to use custom fields in a template, but not sure how to use them in the layouts/rows in the edit screen?

How to override the following WordPress core file to add a custom image field in the layout shown by the image above.

<?php
$headline = get_sub_field( 'headline' );
$text_area = get_sub_field( 'text_area' );
$link = get_sub_field( 'cta' );
$image = get_sub_field( 'image' );
?>

<div class="bg-white-base">
  <div class="wrap-x">
    <div class="inside">
      <div class="row middle-xs mb0">
        
        <?php if($image): ?>
        <div class="col col-xs-12 col-md-6 mb0 col-img ">
          <picture>
            <source media="(max-width: 360px)" srcset="<?php echo($image['sizes']['xsmall']); ?>">
            <source media="(max-width: 668px)" srcset="<?php echo($image['sizes']['small']); ?>">
            <source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
            <source media="(max-width: 1280px)" srcset="<?php echo($image['sizes']['large']); ?>">
            <source srcset="<?php echo($image['sizes']['xlarge']); ?>">
            <img src="<?php echo($image['sizes']['xlarge']); ?>" alt="<?php echo $image['alt']; ?>" class="m-auto" />
          </picture>
        </div>
        <?php endif; ?>
        
        <div class="col col-xs-12 col-md-6 mb0">
          <div class="pt2x"></div>
          
          <?php if($headline): ?>
          <h2 class="mb0 color-tan-darkest alt-heading h5">
            <?php echo $headline; ?>
          </h2>
          <?php endif; ?>
          
          <?php if($text_area): ?>
          <article class="body-area mt">
            <?php echo $text_area; ?>
          </article>
          <?php endif; ?>
          
          <?php if($link): ?>
          <div class="mt2x">
            <a href="<?php echo $link['url']; ?>" target="<?php echo $link['target']; ?>" class="btn btn-tan" role="button">
              <?php echo $link['title']; ?>
            </a>
          </div>
          <?php endif; ?>
          
          <div class="pb2x"></div>
        </div>
        

        
      </div>
    </div>
  </div>
</div>

• advanced-custom-fields
• attachments

Share Improve this question edited Mar 13, 2021 at 11:37 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Mar 13, 2021 at 7:18 CodeForGoodCodeForGood 12366 bronze badges 3

• That is not a WordPress core file. It looks more like one from the Advanced Custom Fields plugin. – fuxia ♦ Commented Mar 13, 2021 at 11:38
• Yes, you are right about it being a file from advanced Custom Fields plugin. – CodeForGood Commented Mar 13, 2021 at 11:44
• @fuxia, Hi, I've a WordPress page built with DIVI builder that has multiple <title> tags as verified with its view source page. I don't find the <title> tag in the Divi builder's sections so I can remove the duplicates. Can you share your thoughts on locating the full HTML of this page andersonadvisors/… in the WordPress admin or Divi builder? – CodeForGood Commented Oct 16, 2022 at 5:05

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I had to copy the existing flexible layout to add two new fields using the Advanced Custom Fields plugin. It is also required to have the relevant PHP file copied and modified to display the new field contents.

本文标签： attachmentsHow to add a custom field for image in quotText and Full Image(text right)quot layout