Easy block updates for non-coders

Question

I am working on my first Magento 2 theme and all over the place, I find creators hard coding some of their home page blocks into themes. I've found a few examples of custom data in themes where they set this as their home page which is basically some hard coded sections and then styles in CSS for the home page:

    <div class="blocks-promo">
   <a href="{{store url=""}}collections/yoga-new.html" class="block-promo home-main">
       <img src="{{media url="wysiwyg/home/home-main.jpg"}}" alt="" />
       <span class="content bg-white">
           <span class="info">New Luma Yoga Collection</span>
           <strong class="title">Get fit and look fab in new seasonal styles</strong>
           <span class="action more button">Shop New Yoga</span>
       </span>
   </a>
   <div class="block-promo-wrapper block-promo-hp">
       <a href="{{store url=""}}promotions/pants-all.html" class="block-promo home-pants">
           <img src="{{media url="wysiwyg/home/home-pants.jpg"}}" alt="" />
           <span class="content">
               <strong class="title">20% OFF</strong>
               <span class="info">Luma pants when you shop today*</span>
               <span class="action more icon">Shop Pants</span>
           </span>
       </a>
       <a href="{{store url=""}}promotions/tees-all.html" class="block-promo home-t-shirts">
           <span class="image"><img src="{{media url="wysiwyg/home/home-t-shirts.png"}}" alt="" /></span>
           <span class="content">
               <strong class="title">Even more ways to mix and match</strong>
               <span class="info">Buy 3 Luma tees get a 4th free</span>
               <span class="action more icon">Shop Tees</span>
           </span>
       </a>
       <a href="{{store url=""}}collections/erin-recommends.html" class="block-promo home-erin">
           <img src="{{media url="wysiwyg/home/home-erin.jpg"}}" alt="" />
           <span class="content">
               <strong class="title">Take it from Erin</strong>
               <span class="info">Luma founder Erin Renny shares her favorites!</span>
               <span class="action more icon">Shop Erin Recommends</span>
           </span>
       </a>
       <a href="{{store url=""}}collections/performance-fabrics.html" class="block-promo home-performance">
           <img src="{{media url="wysiwyg/home/home-performance.jpg"}}" alt="" />
           <span class="content bg-white">
               <strong class="title">Science meets performance</strong>
               <span class="info">Wicking to raingear, Luma covers&nbsp;you</span>
               <span class="action more icon">Shop Performance</span>
           </span>
       </a>
       <a href="{{store url=""}}collections/eco-friendly.html" class="block-promo home-eco">
           <img src="{{media url="wysiwyg/home/home-eco.jpg"}}" alt="" />
           <span class="content bg-white">
               <strong class="title">Twice around, twice as nice</strong>
               <span class="info">Find conscientious, comfy clothing in our <nobr>eco-friendly</nobr> collection</span>
               <span class="action more icon">Shop Eco-Friendly</span>
           </span>
       </a>
   </div>
</div>
<div class="content-heading">
   <h2 class="title">Hot Sellers</h2>
   <p class="info">Here is what`s trending on Luma right now</p>
</div>

My question is, as a Magento 2 developer (still learning though but can dig into the code and I understand the backend & templates), how can I create a more non-coder friendly home page/widget sections for my clients that will be going in and wanting to change out some images and text for each block on the home page?

I want to create something like this on my home page:

But want to make sure my client can easily change out the image and text.

So I've gone through a bunch of articles and tried to learn more about widgets, blocks and the custom layout XML part of the cms pages.

So far I've only seen that I need to create a block and insert my image and text in there:

Then format the <h1> and <image> with CSS, do this for each cta box I want and then add those to the home page layout update XML section of the cms home page by referencing the container and the blocks I've created:

<referenceContainer name="content.main">
   <block class="Magento\Cms\Block\Block" name="home-cta-one">
       <arguments>
            <argument name="block_id" xsi:type="string">homepage_cta_one</argument>
       </arguments>
   </block>

<block class="Magento\Cms\Block\Block" name="home-cta-two">
       <arguments>
            <argument name="block_id" xsi:type="string">homepage_cta_two</argument>
       </arguments>
   </block>

<block class="Magento\Cms\Block\Block" name="home-cta-three">
       <arguments>
            <argument name="block_id" xsi:type="string">homepage_cta_three</argument>
       </arguments>
   </block>
</referenceContainer>

Then say my client wants to go in an edit the text or image, they can at least change the image but what if they change the heading, or remove the image (then I'd like to have a default image) or any other formatting? There is too much risk of it not looking nice after a client goes in to edit.

Is there no better way to have blocks edited by a non-coder?

Is there a way to have a block where a user can choose an image and the text? Kind of how they choose any of the default block options?

I came across this article on how to create your own custom widget so I'd like to see if I could hard code it to ask for an image and a title & content text. Is that possible?

Or should I create my own module? I've read about this a bit but have no idea how to add fields or dynamic uploads for the image and title/content fields.

Please let me know if I'm explaining this correctly.

Answer 1

Without coding a custom mod, I would recommend placing each individual image and text in separate blocks that your clients can modify individually. That way they can change the images and text but not affect the styling and structure. However, it won't be able to deal with setting a default image if they accidentally delete an image.

I use this particular method so that my content/graphics people don't mess up the rest of the code.

You can either do the main block code on the home page or you can place the code into the main container block.

For example, I would create 7 blocks:

• 1 main block that you call into the homepage and contains all of the structuring code that calls the title and images blocks
• 3 blocks for the image titles
• 3 blocks for the images themselves

Sample code:

<referenceContainer name="content.main">
    <block class="Magento\Cms\Block\Block" name="home-cta-one">
        <arguments>
            <argument name="block_id" xsi:type="string">homepage_cta_one</argument>
            </arguments>
    </block>
</referenceContainer>

block:homepage_cta_one

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 text-center">
            <span class="cts-title">{{block class="Magento\Cms\Block\Block" block_id="hp-cta-one-title"}}</span>
            <br />
            <span class="cts-img">{{block class="Magento\Cms\Block\Block" block_id="hp-cta-one-image"}}</span>
        </div>
    </div>
<div>

block samples are self-explanatory.

block: hp-cta-one-title

My Image Title

block: hp-cta-one-img

<img src="blahblah.png">

Note:

• this can be simplified to 6 blocks by hard coding the main block structure code onto your homepage template in the cms (not .phtml)
• I would set the max height and width on the image to retain the structure even if they were to upload an incorrectly sized image.
• make each block name obvious and clear for your client so they immediately know which blocks to modify

Answer 2

I would recommend creating a basic theme options and having it run through a helper so easily called globally

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Themeoptions',
    __DIR__
);

etc/acl.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Magento_Backend::stores">
                    <resource id="Magento_Backend::stores_settings">
                        <resource id="Magento_Config::config">
                            <resource id="Vendor_Themeoptions::config_vendor_themeoptions" title="themeoptions"/>
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

etc/module.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Themeoptions" setup_version="1.0.0"/>
</config>

etc/config.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <themeoptions>
            <general>
                <textfield/>
                <textarea/>
            </general>
        </themeoptions>
    </default>
</config>

etc/adminhtml/system.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="vendor" sortOrder="1" translate="label">
            <label>Vendor Name</label>
        </tab>
        <section id="themeoptions" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="1" translate="label">
            <label>Theme Options</label>
            <tab>vendor</tab>
            <resource>Vendor_Themeoptions::config_vendor_themeoptions</resource>
            <group id="general" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="1" translate="label">
                <label>General</label>
                <field id="textfield" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="1" translate="label" type="text">
                    <label>Text Field</label>
                    <comment/>
                </field>
                <field id="textarea" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="2" translate="label" type="textarea">
                    <label>Text Area</label>
                    <comment/>
                </field>
            </group>
        </section>
    </system>
</config>

Helper/Config.php

<?php
/**
 * @category Config
 * @package Davagordon_Brandpages
 * @author Dava Gordon <davagordonuk@gmail.com>
 */

namespace Vendor\Themeoptions\Helper;

use \Magento\Framework\App\Helper\Context;
use \Magento\Framework\Exception\LocalizedException as IntegrationException;
use \Magento\Framework\Module\Dir\Reader as ModuleDirReader;

class Config extends \Magento\Framework\App\Helper\AbstractHelper
{

    protected $_config = null;
    protected $scopeConfig;
    protected $_moduleManager;


    public function __construct(
        \Magento\Framework\App\Helper\Context $context,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
        \Magento\Framework\Module\Manager $moduleManager
    ) {
        $this->scopeConfig = $scopeConfig;
        $this->_moduleManager = $moduleManager;
        parent::__construct($context);
    }

    public function getThemeOption($config_path)
    {
        return $this->scopeConfig->getValue(
            $config_path,
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
    }
}