The question:
I’m developing Magento 2.1 application with two logos:
- Light logo on the home page.
- Dark logo for all other pages.
By default, theme uses dark logo. I’ve created a custom page layout for home page. In this layout, I attempted to override logo’s logo_file argument. After flushing cache and all static assets, home page does not show logo defined in page layout.
Magento_Theme/layout/default.xml
...
<referenceContainer name="header-wrapper" htmlClass="bmg-header-container bmg-header-inverse container">
<!-- logo -->
<container name="header-logo-container" htmlTag="div" htmlClass="header-logo-container">
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo_dark_sm.png</argument>
<argument name="logo_img_width" xsi:type="number">164</argument>
<argument name="logo_img_height" xsi:type="number">59</argument>
</arguments>
</referenceBlock>
</container>
<!-- /logo -->
...
</referenceContainer>
...
Attempt 1 – Magento_Theme/page_layout/custom_home.xml
...
<referenceContainer name="header-wrapper">
<referenceContainer name="header-logo-container">
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo_light_sm.png</argument>
</arguments>
</referenceBlock>
</referenceContainer>
</referenceContainer>
...
Attempt 2 – Magento_Theme/page_layout/custom_home.xml
...
<referenceContainer name="header-logo-container">
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo_light_sm.png</argument>
</arguments>
</referenceBlock>
</referenceContainer>
...
Any guidance would be much appreciated!
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 1
Create helper to change logo dynamically
Override default.xml in your theme and add helper in logo_file argument
Magento_Theme/layout/default.xml
<argument name="logo_file" xsi:type="helper" helper="VendorModuleHelperData::getLogo"></argument>
In your helper, you can get logo based on current url like this.
<?php
namespace VendorModuleHelper;
class Data extends MagentoFrameworkAppHelperAbstractHelper
{
protected $_request;
public function __construct
(
MagentoFrameworkAppRequestHttp $request
) {
$this->_request = $request;
}
public function getLogo()
{
if ($this->_request->getFullActionName() == 'cms_index_index') {
$logo = 'images/logo_light_sm.png';
} else {
$logo = 'images/logo_dark_sm.png';
}
return $logo;
}
}
Method 2
The better way to do this will be using helper function.
in your Magento_Theme/layout/default.xml you can pass argument for logo like this-
<argument name="logo_file" xsi:type="helper" helper="NamespaceModuleNameHelperData::getLogoImage"></argument>
and then in your helper file you can return logo based on current url, Your helper file-
public function __construct(
MagentoFrameworkViewElementTemplateContext $context,
MagentoFrameworkAppRequestHttp $objectManager
)
{
$this->_objectManager = $objectManager;
}
public function getLogoImage()
{
$fullAction = $this->_objectManager->getFullActionName();;
if($fullAction == 'cms_index_index')
{
$logo = 'images/logo_light_sm.png';
}
else
{
$logo = 'images/logo_dark_sm.png';
}
return $logo;
}
Method 3
I tried, this is working for me very well.
Magento_Cms/layout/cms_index_index.xml:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo_light_sm.png</argument>
</arguments>
</referenceBlock>
</body>
</page>
This solution is no better than creating helper class?
Method 4
I have given configuration to upload Light and dark logo, you can see here:-
System.xml:-
<field id="logo_homepage" translate="label" type="image" sortOrder="20" showInDefault="1" showInWebsite="1" >
<label>Logo For Homepage</label>
<backend_model>YourNamespaceYourModuleModelConfigBackendImage</backend_model>
<base_url type="media" scope_info="1">logo</base_url>
</field>
<field id="logo_otherthan_homepage" translate="label" type="image" sortOrder="20" showInDefault="1" showInWebsite="1" >
<label>Logo For Other Pages</label>
<backend_model>YourNamespaceYourModuleModelConfigBackendImage</backend_model>
<base_url type="media" scope_info="1">logo</base_url>
<comment>Logo except homepage.</comment>
</field>
And then overrided logo.phtml file into my theme. used helper into this .phtml file to set uploaded dark and light logo of the configuration into the src of logo.phtml.
YourNamespaceYourModuleModelConfigBackendImage.php:-
<?php
namespace YourNamespaceYourModuleModelConfigBackend;
class Image extends MagentoConfigModelConfigBackendImage
{
/**
* The tail part of directory path for uploading
*
*/
const UPLOAD_DIR = 'logo'; // Folder save image
/**
* Return path to directory for upload file
*
* @return string
* @throw MagentoFrameworkExceptionLocalizedException
*/
protected function _getUploadDir()
{
return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));
}
/**
* Makes a decision about whether to add info about the scope.
*
* @return boolean
*/
protected function _addWhetherScopeInfo()
{
return true;
}
/**
* Getter for allowed extensions of uploaded files.
*
* @return string[]
*/
protected function _getAllowedExtensions()
{
return ['jpg', 'jpeg', 'gif', 'png', 'svg'];
}
}
YourNamespaceYourModuleHelperData.php:-
<?php
namespace YourNamespaceYourModuleHelper;
use MagentoFrameworkAppHelperAbstractHelper;
use MagentoFrameworkAppConfigScopeConfigInterface;
use MagentoStoreModelScopeInterface;
/**
* Created by Carl Owens ([email protected])
* Company: PartFire Ltd (www.partfire.co.uk)
**/
class Data extends AbstractHelper
{
/**
* @var MagentoFrameworkAppHttpContext
*/
private $httpContext;
/**
* Scope config
*
* @var ScopeConfigInterface
*/
protected $scopeConfig;
const LOGO_HOMEPAGE = 'section/group/logo_homepage';
const LOGO_OTHERTHAN_HOMEPAGE = 'section/group/logo_otherthan_homepage';
const LOGO_FOLDER_NAME = 'logo';
public function __construct(
MagentoFrameworkAppHelperContext $context,
ScopeConfigInterface $scopeConfig,
MagentoFrameworkAppRequestHttp $request
) {
parent::__construct($context);
$this->scopeConfig = $scopeConfig;
$this->_request = $request;
}
public function getLogo()
{
$scope = ScopeInterface::SCOPE_STORE;
$folderName = self::LOGO_FOLDER_NAME;
$logoUrl = '';
if ($this->_request->getFullActionName() == 'cms_index_index') {
$logo = $this->scopeConfig->getValue(self::LOGO_HOMEPAGE, $scope);
} else {
$logo = $this->scopeConfig->getValue(self::LOGO_OTHERTHAN_HOMEPAGE, $scope);
}
if (!empty($logo)) {
$storeLogoPath = $logo;
$path = $folderName . '/' . $storeLogoPath;
$logoUrl = $this->_urlBuilder
->getBaseUrl(['_type' => MagentoFrameworkUrlInterface::URL_TYPE_MEDIA]) . $path;
}
return $logoUrl;
}
}
appdesignfrontendThemnNamespaceThemnameMagento_Themetemplateshtmlheaderlogo.phtml:-
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/**
* @var MagentoThemeBlockHtmlHeaderLogo $block
*/
?>
<?php
$helper = $this->helper('YourNamespaceYourModuleHelperData');
$logoSrc = $helper->getLogo()!='' ? $helper->getLogo() : $block->getLogoSrc() ;
?>
<?php $storeName = $block->getThemeName() ? $block->getThemeName() : $block->getLogoAlt();?>
<span data-action="toggle-nav" class="action nav-toggle"><span><?= /* @escapeNotVerified */ __('Toggle Nav') ?></span></span>
<a
class="logo"
href="<?= $block->getUrl('') ?>"
title="<?= /* @escapeNotVerified */ $storeName ?>"
aria-label="store logo">
<img src="<?= /* @escapeNotVerified */ $logoSrc ?>"
title="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
alt="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
<?= $block->getLogoWidth() ? 'width="' . $block->getLogoWidth() . '"' : '' ?>
<?= $block->getLogoHeight() ? 'height="' . $block->getLogoHeight() . '"' : '' ?>
/>
</a>
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0