[Resolved] Remote Hosting of Logo

[simit]

hello,

we have a situation in which we cannot host files using WP uploads, and so are relying on remote storage (i.e. AWS and google cloud storage). is there a way we can add a logo by providing a logo URL, rather than the upload logo tool provided in the theme customizer?

thanks in advance for your help!

simit

[Leo]

Hi there,

You should be able to use this filter:
https://docs.generatepress.com/article/generate_logo_output/#examples

Let me know if this helps 🙂

[simit]

hi leo, thanks for your reply. i added the code below via the code snippets plugin. however, it doesn’t seem to be working on my site (https://sixjupiter.wpengine.com). any thoughts?

add_filter( 'generate_logo_output', 'tu_logo_class', 10, 3 );
function tu_logo_class( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="site-logo MY-CUSTOM-CLASS">
			<a href="%1$s" title="%2$s" rel="home">
				<img src = "https://storage.googleapis.com/sjn-charts/dfx2/cfdt-s.png">
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
	);
}

[Leo]

Are you able to upload any image in the logo field in the customizer?

Looks like the filter doesn’t kick in until an image is uploaded as logo.

Let me know 🙂

[simit]

hi leo, thanks for your reply. no, we cannot rely on wp-uploads at all. basically, all image storage needs to be on AWS. any ideas?

[Leo]

That case we would need to add the logo manually.

Try creating a new hook element:
https://docs.generatepress.com/article/hooks-element-overview/

And add this as the content:

<div class="site-logo">
    <a href="HOME-PAGE-URL" title="SITE-TITLE" rel="home">
	<img src = "https://storage.googleapis.com/sjn-charts/dfx2/cfdt-s.png">
    </a>
</div>

Then select inside_navigation as the hook.

Let me know when this is done and we can tweak the appearance with some CSS.

[simit]

i got it working, but do you know what CSS i can add to make it left-aligned and side by side with the rest of the navigation? sort of like how the logo typically appears when added via the upload utility?

[Leo]

Just checked the site and not seeing the logo.

Can you double check?

[simit]

hi leo, i had temporarily unpublished it before, but made it visible again. you should be able to see the logo here: https://sixjupiter.wpengine.com/

the remote file on google cloud storage is here: https://storage.googleapis.com/sjn-charts/cfdt-l3.png

[Leo]

Can you make sure to copy and paste my HTML here so we have the required class to target the CSS with?
https://generatepress.com/forums/topic/remote-hosting-of-logo/#post-1103502

Once you do that then this CSS should work:

.site-logo {
    float: left;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[simit]

hi leo,

thanks for your patience and help thus far — i really appreciate it. the changes seem to have helped a bit, but do you know how i can get logo and nav links side by side (i.e. horizontally aligned) rather than stacked atop each other? https://sixjupiter.wpengine.com/

[Leo]

I feel like there is a mistake in the HTML code. Perhaps it’s missing a closing </div>?

Can you make sure to copy and paste my code here?
https://generatepress.com/forums/topic/remote-hosting-of-logo/#post-1103502

[simit]

ahh, i’m an idiot! 🙂 thanks for your patience with me. problem is solved now. 🙂

[Leo]

No problem 🙂

[Author]

Posts