Thanks Yigit.
I have a custom post type set up
e.g. http://goldhillmuseum.org.uk/story/sidney-william-alner/
Uploaded images display as thumbnails. This is the code from my loop-index.php.

				$content_output .= '<div class="story-images">';
				$content_output .=  '<span></br><strong>Images: </br></strong></span>';
					if( $images ): 
					$content_output .=  '<ul>';
						foreach( $images as $image ):
						$content_output .= '<li>';
						$content_output .= '<a href="'.  $image['url'].'">';
						$content_output .= '<img src="'. $image['sizes']['thumbnail'].'" alt="'.  $image['alt'].'" />';
						$content_output .= '</a>';
						$content_output .= '</li>';
						endforeach;
					$content_output .= '</ul>';
					endif; 
				$content_output .= '</div>';

I was hoping that within the image link I could add a class or something that opens the images in lightbox and not full size as it does now.
Cheers
Rob

Hi Andy,

Here is exactly what I need. I need all the thumbnails in the instagram block to be exactly the same size to the pixel. Right now if you look closer, you will see that the image blocks, and the spacing are off, both on the desktop site and the mobile site. Before I added all the CSS above, it was very obvious. The CSS made it better but does not fix the problem completely. This is a bug in the plugin. I have said this all throughout this post several times.

The image blocks in the plugin are affected by the dimensions of the image. This plugin is expecting all images that are on instagram to be perfectly square and they are not. It is possible and people frequently upload images to instagram in landscape dimension. Instagram has not, for a long time, forced the square dimension. Until this bug in this plugin is fixed I would like CSS to make these blocks exactly the same size to the pixel.

Here is your demo. If you look at it you will see that the blocks are not evenly spaced. Especially around the center block.
http://kriesi.at/themes/enfold-lifestyle-blog/

Please see my annotated screenshot below.

Please alert whomever the developer is for this plugin of this bug in the code. In the mean time, if you have CSS that will fix this I’d appreciate it.

Thank you,

Jas

Thanks for your reply. The site is not online, thats why i posted a screenshot. But i post another one to explain it the best way i can. Please ask if there is something that is unclear.

The image to the right, with the red border, is how Masonry Gallery displays the images now. It fills up the area above the text, and there is no grey border around it.

The image to the left, with the green border, is what i want. It only looks that way now because i made a grey border around that image before uploading it to the gallery. The red line just shows where it really is now. I also made a green line down under the image to show that i would like the image to align with the text below.

So i wonder, is it possible to do this in the Quick CSS? (The reason i want to do it is that if i use a border the image will not align with the text below in all screen-resolutions.)

For example, i used this code that i found here to increase the white space between images:

.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
margin-right: 40px;
margin-bottom: 40px;
}

.av-masonry-container {
width: 103.5%;
}

Is there a similar way to do it with the thumbnail/image in this case? With pixels / percent in the Quick CSS?

• This reply was modified 10 years, 2 months ago by Mathiaslarsson.

Thumbnails are still disabled on hover and raw image pops up in browser
I removed all this css

#top .portfolio-preview-image .avia-gallery .avia-gallery-big {
pointer-events: none !important;
}

.portfolio_preview_container {
box-shadow: 0px 0px 7px 7px #000000;
clear: both;
display: none;
margin-bottom: 35px;
margin-top: 15px;
overflow: hidden;
padding: 0px;
position: relative;
width: 100%;
}

Cheers
Julian

Hi. Thank you for your reply. However, that did not fully solve my problem.

1. As I said, I already enabled the builder for all post types. That was not a problem.
2. The only two ways to put a blog element (that I know of) is a post slider and blog posts content (in the advanced layout builder). The problem with then that it does not display share buttons // caption right on the main page. Moreover, it can only display thumbnails and not full posts (which is what I need). I don’t want my image to be a link to another page with the same image of the same size, and I don’t want to have an overlay arrow every time I hover over it. I want my posts (that are just images with captions) to be all on one page that I can post to. I created 3 feeds to show my problem. Feed CPT is archive for a custom post type and the way it looks is exactly what I want – photo // share buttons // caption. However, I can’t make it a home page. Two other feeds are post slider and blog post content element. In those two the view is not what I want – image not full size, has an overlay link, and no share buttons or caption.

I’m trying to make it a simple feed page like this mete.photography/feed – similar idea to instagram – photo, caption, share buttons for every post. Is there a way to solve the problems I described or a better way to do that?

• This reply was modified 10 years, 2 months ago by mepho.

Sorry, maybe I was unclear, we want to keep the space that is under the loading and have that also when it fully loaded and with the size of the thumbnails 75×75. Your code is removing it which is not what we want.
Thx!