makfak

makfak supports this item

Supported

1011 comments found.

Hi, is it possible to have a caption appear under each thumbnail image in the mosaic instead of appearing on hover? Is there anyway I can see a demo of this before buying the plugin?

Also, on your demo page I see that you have all the setting options for a prospective buyer to try out, but when actually using the plugin on a site a visitor will not be shown all those options, correct? It would be up to me to set them on the backend? I don’t think I want to give my site visitors the same amount of control over how the images are displayed as you do on your demo page.

The “tooltip” has nothing to do with the CSS – it’s what the browser does when the mouse is positioned over an element with a TITLE attribute. To remove that tooltip you need to empty the TITLE attrs.

If you’re using the snippet from the FAQ, replace the code in your onReady Callback with the following…

function($, $mosaic, $items){
    $items.each(function () {
        var $a = $(this);
        var $img = $a.find('img');
        var $caption_wrapper = $('<div class="photomosaic-caption-wrapper" />');
        var $caption = $('<div class="photomosaic-caption" />');
        $caption.text( $img.attr('title') );
        $caption_wrapper.append($caption);
        $a.append($caption_wrapper);
        $img.attr('title', '');
        $a.attr('title', '');
    });
}

The work is being done by those last two lines.

$img.attr('title', '');
$a.attr('title', '');

You should be aware that many lightbox scripts look for captions in the TITLE attribute. Emptying those attrs could cause captions to stop appearing in your lightbox.

Thank you very much for that code! You were right, this code does eliminate the captions within your built in lightbox. I tried the four other lightbox plugin alternatives mentioned on your settings page and am happy to report that Photoswipe works great (the other three did not show captions). Actually I am using the Simple Photoswipe 0.1 plugin by Tobias Cichon, which is based on the Photoswipe script by Dmitry Semenov currently under development and not in the WP plugin repository.

I was a little concerned about Simple Photoswipe because it has not been updated in a year or tested with WP 4.4 and it has mixed user reviews. But for me its working excellent so far. Captions show up both under the thumbs and within the lightbox, which by the way looks and works very well on mobile devices.

There is one odd thing about captions I noticed: if I post a gallery with captions and then change the caption text after the post is published, the new text does not show up, the original caption text continues to be displayed after a re-publish (I checked the updated post in another browser so its not a browser caching issue). But if I edit the gallery and add another image with a caption, then re-publish, all of the caption changes I made earlier now show up along with the new image. I doubt I’ll be changing caption text that much so this is not a big problem, I just wanted to mention it in case you want check it out on your end.

Anyhow, thanks again for all your help. I plan to rate your plugin 5 stars and will probably purchase an additional license for another image related blog I’m thinking of doing later this year.

PhotoMosaic uses WP transients to cache the gallery data (because it’s an expensive lookup). The transient is set to expire every hour so you should see your caption change no longer than an hour after it’s made but I’ve had a couple reports where people said it was never appearing. I’m looking into it. In the meantime you can get WP to create a new transient by adding an arbitrary attribute to the shortcode…

[gallery ... cache="1"]

If the caption hasn’t updated by now try cache-busting the shortcode. That should work.

Hi makfak,

I have different albums. The images in each album have different layout and sorted in a certain way.

Is there a way to get the images sorted and ordered in a specific way. I tried all the combinations between the available options but I couldn’t reach the design and layout I am intending to have.

Example: please take a look at the following link, how can i have the images ordered in this layout for example (you can ignore the first image. I inserted it as a normal image without using photomosaic).

https://www.dropbox.com/s/swijri4sjseyoz8/example_layout.jpg?dl=0

There seems to be some confusion in your post about layout and order. They aren’t the same thing. PhotoMosaic’s default layout would be described as “columns” while the default order is set to “rows”. That looks like this…

-------------
|   | 2 |   |
| 1 |---| 3 |
|   |   |   |
|---| 5 |---|
| 4 |   |   |
|---|---| 6 |
|   |   |   |
| 7 | 8 |---|
|   |   | 9 |
-------------

As long as you haven’t set order to “random”, PhotoMosaic will honor the image order that is set in the shortcode.

The layout you linked doesn’t have an intrinsic order. Looking at the last two “rows” it looks like the intrinsic order is rows…

---------
|   1   |
---------
| 2 | 3 |
---------

The third “row” is the group that makes the intrinsic order unclear. It could be either of these…

---------
| 1 |   |
|---| 3 |
| 2 |   |
---------

---------
| 1 |   |
|---| 2 |
| 3 |   |
---------

If you’re asking about layouts other than “columns” they are only available through Inline Attributes. Be sure to read the “Works-In-Progress” section of the “Inline Attributes” tab in your PhotoMosaic Admin.

alaamrd

alaamrd Purchased

Thanks for your reply.

Let me rephrase

I need to achieve the “layout” I already sent by the link.

Ignore the first picture.

I set the attributes as following:

rows 0-2 (No minimum, maximum 2) I set the width as fixed (let’s say 650px) Order -> rows I uploaded all the images in their original sizes. (small and big images)

Using the previous attributes, it makes sense to me that the algorithm works in the following way:

- Go through pictures - Find first picture, insert it, its size is 650px=fixed width (then) set it in the first row no space for second picture. - Go to second row. - Find second picture, insert it, still space for another picture, its size<fixed width (then) insert it next to it. - Go to the third picture…. loop

but it seems it doesn’t work like this, it re-sizes the big picture and insert another picture next to it, why?

How can I achieve that the big picture stay in one row not shrink its size to fit another picture.

thanks,

The short answer is simply to increase the max_row_height setting (the default is 325px).

But you mentioned setting the order but not the layout. This leads me to believe that you’re still confused about the difference between the order and layout settings.

By default, layout = “columns”. The algorithm you described makes it clear that you want to set layout = “rows”. Like I said in the last paragraph of my previous response, the layout setting is only available as an inline attribute on the shortcode (meaning you won’t find it on the “Global Settings” page). You can read more about the layout settings on the “Inline Attributes” page (WP-Admin > PhotoMosaic > Inline Attributes : scroll down to the “Works-In-Progress” section).

The rows setting only applies when layout = “rows”. The rows setting tells PM how many rows you want not how many images you want to have appear in each row. The rows setting does not accept a range – only whole numbers (“0-2” is an invalid value for the rows setting). Width isn’t the only setting that affects the size that your images will appear – when talking about layout = “rows” the max_row_height plays a significant role.

Your algorithm has an inverted view of the relationship between actual-image-size and displayed-size. While you seem to be uploading the exact image sizes you want to appear in your gallery, most people upload huge images and have WP creates multiple copies at different sizes (which it does automatically). The max_row_height setting gives us a place to start determining the display-size.

Knowing the aspect-ratio of the image (rather than the exact dimensions) let’s us scale the image down to the max_row_height and then start building our rows. If we assumed that we should use the dimensions of the largest possible version of each image most galleries would have one image on each row – we want some variety.

Once the row is full/over-full, the images are scaled down until they all fit. Once we know the display-size of an image we can pick the best size (that WP generated) to actually render (it’s a waste of bandwidth to place an 8 megapixel image in a 300×200 space – especially when WP made a version at 350×225).

Once you’ve set layout = “rows” you’ll want to play with the max_row_height setting to get the look you’re after (you’ll probably want to turn it way up).

Now… before we can talk about the layout you linked, we need to agree on some terms – namely, “rows” and “columns”. When I look at a layout I look for unbroken gutters (the space between images) that cross the entire gallery. When the unbroken gutters runs vertically – that’s a “column” layout. When they run horizontally – that’s a “row” layout.

Examples…

Columns

-----------------
|   |   |   |   |
|---|   |   |   |
|   |---|   |---|
|   |   |---|   |
|---|   |   |---|
|   |   |   |   |
-----------------

Rows

-----------------
|   |   |   |   |
|---------------|
|   |  |     |  |
|---------------|
|  |    |   |   |
-----------------

If you ignore your desired layout for a minute and make a gallery with a bunch of images (10-15) in it and then play with the layout setting you should see the difference between “columns” and “rows” clearly.

Here’s the layout you linked…

---------
|       |
|-------|
|   |   |
|---|   |
|   |   |
|-------|
|       |
|-------|
|   |   |
---------

To me, that is overtly a “rows” layout (all the unbroken gutters run horizontally). The second row stands out because it has a horizontal gutter that doesn’t cross the entire gallery. If viewed on its own…

---------
|   |   |
|---|   |
|   |   |
---------

... that group of images has a “columns” layout.

PhotoMosaic can’t mix multiple layouts in a single gallery. The only way to get your layout would be to make multiple galleries and simply stack them.

---------
|       | Either layout = rows OR layout = columns (with 1 image)
|-------|
|   |   |  
|---|   | layout = columns & columns = 2 (with 3 images)
|   |   |
|-------|
|       | Either layout = rows OR layout = columns (with 1 image)
|-------|
|   |   | Either layout = rows OR layout = columns (with 2 images)
---------

When layout = “columns” and the columns setting is greater than the number of images in the gallery PM will always reduce the number of columns to match the number of images (e.g. columns = 3 & images = 1 >>> column = 1 || columns = 6 & images = 3 >>> columns = 3).

Hopefully this answers your question. If you’re still having trouble, please provide a link to a page where I can see your actual gallery.

Hi, Makfak!

My name is yaeko. I am photographer.

Found your plug in via other photographer’s web site. simply great look, so I purchased for my new web site.

I love the plug in, also really kind FAQ series. very helpful.

However I have question….

I want;

home page – 6 of photos layout with mosaic each photo represent a category.

click a category then jump to more photos.

on this home page, I would like to have hover effect with text come up.

I’ve been try various free plug in, but none of them work. So my question is, with your plug in mosaic, is it possible to show up hover effect with text?

am sorry if my explanation is bad….

have good day, sir!

regards,

yaeko

Thanks! I found it last night. Tried. Now nothing display.. I should have done something very wrong. I will fiddle around more, but just want to tell you thank you!

Ciao!

all right, sir. I did read FAQ. and did tried copy and paste. Again, not even show up hover, but whole photos are not turn up…. I must done wrong. I don’t understand where to copy the code. as on global settiing page, you have space for custom CSS and call back with {{ thingy… I don’t understand paste before {{ or after. or even in between. I’ve searched online code valediction service, but for callback I could not find… So… help!

here is complete copy and paste of what I placed on bottom of global setting tab. do let me know how can I correct.

many, many thanks!!!

.photomosaic-item .photomosaic-caption-wrapper { position: relative; display: table; padding: 0.5em; height: 100%; width: 100%; box-sizing: border-box; font-size: 13px; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: all 0.3s linear 0s; transform-origin: center center; }

.photomosaic-item .photomosaic-caption { display: table-cell; vertical-align: middle; text-align: center; color: rgba(255, 255, 255, 0.9); }

.photomosaic-item:hover .photomosaic-caption-wrapper { opacity: 1; }

.photoMosaic .photomosaic-item:hover img { opacity: 1; }

function($, $mosaic, $items){ $items.each(function () { var $a = $(this); var $img = $a.find(‘img’); var $caption_wrapper = $(‘ ‘); var $caption = $(‘ ‘); $caption.text( $img.attr(‘title’) ); $caption_wrapper.append($caption); $a.append($caption_wrapper); }); }}

Because you plain-text pasted the JS that you’re using in your onReady Callback it’s hard to tell if it got mangled by the comment system or if your JS is horribly horribly broken.

Either way, the snippet from the FAQ is meant to replace everything in your onReady Callback. It’s likely that your only problem is that extra “}” at the very end (that would throw a JS error which could prevent your images from appearing.).

Your onReady Callback should be set to this…

function($, $mosaic, $items){
    $items.each(function () {
        var $a = $(this);
        var $img = $a.find('img');
        var $caption_wrapper = $('<div class="photomosaic-caption-wrapper" />');
        var $caption = $('<div class="photomosaic-caption" />');
        $caption.text( $img.attr('title') );
        $caption_wrapper.append($caption);
        $a.append($caption_wrapper);
    });
}

If you continue to have trouble, please post a link to a page where I can see the problem happening.

Since the new Wordpress update 4.5 your plugin doesn’t show any photo’s any more. I had this before when I updated to the new Jquery version. Because of that I went back to the previous version. But now the update is in Wordpress. Maybe more people have this problem?

I will look into this today.

In the meantime, if you’ve been creating your galleries with the WP Create Gallery workflow you can safely deactivate PhotoMosaic and your galleries will fallback to the default WP gallery.

Thank you for your patience.

I’ve updated my existing sites (test and production), tried clean installs, and I PhotoMosaic and WP4.5 are working together perfectly.

Are you seeing any PHP or JS errors? Which version of PhotoMosaic are you running? Which version of PHP are you running?

stanny

stanny Purchased

Yes same problem as above.

I will look into this today.

In the meantime, if you’ve been creating your galleries with the WP Create Gallery workflow you can safely deactivate PhotoMosaic and your galleries will fallback to the default WP gallery.

Thank you for your patience.

I’ve updated my existing sites (test and production), tried clean installs, and I PhotoMosaic and WP4.5 are working together perfectly.

Are you seeing any PHP or JS errors? Which version of PhotoMosaic are you running? Which version of PHP are you running?

Wordpress updated today but the PhotoMosaic stopped working, what should I do?

I’m not seeing any PHP/JS errors. My PhotoMosaic version is 2.12.4 The gallery simply disappeared after wordpress upgrading. Look at ths page: http://desenhosorocaba.com/alunos-desenho-sorocaba Below “2016” and “2015” should be able the PhotoMosaic gallery. I’m using this shortcode: [gallery theme=”photomosaic” ids=”......... I can see the gallery at wordpress editor,but isn’t visible when its online.

I don’t see “2015” or “2016” when I look at your site. Are you sure PhotoMosaic is the problem? If you set the theme to “default” does the gallery appear? If you deactivate PhotoMosaic does the gallery appear?

I found there was a corrupted file in the installation of my wordpress and decided to restore the site. Soon I’ll contact you again.

Sorry if the answer to this is buried in the comments somewhere, but do you know if this can be applied to Woocommerce products by any chance?

PhotoMosaic is an alternate layout for the standard WP [gallery] shortcode. While it doesn’t have built-in WooCommerce support – you can make a mosaic image link wherever you want. So, if you can make a [gallery] out of the images, you can make PhotoMosaic work for you.

JennHell

JennHell Purchased

Hello :) I have uploaded the plugin and had it working until I changed my theme. For some reason it is not working with the theme as I have turned it on and off to triple check. Do you know how I can fix this?

Purchase code: 462b28e5-4b44-495b-bd87-5f8e890dbf24

Thank you! Jenn

Without knowing what, exactly, is going wrong there isn’t much I can do. Are you seeing any JS or PHP errors?

If you want me to look at your site but don’t want to post a link publicly, the form on my author page emails me directly. Send the info there and I’ll take a look.

Hello, thanks for this awesome gallery. I have 2 questions though:

First, how do I align the thumbnails side by side, so they are exact same height, right now they are slighty unaligned (PIC: http://puu.sh/op9rY/fdb3d5d354.jpg) I want all the cornes to meet :)

Also, how do I add changes to the default lightbox the gallery uses. Is this something that came with the plugin or?

Thanks again :)

David

The packaged lightbox is included as a courtesy and isn’t customizable. Using a different lightbox is easy and, should the packaged lightbox not meet your needs, I encourage you to use one that does.

The default layout is “columns” – it sounds like you want to use the work-in-progress “grid” layout. Non-”column” layouts are only available as inline attributes on the shortcode ([gallery ... layout="grid"]). Take a look at WP-Admin > PhotoMosaic > Inline Attributes > Works-In-Progress for details.

DBastholm

DBastholm Purchased

Thanks, this worked perfectly: layout=”grid” sizing=”cover” Will let you know if any bugs appear, cheers.

Hello, I’ve purchased your amazing photomosaic plugin and I inserted the following shortcode: [photomosaic pojo-gallery id=”2832” limit=”1”]

It works great, however it seems to display all of the images without taking notice of the ‘limit’.

Aside from that, I want to display only one category, however when I add the following category inline attribute it still displays all the images (or maybe not all but many images randomly). This is the attribute I added to the shortcode: category : category_name

I even tried instead of the category’s name/slug inserting its ID number. But that didn’t work either.

Bottom line – how do I set the exact category / limit / gallery? If I set the ID of the gallery in the shortcode it still displays images that are not included in the gallery I set!

Thanks for your great work!

Thanks for your fast reply!

Maybe it will help me if I told you the details and you tell me how to insert the shortcode?

I would like display images from one gallery (the gallery consists of only 12 images). This gallery’s id is 2832. You wrote that the id attribute displays only the posts (images) from the set gallery, but when I inserted 2832 it displayed many more images from the Media library.

You asked what ‘pojo-gallery’ is, Pojo is the theme’s framework that I’m using. So their galleries shortcodes are set as [pojo-gallery id=”gallery_id_number”] That’s why I inserted the shortcode as [photomosaic pojo-gallery id=”2832”]

It would be enough for me to insert only the gallery’s id because I would like to display only those 12 images (this gallery has only 12 images). However this shortcode didn’t work and that’s why I tried inserting the category and limit..

If you could help me insert the right shortcode to display only this specific gallery that would be great.

Below is a link to one of Pojo Themes demo. In the main menu you can navigate to Portfolio > Gallery. There you could see in the inspect element the gallery’s shortcode:

http://pojo.me/demo/?theme=buzz

Thanks!!

You seem to have a fundamental misunderstanding of what PhotoMosaic is, how native WordPress galleries work, and how shortcodes work in general. PhotoMosaic is an alternate layout for native WP galleries. Your “pojo-gallery” galleries are not the same thing as native WP “gallery” galleries ([gallery id="1"] =/= [pojo-gallery id="1"]). I mentioned the “Create Gallery” workflow a couple of times in my last response; it’s important that you understand what that is because is it how you make a native WP gallery (and, therefore, how you make a PhotoMosaic).

When editing a post you’ll see an “Add Media” button above the content editor. Click it and the “Insert Media” dialog will open. On the left side you’ll see “Create Gallery” – click it and the “Create Gallery” dialog will open. Now select the images that you want in your gallery and click the “Create a new gallery” button (in the bottom/right corner) – this will open the “Edit Gallery” dialog. Now change the “Gallery Settings” > “Theme” (on the right) to “PhotoMosaic” and click “Insert Gallery” (in the bottom/right corner).

If you switch to the “Text” tab (top/right, above the content editor) you should see a shortcode that looks like this…

[gallery theme="photomosaic" ids="1,2,3,4,5"]

Notice that the “ids” is just a list of the images to be used in the gallery. That is how native WP galleries work and that is what native WP gallery shortcodes look like.

The “id” attribute is only relevant for old versions of WP (< 3.5) that don’t have the “Create Gallery” workflow. The only reason PhotoMosaic supports this is because it has been around since before v3.5. I’m sure people still use the old method of creating galleries but I imagine they are rare.

Back before WPv3.5, native WP galleries worked by clicking “Add Media” and uploading images (which would be “attached” to the current post). Then your shortcode would look like this…

[gallery]

When the “id” attribute was missing, WP would interpret that as “us the ID of the post currently being viewed”. So, putting [gallery] in post_id=”12” would produce a gallery made from all of the images that had been “attached” (uploaded) to post_id=”12”. Specifying an “id” would bypass that logic and WP would use the images attached to the specified post.

[gallery id="100"]

The ID used in the “id” attribute doesn’t belong to a gallery that has been created somewhere, it belongs to a post. Go to your WP-Admin > Media > Library – note the “Uploaded To” column – this is where you can see which post images have been “attached” to.

I don’t know what tool/workflow you used to create the “pojo-gallery” shortcode but a pojo gallery is clearly very different from a native WP gallery. PhotoMosaic doesn’t know how to use the images you’ve set in a “pojo-gallery”. If you don’t want to use the “pojo-gallery” shortcode, don’t make your galleries using that tool – use the “Create Gallery” workflow to make native WP galleries.

Ok I understand..

Thank you very much for your time!!

lxxxxxxl

lxxxxxxl Purchased

Hi! I have problem . I use Photomosaic on my site and I use this theme. http://themeforest.net/item/tides-fullscreen-video-onepage-wordpress-theme/7263600 And I have 2 languages on site. I use Polylang plugin for multilingual. And now problem. I have shortcode [photomosaic] on first language page and works fine but when I switch for second language and I have the same shortocode [photomosaic] than gallery doesnt show on page? WHAT IS WRONG? I tried use different “ids” in gallery shortocode etc. and still doesnt work when I switch for a second langauge .

Please provide a link to a page where I can see this happening. I’ll take a look.

lxxxxxxl

lxxxxxxl Purchased

I fixed this by install nexgen plugin and use another shortcode with connected nexgen album.

by
by
by
by
by
by