Instagram Feed/Slider in the Footer

Mauer Themes Support Storyteller Instagram Feed/Slider in the Footer

This topic contains 26 replies, has 2 voices, and was last updated by  edwardkim 2 years, 7 months ago.

Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #404

    edwardkim
    Participant

    Hi,

    I’m very interested in purchasing the Storyteller theme; it has 95% of everything I’m looking for, but it’s missing the Instagram slider in the footer. Will this feature be included in a future update or can I possible “install” it on my own?

    Also, is there a way to change the type/font and the colors? Thank you so much for your time, hoping to purchase the theme soon.

    #406

    Paul
    Keymaster

    Hi Edward,

    You can add an Instagram feed in the footer with a plugin. For example, I just used this one to insert Instagram feed in Storyteller:

    This required me to install the plugin and add 1 line of code into a file in the theme.

    As for the colors and fonts, you can change the the accent color from the Admin Panel. So you can change the red color you see in the demo. Other colors are not tweakable from the Admin Panel, neither are fonts.

    If you want some modifications to be done to the theme, you may find it a good idea to contract someone on Envato Studio or Codeable.io. I recommend the latter.

    Thank you for your interest in Storyteller.

    #407

    edwardkim
    Participant

    Hi Paul,

    Thank you for the prompt and detailed response; I will be making the purchase for the theme first thing tomorrow.

    #408

    Paul
    Keymaster

    You are welcome. I just want to make it clear that customizations are not included into the support (by ThemeForest official rules), so if you want something customized you will need to contract an expert (which I recommend doing on Codeable.io as they have a great screening process for experts, basically they pick them manually).

    #409

    edwardkim
    Participant

    Hi Paul,

    Thanks again; I purchased the theme this morning and I’ve been fiddling with it ever since. I added the Instagram plug-in, but would you be able to tell me where to insert the short code?

    A few more questions for you if it’s OK:

    1. There is a purple/pinkish tint over the featured image in a post; is there a way to change the colour of this tint?

    2. The live-demo page, there are tags at the bottom of the page. How can I change/delete those tags? What dictates which tags go in the tags section?

    3. On the main page, the featured image’s width seems to be limited by the theme. This is OK for me, but can you tell me how many pixels the width is? Also, I assume there is a height limit on the image on the main page as well? If so, can you tell me the number of pixels?

    4. Inside a post, the featured image seems to be “zoomed-in,” or is it cropped? If the featured image is 1980×1080, the zoom or crop is a certain percentage or zoomed/cropped to x by y pixels?

    Thank you for your time in answering these questions; I apologize if the questions are stupid, it’s my first time working on a WordPress and I’m learning as I go. Thanks again!

    #410

    edwardkim
    Participant

    Hi Paul,

    I figured out how to get the Instagram feed in the footer, but your help is appreciated on the other questions. Thank you!

    #411

    Paul
    Keymaster

    Hi Edward,

    1. You can change the color of this overlay by introducing a custom CSS style. To do that you can install this plugin. After you activate it, in your Admin Panel please go to Appearance > Custom CSS and paste the following code:
    .entry-full .entry-thumb-overlay {background: #353344;}
    Replace #353344 with the color of your preference.

    2. This is actually a tags widget. It displays all the tags that you’ve assigned to your posts. Widgets are displayed in what is called ‘Widgetized areas’. There are three of them in the footer of the Storyteller theme — the Left, the Center, and the Right. The tags widget is in the Center one on the demo page. The widgets are controlled from the Admin Panel — go to Apperance > Widgets. There you can just drag and drop widgets to the widgetized areas, change their titles, etc.

    3. It is displayed as 1140 x 600 px. And it actually is 1596 x 840 px. The actual image is bigger than the area where it is displayed for sharper looks on high resolution screens like Retina.

    What you might not know is that you actually don’t need to resize anything manually before uploading — WordPress automatically generates all the sizes of an image used in the currently active theme once you upload the image. So there’s no need to manually resize images before uploading them to your site running Storyteller. Just upload the biggest pictures you have (let’s say 1920×1440), and WordPress will do the rest for you — creating copies of the image in all the needed sizes including the one for the big first image.

    4. It downsized and then cropped to 1596 x 840 px. And then cropped again while being displayed as 1140 x 533. When you upload your 1980 x 1080 picture, there is a special copy of it created in the size of 1596 x 840 px (see prev. answer). I think the best way to understand this is to upload a few big pictures (e.g. 1920×1080) and see what happens.

    #412

    edwardkim
    Participant

    Hi Paul,

    Thank you so much for taking the time to answer my questions; I have a follow-up question, which pertains to my previous questions 3 & 4. When you say the pictures are being “downsized,” are you saying that the pictures are being compressed? If so, is there a way not to have it compressed? My blog will be photography based, so I would like the compression to be minimum if possible.

    Thanks again!

    #414

    Paul
    Keymaster

    By default WordPress will compress your images to 90% quality. You can avoid that by installing JPG Image Quality plugin and going to Settings > Media in your Admin Panel. There at the buttom you will see a setting for the quality.
    After you’ve changed the setting, you will need to regenerate all the images that are already on the website. You can use the Force Regenerate Thumbnails plugin to do that (Tools > Force Regenerate Thumbnails in your Admin Panel).

    However, I would recommend to first take a closer look at how your photos look without all this. Because first, as the images in this theme are bigger than the area where they are displayed, you should not be seeing a lot of artifacts, etc. And second, your site may work significantly slower if you go from 90% to 100% quality.

    If you like the theme and the quality of support, please rate it on ThemeForest. Thank you.

    #415

    edwardkim
    Participant

    Hi Paul,

    Thank you so much again; duly noted on your recommendation!

    #416

    edwardkim
    Participant

    Hi Paul,

    Just rated your theme and left a review, thanks again! Can I bother you one more time, I apologize:

    How can I change the height at the bottom or top of the footer? I would like to create the same space as shown in red:

    View post on imgur.com

    However, when I go into a post, the height is the same:

    View post on imgur.com

    Thank you so much, as always!

    • This reply was modified 2 years, 8 months ago by  edwardkim. Reason: images won't show
    • This reply was modified 2 years, 8 months ago by  edwardkim. Reason: I couldn't embed the images from imgur, sorry!
    #419

    Paul
    Keymaster

    Thank you.

    Please post the URL of your site, so I could take a look at the CSS.

    #420

    edwardkim
    Participant

    Sure thing, Paul:

    http://www.filmandwander.com/

    Thank you.

    #423

    Paul
    Keymaster

    I’m looking into it.
    Ho did you actually insert the Instagram plugin shortcode? Placed it in footer.php? If yes, please send a screenshot of your footer.php file.

    #424

    edwardkim
    Participant

    Thank you, Paul. Yes, the IG shortcode was put in the footer.php:

    View post on imgur.com

    #426

    Paul
    Keymaster

    Edward,

    Please move the line that you inserted into footer.php just above the following line: <div id="footer" class=“section-footer”>. See screenshot.

    Also please go to your Admin Panel and in Settings > Reading change the ‘Blog pages show at most’ setting to ‘2’. This will make the ‘Older Posts’ button visible. Don’t forget to change this back when we’re done.

    When you do this, please let me know here. And I will provide you with a css code for the IG feed top and bottom margins.

    • This reply was modified 2 years, 8 months ago by  Paul.
    #435

    edwardkim
    Participant

    Hi Paul,

    I hope you had a great weekend; I just made the changes you mentioned above:

    1. Inserted the IG shortcode into line 7 in the footer.php file
    2. Changed the Reading setting, “Blog pages show at most” to ‘2’

    Thank you so much!

    #436

    edwardkim
    Participant

    Hi Paul,

    Just a quick update from my end; I’ve purchased a PRO version of the IG feed plug-in, but now the feed is not working. There was a change in the shortcode and I’m currently trying to fix it. I’ll get back to you once I fix the current issue, thank you so much.

    #437

    edwardkim
    Participant

    Hi Paul,

    I’m still trying to figure out what’s wrong with the shortcode in the footer.php. Would you mind taking a look at the screenshot below?

    View post on imgur.com

    When I visit the page and inspect element, the shortcode is there, but it seems to be 1908×0, hence why it’s not showing up. Would you confirm if there’s a conflict with the theme itself?

    I’ve opened up a ticket with the plug-in dev, so hopefully I hear something from them soon.

    Thanks for your time, Paul.

    #439

    Paul
    Keymaster

    Hi,

    Currently there is not anything looking like the output of this plugin in front of the #footer tag (where it should be according to where you’ve inserted the tag in footer.php). And nothing similar to the 1908×0 element that you mentioned. See screenshot:

    There is no incompatibility between the plugin and the theme.

    It looks like the issue is dealt with the configuration of the plugin — most likely the parameters of the [instashow] shortcode are wrong.

    #450

    edwardkim
    Participant

    Hi Paul,

    Happy Friday; finally figured out the issue and now I’m back on track.

    Can you please help me with the margins?

    EDIT: I think I spoke too soon; the issue was that I had the shortcode of the Lite version of the plug-in in theme’s footer.php and the PRO version shortcode in the main directory’s footer.php (my domain’s footer.php). Hence why the IG feed was the showing up, however, when I visit my site on mobile, the footer doesn’t seem to be resizing with the theme itself. Do I need to remove the shortcode from the theme’s footer.php and then move it back to my domain’s footer.php?

    You can see it yourself on mobile: https://www.filmandwander.com
    (I’m on iPhone 6+)

    Also,

    1. How can I center the IG feed so that it aligns with the theme? Do I require another CSS code to do that? If so, can you please help me?

    2. The IG feed appears on every page because I modified the footer.php file in the theme, but is there a way to just have it on the main page and not on all the pages?

    3. Is there a way to change the size of the font for the theme’s posts? Was wondering if I can make it smaller within the post it self.

    Appreciate your help on this, have a wonderful weekend.

    • This reply was modified 2 years, 7 months ago by  edwardkim.
    #452

    edwardkim
    Participant

    Hi Paul,

    Hope you had a great weekend; following up on my previous reply. I’ve figured out how to center the IG feed, so question number 1 can be ignored.

    Thanks again.

    #453

    edwardkim
    Participant

    Hi Paul,

    So I’ve been trying to figure out how to make the widget resize on mobile after I’ve centered it with the below in the footer.php:

    <div align=”center”>
    <?php echo do_shortcode(‘[instashow id=”2″]’); ?>
    </div>

    My only issue is that the widget (IG feed) isn’t resizing when I’m viewing on mobile, but it’s perfect on desktop.
    Would you be able to provide a CSS code that I can insert into the footer.php as with the margin tweak?

    And my other two questions from above pasted again for you to see:

    2. The IG feed appears on every page because I modified the footer.php file in the theme, but is there a way to just have it on the main page and not on all the pages?

    3. Is there a way to change the size of the font for the theme’s posts? Was wondering if I can make it smaller within the post it self.

    Hope to hear from you soon, Paul. Thank you so much!

    #455

    Paul
    Keymaster

    Edward,

    0. You can change the margins of the IG feed by installing this plugin and pasting the following code into it:
    .instashow-gallery {margin-top: 7.8rem; margin-bottom: .6rem;}
    You can use these exact numbers or tweak them — keep in mind that each 0.1rem represents 1 pixel.

    1. To make the IG feed resize on mobile paste the following code into the plugin:
    .instashow-gallery {max-width:100%;}

    2. To make the IG feed appear only on the front page, go to the footer.php file (in your theme folder, not elsewhere) and replace this line:
    <?php echo do_shortcode('[instashow id="2"]'); ?>
    with this one:
    <?php if (is_home()) { echo do_shortcode('[instashow id="2"]'); } ?>

    Please note that the footer.php file belongs to the theme (or child theme, or rarely — a plugin) and not to your website’s root folder. When you put it there it is not being used. This is true regardless of the theme you use. Just the way WordPress works.

    3. You can make the font smaller by using the following code in your Simple Custom CSS plugin:
    .entry-full .entry-content {font-size: 1.9rem;}
    Each 0.1rem represents 1 pixel. The size used on the demo is 2.1rem.

    To recap, your CSS in the plugin will look like this (with any custom numbers, should you decide too use them):

    P.S.
    If you do not know how to install the plugin, please see this thread.


    Best Regards

    #456

    edwardkim
    Participant

    Hi Paul,

    You’re a life saver; everything works as intended except the margins. The margin doesn’t appear even after I’ve put in the CSS code given above.

    View post on imgur.com

    Nothing changes here:

    View post on imgur.com

    Thank you so much again, Paul!

    #461

    Paul
    Keymaster

    You are welcome!
    Please try the following code for the margins:

    .instashow-gallery {margin-top: 7.8rem!important; margin-bottom: .6rem!important;}

    #462

    edwardkim
    Participant

    That worked, Paul! You’re the man!

    Have an awesome weekend.

Viewing 27 posts - 1 through 27 (of 27 total)

The topic ‘Instagram Feed/Slider in the Footer’ is closed to new replies.