- This topic has 11 replies, 4 voices, and was last updated 2 years, 11 months ago by
.
-
Posts
-
hey, everybody — great theme!
i added the code below in code snippets and it works fine, aside from the captions under featured images breaking into new lines every word or so. is there a way i can tweak the code to fix that?
thanks in advance!
add_filter( ‘post_thumbnail_html’, ‘custom_add_post_thumbnail_caption’,10,5 );
function custom_add_post_thumbnail_caption($html, $post_id, $post_thumbnail_id, $size, $attr) {
if( $html == ” || !is_singular() ) {
return $html;
} else {
$out = ”;
$thumbnail_image = get_posts(array(‘p’ => $post_thumbnail_id, ‘post_type’ => ‘attachment’));
if ($thumbnail_image && isset($thumbnail_image[0])) {
$image = wp_get_attachment_image_src($post_thumbnail_id, $size);
if($thumbnail_image[0]->post_excerpt)
$out .= ‘‘;$out .= $html;
if($thumbnail_image[0]->post_excerpt)
$out .= ‘<p class=”wp-caption-text thumb-caption-text”>’.$thumbnail_image[0]->post_excerpt.'</p>‘;
}
return $out;
}
}Customer Support
Hi Jordan,
Try adding this through Appearance > Customize > Additional CSS:
p.wp-caption-text.thumb-caption-text { display: flex; } p.wp-caption-text.thumb-caption-text a{ margin: 0 4px; }that worked perfectly, thank you so much! another minor issue, though, sorry:
i added a mailchimp newsletter signup form to the footer and it loks fine on desktop, but on mobile it overflows outside of the container. is there any code i can add to fix that? this is the form’s code:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style><form action="https://github.us1.list-manage.com/subscribe/post?u=25fe5fa5ee4114cf347fd278c&id=1dc98df0e9&f_id=0065c7e5f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate=""><h2>Newsletter</h2><span class="asterisk">*</span> indicates required<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required="">
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<input type="text" name="b_25fe5fa5ee4114cf347fd278c_1dc98df0e9" tabindex="-1" value=""><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
<p class="brandingLogo">
</p>
</form>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
Customer Support
Hi there,
in your first mailchimp code:
<!-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px;} /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style>Change this line:
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px;}to:
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; max-width:600px;}omg, that worked perfectly, thank you so much!
You’re welcome
hey, i was wondering if there’s anything i can add to the featured image caption code above to make all the captions italic and add 20 pixels of padding on the left and right
Customer Support
Can you link us to the page in question again?
The info is erased as the topic is marked as resolved.
yeah, it’s on articles and pages on https://www.intransigent.blog
Try updating the code to this:
p.wp-caption-text.thumb-caption-text { display: flex; font-style:italic; padding-left: 20px; padding-right: 20px; } p.wp-caption-text.thumb-caption-text a{ margin: 0 4px; }hell yeah, it worked, thank you!
You’re welcome, Jordan!
- You must be logged in to reply to this topic.
