Adding The Logo Dynamically
Alternatively, you can add the logo dynamically, which will pull the logo(s) uploaded through the Global Options. This can be advantageous in more complex headers, with the need for various logos and sizes, but there will be a small price to pay on page load. To get started with this method of adding your logo to a header layout, click the data icon next to the Option title, as seen directly below.
This will replace the Upload image button with a Select Dynamic Content dropdown. To see the full options for the Logo data type, click on Logo from the dropdown list.
This brings you to this screen, where you can choose exactly what data you’d like to pull into the Element.
You can choose from Default (Normal), Default (Retina), Sticky (Normal), Sticky (Retina), Mobile (Normal), Mobile (Retina), or All. What to choose here will depend on your Layout, and what you are trying to achieve.
Default (Normal) – This will pull the Default logo added to the Global Options. It will display at its original size throughout the site, including on sticky headers and on all responsive views.
Default (Retina) – This is the same as default, but pulls the Retina version. Using this with a combination of the Max Width option is an easy way to have a Retina Ready logo sitewide.
Sticky (Normal) – You’d probably only select this one if you were building multiple header layouts and using Visibility options to show a specific Sticky Logo. In most cases, it would be easier to just set the Data set to All, and upload a Sticky Logo there.
Sticky (Retina) – As above.
Mobile (Normal) – You might use this if you wanted to build a specific mobile header, and having it only show on mobile layouts.
Mobile (Retina) – As above.
All – This is a great option if you have uploaded multiple versions of the logo through the global options. It will pull the most relevant one in the situation; ie. it will pull the mobile logo when the mobile header is active, and the Sticky logo when a sticky header is active etc. To use All, you don’t have to upload all versions of the logo through the global options. This will just pull the ones that have been added.
So, as you can see, the Image Element is now a powerful tool to help set your logo throughout the theme when using a custom layout.
If you have just one header layout, the best option is either uploading a logo as an image (either normal or retina version as described above) or adding the image via dynamic content, using the ‘All’ dataset, and adding your desired logos in the global options.
If you have multiple headers in your layout, using visibility options to control when they are shown, then the single data set options will be the ones you want, to show the various versions of the logo when the visibility optioins kick in.