Suggestions for the next MD update

gauravtiwari

Blogger at https://gauravtiwari.org
Messages
68
Reaction score
23
Website
gauravtiwari.org
Hello there,
So, it has been quite sometime with MD and I have noticed some ifs and buts with it.
  1. Font Display should be set to swap for all fonts & font-icons. This increases UX drastically. md-icon font adds an extra 2.46s every load. Adding swap saved 1.6s actually.
  2. If I setup a popup hotspot from Optins, no matter where I use the hotspot on the page or not - it loads. It loads in the footer. I noticed this when I added a substack email form javascript and that appeared on homepage (on which I didn't use the hotspot).
  3. Give an option to use both social share & profile icon buttons. It can be manually done by using some HTML & classes but it would be much better if we had an option to show profile icons in widget areas.
  4. Add two more dropins -> Downloads and Portfolio just like the bookshelf. Please, please. It is easy to create a post type but native integration will be awesome.
  5. Allow to use more than one gallery blocks on a page or post. Allow us to set columns in gallery-blocks columns.
  6. Add Pros & Cons/Do and don't or comparison gutenberg block (same thing). This one will be one unique feature and can be easily ported from https://github.com/NHSLeadership/nhsblocks.
Thank you!
 

Alex

MD developer
Messages
4,959
Reaction score
1,176
Thanks for the feedback, really great stuff here. For your own knowledge, the baseline schema you recommended in the other thread as well as the ability to change the CTA main title to h1-h4 has also been implemented, and will be released in MD5.1.1.

Font Display should be set to swap for all fonts & font-icons. This increases UX drastically. md-icon font adds an extra 2.46s every load. Adding swap saved 1.6s actually.
That seems a little high for an icon file that weighs only 12kb but I am always open to font optimization. It looks like applying font-display: swap; to the icons and custom web fonts is a sound optimization and I will include it in MD5.1.1 also.

If I setup a popup hotspot from Optins, no matter where I use the hotspot on the page or not - it loads. It loads in the footer. I noticed this when I added a substack email form javascript and that appeared on homepage (on which I didn't use the hotspot).
I have tested this and only found a case where the Hotspot popup(s) show on the wrong page with the Byline hotspot. I have updated the md_has_byline conditional (which is the controller used to load the byline popup) to be false for Pages. In the meantime you can edit the front page and from the Layout meta box check "Remove byline" and it should remove the popup as well.

Give an option to use both social share & profile icon buttons. It can be manually done by using some HTML & classes but it would be much better if we had an option to show profile icons in widget areas.
Can you give me an example of this? The current share settings allow you to paste in your profile link into the options which will override the click to share popup modal used by default.

Image 2020-05-29 at 10.49.29 AM.png

Add two more dropins -> Downloads and Portfolio just like the bookshelf. Please, please. It is easy to create a post type but native integration will be awesome.
These are both great ideas and you can see an early version of what the downloads dropin will be like from the MD Dropins page (how meta). Tell me, what kind of features and and layouts would you like to see from a Downloads and Portfolio dropin? These are the current settings I have to manage all of the dropins on the MD site now:

Screen Shot 2020-05-29 at 10.51.02 AM.png

Allow to use more than one gallery blocks on a page or post. Allow us to set columns in gallery-blocks columns.
The Gallery Blocks Dropin is not slated for new developments outside of maintenance and new version compatibility, so I can't promise much on this front. We are working towards building our own simple frontend builder so some of what you are asking for may be possible around MD5.3-MD5.4 (right now are major focus is the Dropins Manager, which will allow you to import/export site data, new dropins, and other enhancements).

You can already change the columns count from the top of the gallery-blocks.php file:

Screen Shot 2020-05-29 at 10.53.09 AM.png

I need to create documentation on how to use the MD API to create admin pages and custom fields, because I think you will be very dangerous with that knowledge. :)

Add Pros & Cons/Do and don't or comparison gutenberg block (same thing). This one will be one unique feature and can be easily ported from https://github.com/NHSLeadership/nhsblocks.
I absolutely love this idea. Can you give me a direct link to a page with this Block? I wasn't able to find it through that link, but I did not look too deeply.
 

gauravtiwari

Blogger at https://gauravtiwari.org
Messages
68
Reaction score
23
Website
gauravtiwari.org
That seems a little high for an icon file that weighs only 12kb but I am always open to font optimization. It looks like applying font-display: swap; to the icons and custom web fonts is a sound optimization and I will include it in MD5.1.1 also.
That's because it is called by style.css file and isn't rendered standalone, so it waits for style.css to load fully and then it renders the font-icons.
Can you give me an example of this? The current share settings allow you to paste in your profile link into the options which will override the click to share popup modal used by default.
So we can use these either as share icons or profile icons at one time - but not both. Right? What if I wanted to showcase my social media profiles in footer and also wanted readers an option to share the posts?

In the meantime you can edit the front page and from the Layout meta box check "Remove byline" and it should remove the popup as well.
Can't find.
These are both great ideas and you can see an early version of what the downloads dropin will be like from the MD Dropins page (how meta). Tell me, what kind of features and and layouts would you like to see from a Downloads and Portfolio dropin? These are the current settings I have to manage all of the dropins on the MD site now:
Screen Shot 2020-05-29 at 21.59.58.pngArchives/grids are not a problem. Singular should be good. Just add some native styling.
 

Alex

MD developer
Messages
4,959
Reaction score
1,176
I think that is the missing link! I have opted not to go the font display route after investigating it further.
 

gauravtiwari

Blogger at https://gauravtiwari.org
Messages
68
Reaction score
23
Website
gauravtiwari.org
Dropins issue.

No matter what title you use in the settings...
Screen Shot 2020-06-05 at 1.24.36 PM.png

The Stream Archives will have the same title meta.
The same applies to every other dropin like it.
Please fix that.

PS: SEO plugins can override this.
 

Alex

MD developer
Messages
4,959
Reaction score
1,176
No, that file was removed in MD5.0 and the reference should have been removed everywhere. It's coming from the widgets which the Gutenberg editor uses.
 

gauravtiwari

Blogger at https://gauravtiwari.org
Messages
68
Reaction score
23
Website
gauravtiwari.org
Alternate approach for related posts dropin
I see that you use `background images` for related post's featured images. This loads full size images and decreases the single post performance and also the page speed score (especially when you want to show 6 related posts below the article).

Try my approach in template.php file:

PHP:
<div class="related-posts">
    <div class="content-inner block-double-tb">
        <h3 class="text-center"><?php echo $settings['title']; ?></h3>
        <div class="columns-<?php echo $settings['columns']; ?> columns-single columns-flex">
            <?php while ( $related->have_posts() ) : $related->the_post(); ?>
                <div class="col mb-mid">
                    <?php if ( has_post_thumbnail() ) : ?>
                    <a href="<?php the_permalink()?>"><?php md_featured_image( 'above_headline', 'thumbnail' ); ?></a>
                    <?php endif; ?>
                    <div class="box block-single shadow-small">
                        <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
                    </div>
                </div>
            <?php endwhile; ?>
        </div>
    </div>
</div>
Let me know what you think. Demo is on my blog. No need to add any extra CSS as well.
 

Alex

MD developer
Messages
4,959
Reaction score
1,176
I do agree displaying the image inline is better for control. I remember I used the style approach because I couldn't get a good crop for a rectangular image vs. the more square you have now. But I'd still prefer not to use the style tag so maybe a featured image code like this will work:

PHP:
<?php the_post_thumbnail( 'md-banner' ); ?>
md-banner is an image size of 600x250 so it will show images with less height. Which works best for your images?
 

gauravtiwari

Blogger at https://gauravtiwari.org
Messages
68
Reaction score
23
Website
gauravtiwari.org
I am currently using 400x300 as the thumbnail size, but I should really go for 400x225 now. 600px wide will add nothing but extra bytes to the page and I am very speed cautious!
 

Alex

MD developer
Messages
4,959
Reaction score
1,176
Another benefit of using an inline image, I will add these changes to the dropin. I don't think there is any noticeable difference between the performance of the image sizes since they are so close but I have the upmost respect for your eye for detail. (y)
 
Top