Hey Ismael, thank you for your information. Will try some things with the header image.

Now back to the archive page image size:

You write you can adjust the thumbnail size in the archive pages by editing the archive.php file directly. I already searched for a function loading the portfolio size but did not find it. Where do I find the line to change? The filter you sent is for functions.php but I would like to change the size in the archive.php directly and don’t now where exactly.

Thanks for helping me out!

Mike, thanks for this very helpful guidance. I will definitely try this out on some test “posts” to see how it works. So glad to have this knowledge now before I got too far down the road.

Can you please point me to a resource on how to add Categories / Tags and how to create a Post and pull in content related to these Categories / Tags.

Here is an example of what I’m hoping to achieve:
https://www.iamsecond.com/film/
Scroll down to “Stories By Topics”

I’m assuming I would create the thumbnails with the respective Topics, but when you click on any of the Topics the Post that would appear would just pull from the respective Topic. As for example, if you click on the “Identity” Topic, the thumbnails would be pulled in. Is this what you meant when you reference the use of the Masonry Element?

Thanks again for ALL your help, guide and instructions.

Best Regards,
Julio

• This reply was modified 4 years, 2 months ago by Jules.

@Mike, your detailed, informational, educational and helpful responses never cease to amaze me. Your continued support is greatly appreciated!

As a novice to WordPress/Enfold, I must admit, I assumed that Posts were only used for Blogs :( I guess I should research a little more on when to use Pages vs. Posts :)

Not sure which approach to take yet. We’ll be adding a new “Daily Word” each day, which includes an image with a link to a separate page. Eventually, there will be 365 in a year. As we add more images (i.e. thumbnails to videos), eventually I would like to categorize/tag (?) these with dates so visitors can eventually filter/select videos by Date (i.e. Year), along with other categories/tags (?); Topics (i.e. Faith, Hope, etc. etc.).

With this in mind, how would you suggest that I accomplish this? I would like to build this in upfront to prevent rework.

Thanks again for ALL your help!!!

Best Regards,
Julio

Ismael,

This is a wordpress/theme topic.

Check this out: https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/#highlighter_892127

Copying certain interesting paragraphs:
By default, WordPress will add loading=”lazy” to all img tags that have width and height attributes present. Technically this is handled on page output, similar to how responsive images are facilitated in WordPress by adding srcset and sizes attributes. To improve server-side performance of the two features, a new wp_filter_content_tags() function has been introduced so that img tags only need to be parsed once while then deferring the modifications to more specific functions related to the feature.

By default, WordPress will add a loading=”lazy” attribute to the following images:

images within post content (the_content)
images within post excerpts (the_excerpt)
images within text widgets (widget_text_content)
avatar images (get_avatar)
template images using wp_get_attachment_image() (wp_get_attachment_image)
Developers can customize this behavior through various filters, the most foundational one being wp_lazy_loading_enabled, which receives the following parameters:

$default: The boolean default of true to filter.
$tag_name: An HTML tag name. While per current WordPress behavior this will always be img, it should be noted that the loading attribute is a generic attribute and may be expanded to support further elements, e.g. iframes, in the future.
$context: A context string as additional parameters, indicating where the image technically comes from, usually a WordPress hook name. Based on how WordPress itself uses lazy-loading, the context can be one of the five values in parentheses in the list above.

And it gives you what the Enfold switch does. Which is great. But then it goes on:

In order to modify the loading attribute for very specific images, there are two different approaches, depending on the type of images:

For images that appear within a content blob (e.g. the_content, the_excerpt, widget_text_content), another new filter wp_img_tag_add_loading_attr can be used, which receives the following parameters:

$value: The loading attribute value, either “lazy” (default), “eager”, or false. If you want to disable lazy-loading for an image, it is strongly recommended to specify false so that the attribute is omitted altogether.
$image: The entire image HTML tag with its attributes.
$context: The context, similar as described for the other filter above.
For example, if you would like to disable lazy-loading for a specific attachment image with ID 42 in size “large” within post content, you could use the following code snippet:

And it gives you the snippet – but doing this is similar to my workaround for a specific image (taking the HTML that is the output and changing lazy to eager)

Theme developers are recommended to granularly handle loading attributes for images anytime they rely on wp_get_attachment_image() or another function based on it (such as the_post_thumbnail() or get_custom_logo()), depending on where they are used within templates. For example, if an image is placed within the header.php template and is very likely to be in the initial viewport, it is advisable to skip the loading attribute for that image.

And the Core Web Vitals issue was actually identified by them but it seems that on their experiment they didn’t consider all the 3rd party calls and javascript running times that can delay the LCP image from being loaded, so they write:
“Experiments using Chrome for Android have shown that the impact of such loading=”lazy” images in the initial viewport on the Largest Contentful Paint metric is fairly small, with a regression of <1% at the 75th and 99th percentiles compared to non lazy-loaded images – yet it is a consideration to make where theme developers can apply some fine tuning for even better user experience.”

So, maybe this could be a good new feature for Enfold? Allowing to Disable Lazy Loading on certain images from inside the Block Editor?

What concerns me is that you don’t see this on your installation. As it seems to solve mine with my HTML insertion/loading eager workaround. And Enfold is amazing when it comes to the ALB as it allows you to Enable/Disable Loading Lazy on an single image basis. All that’s missing is applying the same to a native or non-ALB image.

Please, let me know if my understanding of what is going on is correct. And if so, maybe this can help others who would like to implement my workaround or the one on functions.php that wordpress offers.

Thank you so much!

Havi

Hi Ricard,
thanks for keeping it open.
I have updated the parent theme hoping that this will solve the remaining issues, but it did not. I am using a child theme.
There is a problem with media upload, after the upload the thumbnail is not shown, instead just a light grey. And when I try to add the images to a page, then the image cannot be seen/loaded. ( I tried both jpg and pdf).
Also I got a database connection error (wp-config.php) after making some changes, but database name, user and password are correct.
Please let me know if you need any further information.
Your support is much appreciated.
Best regards

is there any option i can add thumbnails below to easy slider, or there is any option for adding zoom facility in lightbox

My gosh Ismael, you’re great. We’re calling “thumbnail” two different things for sure: your function above does exactly what I wanted :-) The image in the Ligthbox now opens full screen, that’s awesome.

SOLVED :) Thank you so much!

• This reply was modified 4 years, 3 months ago by mistermagoo8691.

Thanks @Ismael for your answer.

You are right, my bad: I was comparing the Masonry gallery behaviour with the “Image element”, but actually I am not using an “image element”: I am using images embedded into a text box. See below, this are the configuration options I’ve got on this kind of images:

If I open this image by clicking on its thumbnail, it opens almost full screen (yes, I realized it does not use the Lightbox, it opens the “media file” directly).
If I add the same image to a Masonry gallery and I open it by clicking on its thumbnail, it opens it in the lightbox (and it is smaller than the other one).

My request is: would it be possible to change the behaviour of the lightbox so that it opens the images using the same size as the images opened from the “embedded in textbox” image?
If you could set the “Masonry gallery” to open the images with the “Media file”, instead of using the Lightbox, I think the issue would be solved, but I understand it is not possible :-)

In your answer you’re mentioning the “default lightbox thumbnail size” of the Masonry gallery, but the thumbnail is the small image in the gallery on which you’re clicking to open the image in the lightbox, isn’t it? If yes, I am totally fine with the thumbnail size of the Masonry gallery. I want to increase the size of the image in the lightbox, after you click on the thumbnail.

I hope it is more clear now :-)

Thanks & bye!
A.-

• This reply was modified 4 years, 3 months ago by mistermagoo8691.