Discussion on Ikebana - Masonry WordPress Portfolio Theme

satoridesign supports this item

174 comments found.

Hello, Love the theme. Hoping you can help me with the mobile layout. I am only using 1×1 cubes for the portfolio, however it is showing up as rectangles that are cutting off the top and bottom of the 1×1 square on mobile. How can I adjust it so it is 100% height as well as 100% width. Thank you!

I’ve updated the mechanism that calculates the masonry tile sizes on smaller screens, now all image tiles will have equal width and height. I’ll include it into the next version update of Ikebana (3.5); meanwhile, you can download this archive, unzip it, and upload the contained file into the following folder inside your server’s WordPress installation: /wp-content/themes/Ikebana/ replacing the existing file.

Should you have other questions about the theme, do not hesitate to contact me.

I changed the file. It worked but my 1 wide by 2 tall looks like it is now just a 1×1. Its not showing the top half of the tile. Is this correct?

Just checked again, and none of the tiles on mobile are active. I click on them but they do not take me to the project page. Nothing happens when I click on them. This also happens when I minimize the screen size on my laptop.

the page is www.staging9.trishblain.com

I imagine it is a bit tricky but am used to being able to have responsive themes adjust no matter what size the image is.

Seems if it were to adjust the width of each tile to the screen and then max the height it would work for every tile.Not a programmer so have no idea if this is possible. I can adjust my design but just wanted to make sure this is correct!

Thank you so much for your help. I am likely going to reup in a couple of months for the extended support. I’ve appreciated your prompt help! Have a wonderful New Year!

I’ve adjusted the new code so that the links on tiles are clickable and the dimensions of each image tile remain proportional on mobile to their original dimensions, i.e. for example a 2×1 tile will remain 2×1 also on smaller screens. You can download the update here, unzip it, and upload into the same directory as above. Please let me know if this meets your expectations!

Menu not working when viewing on mobile device! The menu loads just fine but is when you try selecting a page within the menu dropdown on mobile, the links don’t work. Nothing happens. Tried on ipad, iphone 6, samsung galaxy, etc… Any ideas here?

Its all of them. The menu works, but you can’t select any item off the menu. Here is one off the showcase website’s on your own support forum: http://www.ljwood.com/ Same thing. Click on menu, then it does drop down like it should, but you can’t select any of the drop down items. Not good.

I cannot seem to be able to reproduce the issue – taking ljwood.com as an example, if I tap on the “Main menu” element and then tap on any of the appearing items, the respective page gets loaded. Could you please tell me the model of your mobile device and the browser you’re using to view the page? Thanks!

Regarding your second question – the theme demo (http://satoristudio.net/ikebana/) uses the same code as is found in the ThemeForest distributable. Please clarify what you mean by “not using the mobile responsive view”, ideally with a screenshot – I will be happy to investigate the matter further.

there indeed seems to be a drop-down javascript but on Apple devices, thank you for the heads-up! I’ve rewritten the drop-down menu script completely to fix this, please find the updated file here – download the archive, unzip it, and upload the resulting file into the following folder inside your WordPress install: /wp-content/themes/Ikebana/includes/dropdown-menus/ – replacing the existing file. After than refresh the web page and let me know if the issue still persists.

To clarify: if you tap on the mobile menu drop-down, pick an option in the carousel that opens in the bottom of the screen, and then tap on “done” in the top right corner of that carousel, nothing happens? Could you please provide the URL of the website in question, and also try using the theme demo’s mobile menu (http://satoristudio.net/ikebana/) from your mobile device. Thanks!

Okay, its the same but maybe the menu carousel doesn’t work the way I think it does, or should.

So when i click on the Menu bar, it drops down to all the pages in a menu carousel, then I scroll with my finger to the correct page I ‘tap’ that selection and nothing happens. All I see at the top of the pages carousel is an up ^ or down arrow and an X to the right. There isn’t any selection for ‘done’ as you say. HOWEVER when I tap on either the up or down arrow it does go to whatever page I had ‘fingered’ to on the carousel.

This is confusing as no one I’ve had try thinks to click on the up or down arrow since it appears its to go up or down, much like the X is common for closing. Is there any way to replace the up and down with DONE. Or SELECT. Or something more recognizable???

... continued from last reply. I see an issue: When viewing mobile on Chrome the ‘up down’ arrows and the X are on the upper right part of the page’s carousel. When viewing in Safari on the same iPhone the ‘up down’ arrows are on the upper left of the carousel and the word Done is on the upper right. So perhaps this is a Chrome issue as I can deal with clicking the word Done, but it doesn’t show Done in Chrome, only an X.

I’ve decided to completely redo the mobile menus in Ikebana to avoid any sorts of cross-device problems. Please download this archive, unzip it, and upload the files into the same location as above (/wp-content/themes/Ikebana/) replacing the existing file. Let me know if this version works in a more coherent fashion.

Okay well now the home page (Portfolio) is all messed up on a desktop and laptop. The squares all stack one by one on top of each other, the image slide square doesn’t load, the text overlay on one of the squares is showing way down at the bottom stacked under the last square.

The mobile side is great except for the Samsung 4 that I noticed, the iPhone works good.

Please advise. Clearly something is affecting the home/portfolio on a computer since I replaced those files. Thank you again in advance.

glad to hear it works as intended! I’ve submitted an update of the theme containing, among other things, the new mobile menu, to ThemeForest, it should be available to all buyers by the end of the week.

Should you face other issues or have further questions about Ikebana, do not hesitate to contact me!

Hey Mackmorg,
could you please message me using the box in the right panel of my profile page (http://themeforest.net/user/satoridesign) – I will send you the entire set of the most recent Ikebana files, to update and see if it works as intended if all files are up to date. Thanks!

Does somebody achieve to put a slider in a Masonry homepage? How to do that?
I’m trying with Nivo_slider shortcode but doesn’t show in homepage. Only can see its project page and also duplicate separate images below the slider

the slide gallery in the Ikebana demo grid is using the “gallery” post format, not the Nivo slider (which is a separate shortcode designed for inserting sliders inside the contents of a page or a post, not a portfolio tile). In order to avoid duplicate images inside the project, simply remove the image tags from the content area of the said project – the gallery slider will still show up since the images remain associated with that project.

1). This is a known bug; my apologies for the inconvenience. Please try the fix posted by me in the support forums here and let me know if it works in your case.

2). Tiles that have no thumbnails are intended to display the content in Ikebana, but now that you’ve mentioned it I think it would be a good idea to include an option to display some text other than content in the tile, if needed. Please try downloading this archive, unzipping it and uploading the resulting file into the theme folder inside your WordPress install via an FTP client or your hosting’s file management tool: /wp-content/themes/Ikebana/ – replacing the existing file.

Notice: tgmpa was called with an argument that is deprecated since version 2.4.0! The `parent_menu_slug` config parameter was removed in TGMPA 2.4.0. In TGMPA 2.5.0 an alternative was (re-)introduced. Please adjust your configuration. For more information visit the website: http://tgmpluginactivation.com/configuration/#h-configuration-options. in /home/fourcg/public_html/wp-includes/functions.php on line 3737

Notice: tgmpa was called with an argument that is deprecated since version 2.4.0! The `parent_url_slug` config parameter was removed in TGMPA 2.4.0. In TGMPA 2.5.0 an alternative was (re-)introduced. Please adjust your configuration. For more information visit the website: http://tgmpluginactivation.com/configuration/#h-configuration-options. in /home/fourcg/public_html/wp-includes/functions.php on line 3737

And nope, the excerpt text is not used on the home page at all. Is there another fix for it?

could you please email me at support[at]satoristudio.net with the url of your website and the admin credentials (login and password) – I will be able to troubleshoot this more efficiently if I see the back-end. Thanks!

1). I’ve replaced the specific piece of code in the “functions.php” file and now the sticky option can be switched off. This fix will also be present in the subsequent theme updates, so no worries regarding compatibility.

2). You’ve been changing the parent theme’s “content.php” file, yet since you are using a child theme which contains a custom file with the same name, that one had to be changed, sorry for not mentioning that in my instructions. In any case, I’ve made the changes and the excerpts in tiles now show as intended.

3). Regarding the latest question: by default WordPress does not allow removing custom post type url base slugs completely, yet there are ways to do that, for example this plugin.

according to the code of the Simply Exclude plugin (see this file, line 1817) the checkbox to exclude from the “Tag cloud” widgets is only rendered by the plugin for the standard WP taxonomies, i.e. categories and native tags; in other words, this plugin does not have that setting for the custom taxonomies by design.

displaying project tags on projects is not a back-end feature of Ikebana at this time, you can either insert a custom piece of code into the “single-project.php” template file, e.g. something like this, or manually mention the term on each of the project pages.

Hi Andrii,
I purchased and love ikebana. It’s coming together nicely for me. I do have two questions for you.

1) I’d like to have two portfolio pages. One a default home page at my top domain page, the other a secondary portfolio page with specific projects in that portfolio that DO NOT appear on the home page. How do I exclude projects from the home portfolio and include ONLY those projects on the secondary portfolio? I’ve looked through the pdf manual and the options within my wordpress backend and I don’t see how to do this.

2) I’d like to do image projects with a featured image that displays on the portfolio but, when the image is clicked, a more detailed/text overlaid image appear in the lightbox. Is this possible? I can insert media into the project and have that display, in the preview on the grid and the lightbox that opens, or I can use a featured image and have THAT display in the preview and lightbox but I can’t get it to preview one and lightbox the other.

1). Ikebana does not offer this out-of-the-box yet, but we have this in our backlog and are planning to implement the multiple portfolio page feature in the future release of the theme. Meanwhile, you can consult this support forum thread for instructions. Please note that any custom changes to the theme are better implemented via a child theme, in order to make them as manageable as possible.

2). If I understood correctly, you need some grid items to display one image as a background and another one in the lightbox that appears on click. If this is the case, the theme files will need modifications again – the plugin that is used to render lightboxes in the theme does not feature such kind of functionality out of the box. The line that needs to be modified is “content-image.php” inside the root theme directory (i.e. Ikebana). On line 78, you’ll find:

<a href="<?php echo $imageformat; ?>">
</a>

You’ll can replace the ”$imageformat” with whatever you need to render in the link which opens the lightbox, i.e. the project thumbnail:

Thanks for the reply. I got the first question solved with your great instructions on your support forum. It is working beautifully.

The second question, I don’t fully understand your solution. I’ve got the .php file open but I don’t understand the code well enough to know what I need to sub in for ”$imageformat”. When you put “the_post_thumbnail” what would I need to put there for the media file attached to the project/post to display in the lightbox instead of the featured image?

Again, just to describe the issue as clearly as I can. For an “Image” type project, I’d like the “Featured Image” to display in the grid on the portfolio, but I’d like a file attached in the project itself (the same image but watermarked) to display in the lightbox after a click on the grid image. For any given project, if I don’t chose a featured image the watermarked image included in the project itself will display in the grid and also the lightbox. When I DO chose a featured image that image overrides the image in the project (the watermarked one) and displays in the lightbox after the click. I’m trying to get the featured image to display in the grid and the attached image to display in the lightbox. Does that make sense?

thank you for the clarification, I’ve decided it’d be more efficient to implement it instead of explaining: please download this custom file I’ve made for you, unzip it, and upload the resulting .php file into the root theme folder (/wp-content/themes/Ikebana/) inside your WP instance, replacing the existing file when prompted.

Thanks for the work and for editing that .php file for me. The new file didn’t solve my problem BUT I did find a workaround. Instead of making the project an “image” project, I just changed it to a “link” project and used the link to the media file as the url on my site. That way the featured image stays the same and the link goes to the different image hosted on my site so it appears in the lightbox since wordpress just sees it as an image link. It’s working perfectly now.

for the sake of consistency, here’s a second take on the custom solution; I’ve tried it on a fresh install and it works as you’ve described, yet the solution you’ve found is also perfectly valid, glad to hear that one’s resolved

thank you for expressing interest in Ikebana!
It is possible to have external links inside text tiles and/or image tiles linking to external URLs in the theme. For the latter, the “link” post format can be used.

Should you have other questions about the theme, do not hesitate to contact me!

Hi there Im after a masonry theme and this looks great. I do have one question if its possible to get an answer? Is it possible to make the homepage tiles only, getting rid of the menu, top bar, footer etc etc ? I need this for desktop and mobile. Thank you in advance

The header will not appear if there is no menu, social icons and search box defined, the icon menu is hidden by default, unless at least one icon menu item has been created, the copyright area will not appear if no copyright statement has been defined in the theme options, and the footer widget area can be removed by adding this line of custom CSS to the “Style: Add Custom CSS” tab of the Theme Options panel:

#container-footer { display: none !important; }

Should you have more questions about the theme, do not hesitate to contact me.

The theme does not expressly support RTL languages at the moment, yet I’ve known people to use it for websites in Arabic and other RTL tongues. All text strings in Ikebana are wrapped into proper WordPress localization functions, so it does support third-party translation plugins.

Should you have other questions about the theme, do not hesitate to contact me!

thank you for choosing Ikebana!
The content width can be adjusted using the “Maximum content width” option in the “Page Elements” tab of the Theme Options panel.
A portfolio project of “link” format with a thumbnail (featured image) will appear in the grid as an image tile linking to an external URL.

Should you have other questions about the theme, do not hesitate to contact me!

1. I was able to make the content width wider but there is still a large border that is big enough for 1-2 more columns (on desktop) . I set the width to 9999999.

2. On mobile, when in landscape mode the border is minimal and looks great. However, when i rotate the phone it switches to a single column that is the width of the screen. The boxes are huge and should only be about 1/4 of the size. How do I fix this?

1). Could you please provide the URL of the page in question, as well as a screenshot of how it looks on your device? Also, it will help if you could tell me the screen width, in pixels.

2). On smaller screens, the tiles with images retain the aspect ratios of the images, so as not to crop the image in unnecessary places, i.e. if the tile is a square on larger screens it will remain a square on mobile screens, with the height dictated by the width of the smartphone’s screen; text-only tiles will wrap their text, i.e. their height will depend on the number of words they contain. If this is not the case on your instance of Ikebana, please provide a screenshot, I will look into the issue

4). A setting for this hasn’t been envisaged yet, but you can achieve the effect by adding this code to the “Style: Add Custom CSS” tab of the Theme Options panel:

The system adds a 90px minimum margin on both sides of the screen for aesthetic purposes, plus anything that did not fit into a full tile width (e.g. if the screen width is 1000px and tile width is 120px then the system will take 1000-90-90=820 pixels as the base width (subtracting the margins here) and then determine the maximum number of full tiles that can fit (6), so there will be 6 tiles per row totalling 720px and (1000-720)/2 = 140px side margins. Given this, the layout presented on the screenshot looks as planned in the algorithm. In case you need to eliminate the side margins, you can tweak the $minmargin variable on line 814 of the “header-functions.php” theme file.

5. On the portfolio page, any text or images I add comes up at the top of the page with the grid below it. How can I swap that and keep the grid on the top with any text or images showing beneath the grid?

the content comes before the grid by design, at the moment there’s no setting to switch the order; however, it’s technically doable, e.g. by moving the content of lines 7-12 to line 95 in the “page_portfolio.php” theme file, preferably using a child theme.

Hi. I’m having trouble with the mobile version of the theme. When you filter the results on the portfolio page, it doesn’t scroll at all. I’m seeing the same problem is also on your demo site on mobile, so you can see what I’m talking about. What could be wrong with it?

can you please clarify – the page can’t be scrolled at all after tapping on any of the filters above the grid? Could you please also mention which device (and browser you’re using to view the website). Thanks!

Sure, I’m using chrome on android. You can have a look at my page here (http://andirrashi.me/). If you open the mobile version of the site and try to filter the results by the filters (graphic design, illustration ….) and then try to scroll down you’ll see what I mean. The same issue seems to happen on the demo site as well when i visit it from my android phone …

Thank you very much for the response and I am terribly sorry. There apparently seems to be something wrong with my device because I tested the site with another android device and as you said it is working fine. Anyway, I’m sorry and thanks for your reply

Btw, is there any possibility to replace the videos playable in tiles with a dummy player because I can see that they are significantly adding to the loading time of the page?

could you please tell me your smartphone model – we’ll investigate this further

Regarding your second question – could you please clarify what you mean by a dummy player? In case you need to replace the videos with static, automatically generated video screenshots, you can untick the “Playable video in masonry tile (only for “video” format)” checkbox in the project edit mode.

What I mean is, I used a video from youtube and apparently the javascript for youtube player is almost 1mb (the browser waits for the file to download and then loads the page). Now I know that I can uncheck that box, but I’m saying if there is a way to download the javascript for the youtube player only after a user presses the play button … I hope my explanation was clear …

thank you for the clarification! Indeed, YouTube loads its scripts and other files together with the video on page load by default, and there are indeed ways of loading them asynchronously; we will add this to the theme development backlog and implement it in the next version update. Meanwhile, just in case, here are a couple solutions (here and here), if you feel like taking a go at it yourself as well.

Hello, I’m currently using version 1.5 I believe and am about to upgrade to your latest release. Is there anything specific I need to watch for, or will the upgrade work seamlessly and not affect the Portfolio (home page) for example, and sidebars, etc. or do I need to plan on some down time while I re-set things up in the Admin section. Thank you in advance for your advice.

every Ikebana update is planned in such a fashion so as to work seamlessly on existing websites, yet it’s always recommended to make a backup of the website prior to any major updates (and maintain regular backups in general) – if you’re not yet doing so, I can recommend the free Updraft Plus plugin for this purpose – been using it myself on dozens of websites for years.

In case something does come up after the update, do not hesitate to contact me, will be glad to help.

This is a known issue, and has been corrected in theme version 3.6. Please update the theme using the freshest source available in the “Downloads” tab of your ThemeForest account, and either overwrite the old theme files via an ftp client (like FileZilla) or uninstall the theme and install it anew (don’t forget to make a full backup of the website before doing any updating!).