CMS Development

kiadesigns
Participant

Gallery in a blog post

SOLVE

I am literally at my wits end and tearing my hair out. I am at the point of completely regretting moving over from wordpress to Hubspot. 

 

All I need is a gallery. I simple gallery, in a blog post. Migration team have said it can't be done. To give context this is my current blog:

 

http://www.kiadesigns.co.uk/interior-design/creating-gender-neutral-childrens-room/

 

Lovely gallery for each section. However having taken this blog over to hubspot I am left with this mess: 

 

http://blog.kiadesigns.co.uk/interior-design/creating-gender-neutral-childrens-room

 

I literally have no idea where to start with sorting this out. Migration team say it's not their job to build custom pieces for the blog. I have stated it doesn't need to be exactly like the previous gallery but it does need to be able to look like a gallery.  I have absolutely no idea where to go from here. 

 

I literally feel like I have flushed money away at this point 

1 Accepted solution
DaniellePeters
Solution
Top Contributor

Gallery in a blog post

SOLVE

Glad to hear it!

 

I do want to note that I've learned that adding HubL to the blog Post Body module is not officially supported by HubSpot so this could potentially lead to issues down the road. If you have several blog posts with this type of format, it's strongly recommended to edit your blog on the template level to reflect that.

View solution in original post

10 Replies 10
PaulClappers
Contributor

Gallery in a blog post

SOLVE

Really weird that you can add a gallery on a landing page and not in a blogpost. Please make it standard!

DaniellePeters
Top Contributor

Gallery in a blog post

SOLVE

Hi there!

 

The best option here would be to add a HubL gallery module directly into your blog post.

 

Edit the source code of the Post Body (click the <> button in the toolbar) and enter something like:

{% gallery "blog_lightbox_1" %} 

Reference here: http://designers.hubspot.com/docs/hubl/hubl-supported-modules#gallery

 

Once you save and refresh the page, you'll see a gallery module appear where you can click into it and configure your slides/lightbox.

For reference you can check out this article (everything after the first screenshot is relevant): https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-can-i-add-a-gallery-module-to-my-...

 

You then may be able to use some CSS to get the individual image thumbnails to match the styles of your original blog.

 

It may also be worth submiting a design triage ticket. You should have gotten information about how to submit one during the migration process.

 

Hope that's helpful!

kiadesigns
Participant

Gallery in a blog post

SOLVE

HI Danielle,

 

I wish any of that worked but it just enters it as text. I have never even had the pleasure of seeing that Gallery module option, not matter where I enter it in the post it simply doesn't work. 

 

I have tried the design ticket approach (for over a month now) and have basically been told that this isn't their job. Even though the blog clearly doesn't look how it is supposed to. It's lead me to really dislike this platform having had such high hopes for it and now having paid out thousands for it. 

 

Thank you so much for taking the time. I wish I could say that worked

0 Upvotes
DaniellePeters
Top Contributor

Gallery in a blog post

SOLVE

Huh, interesting. I happened to test this out on a blog post where I was already using a HubL variable in the source code. 

 

{{ cta("[CTA-ID]") }}

When adding a HubL gallery module to that, it correctly renders the module from the HubL.

 

I then went to a blank blog post and tried it there and it only displayed the text. When I added a fake HubL variable to that, the gallery module rendered correctly.

 

Try adding something like this to the blog post, give the page a refresh, and see if it renders.

{% gallery "gallery" %} {{ test }}

I would be interested to know what the expected behavior for HubL is in blog post bodies, as this seems to point to an inconsistency.

kiadesigns
Participant

Gallery in a blog post

SOLVE

OH MY GOD, THIS HAS ACTUALLY GIVEN ME A GALLERY.

 

SEND ME YOUR ADDRESS DANIELLE YOU DESERVE CHOCOLATE

DaniellePeters
Solution
Top Contributor

Gallery in a blog post

SOLVE

Glad to hear it!

 

I do want to note that I've learned that adding HubL to the blog Post Body module is not officially supported by HubSpot so this could potentially lead to issues down the road. If you have several blog posts with this type of format, it's strongly recommended to edit your blog on the template level to reflect that.

jesh
Participant

Gallery in a blog post

SOLVE

This seems to be broken for me recently. Previously I was able to manually add the gallery code, refresh, and everything was happy days -- but now it deletes all my blog content AND doesn't display the gallery. Anyone else having a similar issue (or have a solution)?

 

Can't believe it's been so many years and HS still haven't implemented an officially supported way of doing galleries in blog posts 😞

carrieanderson
Participant

Gallery in a blog post

SOLVE

It still isn't working... Only text shows up. Suggestions? 

0 Upvotes
Kmoloo
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Gallery in a blog post

SOLVE

I think a lot of people having issues are not REFRESHing the page after adding the hubl into the source code and saving it.

0 Upvotes
Jsum
Key Advisor

Gallery in a blog post

SOLVE

@kiadesigns,

 

Following up on @DaniellePeters's findings, I attempted to set a gallery module in the blog head, export it to the template context, and output it using a HubL variable in the rich text editor using the source code. It was a no go, the variable just came up as text. I guess they build the rich text editor to only recogize certain variables because personalization tokens and some other variables work, but this is not working. 

 

Where are you wanting to place your gallery? if you are ok with displaying it below your content then you can do so by going into your post code and adding the HubL module there, under your content token. 

 

You could also use html to build the gallery, and slick.js to run it, adding the images manually into the html inside the rich text editor's source code. I know this will work. Niether of these options are really "easy" or "simple" though. 

0 Upvotes