Skip to content

Commit

Permalink
Add feature support SVG logo #484
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonvnn
sonvnn committed Dec 1, 2023
1 parent ae3283b commit 2ee58ff
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 22 deletions.
2 changes: 1 addition & 1 deletion framework/frontend/header/sticky.php
View file
Expand Up @@ -68,7 +68,7 @@
<?php $document->include('offcanvas.trigger', ['offcanvas' => '#astroid-offcanvas', 'visibility' => $offcanvas_togglevisibility, 'effect' => $offcanvas_animation, 'direction' => $offcanvas_direction]); ?>
<?php echo '</div>'; ?>
<?php } ?>
<?php $document->include('logo'); ?>
<?php $document->include('logo', ['position' => 'sticky']); ?>
<?php
if ($stickey_mode == 'left') {
// header nav starts
Expand Down
125 changes: 106 additions & 19 deletions framework/frontend/logo.php
View file
Expand Up @@ -12,6 +12,8 @@
// No direct access.
use Joomla\CMS\Factory;
use Joomla\CMS\Uri\Uri;
use Joomla\Filesystem\File;
use Astroid\Helper\Style;
defined('_JEXEC') or die;

extract($displayData);
Expand Down Expand Up @@ -55,7 +57,7 @@
$logo_link_target = '_blank';
}
}

$position = $position ?? '';
?>
<!-- logo starts -->
<?php if ($logo_type == 'text') : ?>
Expand All @@ -82,26 +84,111 @@
<?php if ($logo_link_type != 'none') : ?>
<a target="<?php echo $logo_link_target; ?>" class="<?php echo implode(' ', $class); ?><?php echo $mr; ?>" href="<?php echo $logo_link; ?>">
<?php endif; ?>
<?php if (!empty($default_logo)) { ?>
<img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $default_logo; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-default" />
<?php } ?>
<?php if (!empty($default_logo_dark)) { ?>
<img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $default_logo_dark; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-default dark" />
<?php } ?>
<?php if ($position != 'sticky') : // start main logo
// Default logo
$default_logo_width = $params->get('default_logo_width', '');
$default_logo_height = $params->get('default_logo_height', '60px');
$default_logo_style = !empty($default_logo_width) ? ' width="'.$default_logo_width.'"' : '';
$default_logo_style .= !empty($default_logo_height) ? ' height="'.$default_logo_height.'"' : '';

// Mobile logo
$mobile_logo_width = $params->get('mobile_logo_width', '');
$mobile_logo_height = $params->get('mobile_logo_height', '60px');
$mobile_logo_style = !empty($mobile_logo_width) ? ' width="'.$mobile_logo_width.'"' : '';
$mobile_logo_style .= !empty($mobile_logo_height) ? ' height="'.$mobile_logo_height.'"' : '';

<?php if (!empty($mobile_logo)) { ?>
<img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $mobile_logo; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-mobile" />
<?php } ?>
<?php if (!empty($mobile_logo_dark)) { ?>
<img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $mobile_logo_dark; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-mobile dark d-none" />
<?php } ?>
// Set style for image logo
$style = new Style('.astroid-logo');
if (!empty($default_logo_width)) {
$style->child('> .astroid-logo-default')->addCss('max-width', $default_logo_width);
}
if (!empty($default_logo_height)) {
$style->child('> .astroid-logo-default')->addCss('max-height', $default_logo_height);
}
if (!empty($mobile_logo_width)) {
$style->child('> .astroid-logo-mobile')->addCss('max-width', $mobile_logo_width);
}
if (!empty($mobile_logo_height)) {
$style->child('> .astroid-logo-mobile')->addCss('max-height', $mobile_logo_height);
}
$style->render();
?>
<?php
if (!empty($default_logo)) {
if (File::getExt($default_logo) !== 'svg') {
?><img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $default_logo; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-default" /><?php
} else {
$logo_svg = file_get_contents(JPATH_ROOT . '/' . Astroid\Helper\Media::getPath() . '/' . $default_logo);
$logo_svg = preg_replace('/\<svg(.*?)\>/i', '<svg$1 class="astroid-logo-default"'.$default_logo_style.'>', $logo_svg);
echo $logo_svg;
}
} ?>
<?php
if (!empty($default_logo_dark)) {
if (File::getExt($default_logo_dark) !== 'svg') {
?><img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $default_logo_dark; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-default dark" /><?php
} else {
$logo_svg = file_get_contents(JPATH_ROOT . '/' . Astroid\Helper\Media::getPath() . '/' . $default_logo_dark);
$logo_svg = preg_replace('/\<svg(.*?)\>/i', '<svg$1 class="astroid-logo-default dark"'.$default_logo_style.'>', $logo_svg);
echo $logo_svg;
}
} ?>
<?php
if (!empty($mobile_logo)) {
if (File::getExt($mobile_logo) !== 'svg') {
?><img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $mobile_logo; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-mobile" /><?php
} else {
$logo_svg = file_get_contents(JPATH_ROOT . '/' . Astroid\Helper\Media::getPath() . '/' . $mobile_logo);
$logo_svg = preg_replace('/\<svg(.*?)\>/i', '<svg$1 class="astroid-logo-mobile"'.$mobile_logo_style.'>', $logo_svg);
echo $logo_svg;
}
} ?>
<?php if (!empty($mobile_logo_dark)) {
if (File::getExt($mobile_logo_dark) !== 'svg') {
?><img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $mobile_logo_dark; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-mobile dark d-none" /><?php
} else {
$logo_svg = file_get_contents(JPATH_ROOT . '/' . Astroid\Helper\Media::getPath() . '/' . $mobile_logo_dark);
$logo_svg = preg_replace('/\<svg(.*?)\>/i', '<svg$1 class="astroid-logo-mobile dark d-none"'.$mobile_logo_style.'>', $logo_svg);
echo $logo_svg;
}
} ?>
<?php endif; // end of main logo ?>
<?php if ($position == 'sticky') : //Start sticky logo
// Mobile logo
$sticky_logo_width = $params->get('sticky_logo_width', '');
$sticky_logo_height = $params->get('sticky_logo_height', '60px');
$sticky_logo_style = !empty($sticky_logo_width) ? ' width="'.$sticky_logo_width.'"' : '';
$sticky_logo_style .= !empty($sticky_logo_height) ? ' height="'.$sticky_logo_height.'"' : '';

<?php if (!empty($stickey_header_logo)) { ?>
<img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $stickey_header_logo; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-sticky" />
<?php } ?>
<?php if (!empty($stickey_header_logo_dark)) { ?>
<img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $stickey_header_logo_dark; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-sticky dark d-none" />
<?php } ?>
// Set style for image logo
$style = new Style('.astroid-logo > .astroid-logo-sticky');
if (!empty($sticky_logo_width)) {
$style->addCss('max-width', $sticky_logo_width);
}
if (!empty($sticky_logo_height)) {
$style->addCss('max-height', $sticky_logo_height);
}
$style->render();
?>
<?php if (!empty($stickey_header_logo)) {
if (File::getExt($stickey_header_logo) !== 'svg') {
?><img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $stickey_header_logo; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-sticky" /><?php
} else {
$logo_svg = file_get_contents(JPATH_ROOT . '/' . Astroid\Helper\Media::getPath() . '/' . $stickey_header_logo);
$logo_svg = preg_replace('/\<svg(.*?)\>/i', '<svg$1 class="astroid-logo-sticky"'.$sticky_logo_style.'>', $logo_svg);
echo $logo_svg;
}
} ?>
<?php if (!empty($stickey_header_logo_dark)) {
if (File::getExt($stickey_header_logo_dark) !== 'svg') {
?><img src="<?php echo Uri::root() . Astroid\Helper\Media::getPath() . '/' . $stickey_header_logo_dark; ?>" alt="<?php echo $sitename; ?>" class="astroid-logo-sticky dark d-none" /><?php
} else {
$logo_svg = file_get_contents(JPATH_ROOT . '/' . Astroid\Helper\Media::getPath() . '/' . $stickey_header_logo_dark);
$logo_svg = preg_replace('/\<svg(.*?)\>/i', '<svg$1 class="astroid-logo-sticky dark d-none"'.$sticky_logo_style.'>', $logo_svg);
echo $logo_svg;
}
} ?>
<?php endif; ?>
<?php if ($logo_link_type != 'none') : ?>
</a>
<?php endif; ?>
Expand Down
8 changes: 7 additions & 1 deletion framework/options/header.xml
View file
Expand Up @@ -187,17 +187,21 @@
<field astroidgroup="header_logo_options_element" description="" ngShow="[header]==true AND [logo_type]!='none' AND [logo_link_type]=='custom'" name="logo_link_custom" type="astroidtext" class="form-control" default="#" label="Logo Link Url">
</field>

<field ngShow="[header]==true AND [logo_type]!='none' AND [logo_link_type]=='custom'" astroidgroup="header_logo_options_element" class="astroid-logo-target-switch" name="logo_link_target_blank" type="astroidradio" astroid-switch="true" default="0" label="Open in new window" description=""></field>
<field ngShow="[header]==true AND [logo_type]!='none' AND [logo_link_type]=='custom'" astroidgroup="header_logo_options_element" class="astroid-logo-target-switch" name="logo_link_target_blank" type="astroidradio" astroid-switch="true" default="0" label="Open in new window" description=""/>

<field astroidgroup="header_logo_options_element" description="TPL_ASTROID_BASIC_DEFULT_LOGO_DESC" ngShow="[header]==true AND [logo_type]=='image'" ngRequired="logo_type=='image'" name="defult_logo" type="astroidmedia" label="TPL_ASTROID_BASIC_DEFULT_LOGO_LABEL">
</field>
<field astroidgroup="header_logo_options_element" description="TPL_ASTROID_BASIC_DEFAULT_LOGO_DARK_DESC" ngShow="[header]==true AND [logo_type]=='image' AND [astroid_color_mode_enable]=='1'" ngRequired="logo_type=='image'" name="default_logo_dark" type="astroidmedia" label="TPL_ASTROID_BASIC_DEFAULT_LOGO_DARK_LABEL">
</field>
<field astroidgroup="header_logo_options_element" description="TPL_ASTROID_BASIC_DEFAULT_LOGO_WIDTH_DESC" ngShow="[header]==true AND [logo_type]=='image'" name="default_logo_width" type="astroidtext" label="TPL_ASTROID_BASIC_DEFAULT_LOGO_WIDTH_LABEL" hint="200px"/>
<field astroidgroup="header_logo_options_element" description="TPL_ASTROID_BASIC_DEFAULT_LOGO_HEIGHT_DESC" ngShow="[header]==true AND [logo_type]=='image'" name="default_logo_height" type="astroidtext" label="TPL_ASTROID_BASIC_DEFAULT_LOGO_HEIGHT_LABEL" hint="60px"/>

<field astroidgroup="header_logo_options_element" description="TPL_ASTROID_BASIC_MOBILE_LOGO_DESC" ngShow="[header]==true AND [logo_type]=='image'" ngRequired="logo_type=='image'" name="mobile_logo" type="astroidmedia" label="TPL_ASTROID_BASIC_MOBILE_LOGO_LABEL">
</field>
<field astroidgroup="header_logo_options_element" description="TPL_ASTROID_BASIC_MOBILE_LOGO_DARK_DESC" ngShow="[header]==true AND [logo_type]=='image' AND [astroid_color_mode_enable]=='1'" ngRequired="logo_type=='image'" name="mobile_logo_dark" type="astroidmedia" label="TPL_ASTROID_BASIC_MOBILE_LOGO_DARK_LABEL">
</field>
<field astroidgroup="header_logo_options_element" description="TPL_ASTROID_BASIC_MOBILE_LOGO_WIDTH_DESC" ngShow="[header]==true AND [logo_type]=='image'" name="mobile_logo_width" type="astroidtext" label="TPL_ASTROID_BASIC_MOBILE_LOGO_WIDTH_LABEL" hint="200px"/>
<field astroidgroup="header_logo_options_element" description="TPL_ASTROID_BASIC_MOBILE_LOGO_HEIGHT_DESC" ngShow="[header]==true AND [logo_type]=='image'" name="mobile_logo_height" type="astroidtext" label="TPL_ASTROID_BASIC_MOBILE_LOGO_HEIGHT_LABEL" hint="60px"/>

<!-- Sticky Options-->
<field ngShow="[header]==true AND [header_mode]!='sidebar'" astroidgroup="header_sticky_options_element" class="sticky-header-switch" name="enable_sticky_menu" type="astroidradio" astroid-switch="true" default="0" label="TPL_ASTROID_HEADER_STICKY_HEADER_ENABLE_LABEL" description="TPL_ASTROID_HEADER_STICKY_HEADER_ENABLE_DESC"/>
Expand All @@ -212,6 +216,8 @@
</field>
<field ngShow="[header]==true AND [enable_sticky_menu]==true AND [logo_type]=='image' AND [header_mode]!='sidebar' AND [astroid_color_mode_enable]=='1'" astroidgroup="header_sticky_options_element" description="TPL_ASTROID_BASIC_STICKY_HEADER_LOGO_DARK_DESC" name="stickey_header_logo_dark" type="astroidmedia" label="TPL_ASTROID_BASIC_STICKY_HEADER_LOGO_DARK_LABEL">
</field>
<field astroidgroup="header_sticky_options_element" description="TPL_ASTROID_BASIC_STICKY_LOGO_WIDTH_DESC" ngShow="[header]==true AND [enable_sticky_menu]==true AND [logo_type]=='image' AND [header_mode]!='sidebar'" name="sticky_logo_width" type="astroidtext" label="TPL_ASTROID_BASIC_STICKY_LOGO_WIDTH_LABEL" hint="200px"/>
<field astroidgroup="header_sticky_options_element" description="TPL_ASTROID_BASIC_STICKY_LOGO_HEIGHT_DESC" ngShow="[header]==true AND [enable_sticky_menu]==true AND [logo_type]=='image' AND [header_mode]!='sidebar'" name="sticky_logo_height" type="astroidtext" label="TPL_ASTROID_BASIC_STICKY_LOGO_HEIGHT_LABEL" hint="60px"/>

<field ngShow="[header]==true AND [enable_sticky_menu]==true AND [header_mode]!='sidebar'" astroidgroup="header_sticky_options_element" name="stickey_block_1_type" type="astroidlist" default="blank" class="form-select" label="TPL_ASTROID_STICKY_BLOCK_1_TYPE_LABEL" description="TPL_ASTROID_STICKY_BLOCK_1_TYPE_DESC">
<option value="blank">TPL_ASTROID_BLANK_OPTIONS</option>
Expand Down
32 changes: 31 additions & 1 deletion language/en-GB/en-GB.astroid.ini
View file
Expand Up @@ -239,6 +239,7 @@ TPL_ASTROID_ADVANCED_POPUUP_LAYOUT_SELECT_LABEL="Background Type"
TPL_ASTROID_ADVANCED_POPUUP_LAYOUT_SELECT_DESC=""
TPL_ASTROID_BOOTSTRAP_JS_LABEL="Bootstrap JS Libraries"
TPL_ASTROID_BOOTSTRAP_JS_DESC="Select Bootstrap JS Libraries which will be load in default"
TPL_ASTROID_BOOTSTRAP_JS_HINT_LABEL="Select Bootstrap libraries"

; Header Tab
TPL_ASTROID_HEADER_ENABLE_HEADER_LABEL="Header Element"
Expand Down Expand Up @@ -304,14 +305,26 @@ TPL_ASTROID_BASIC_DEFULT_LOGO_LABEL="Default Logo"
TPL_ASTROID_BASIC_DEFULT_LOGO_DESC="Select an image for your logo."
TPL_ASTROID_BASIC_DEFAULT_LOGO_DARK_LABEL="Default Logo (Dark Mode)"
TPL_ASTROID_BASIC_DEFAULT_LOGO_DARK_DESC="Select an image for your logo in the dark mode."
TPL_ASTROID_BASIC_DEFAULT_LOGO_WIDTH_LABEL="Default Logo Width"
TPL_ASTROID_BASIC_DEFAULT_LOGO_WIDTH_DESC="Set max-width of Default Logo"
TPL_ASTROID_BASIC_DEFAULT_LOGO_HEIGHT_LABEL="Default Logo Height"
TPL_ASTROID_BASIC_DEFAULT_LOGO_HEIGHT_DESC="Set max-height of Default Logo"
TPL_ASTROID_BASIC_MOBILE_LOGO_LABEL="Mobile Logo"
TPL_ASTROID_BASIC_MOBILE_LOGO_DESC="Select an image for your mobile logo."
TPL_ASTROID_BASIC_MOBILE_LOGO_DARK_LABEL="Mobile Logo (Dark Mode)"
TPL_ASTROID_BASIC_MOBILE_LOGO_DARK_DESC="Select an image for your mobile logo in the dark mode."
TPL_ASTROID_BASIC_MOBILE_LOGO_WIDTH_LABEL="Mobile Logo Width"
TPL_ASTROID_BASIC_MOBILE_LOGO_WIDTH_DESC="Set max-width of Mobile Logo"
TPL_ASTROID_BASIC_MOBILE_LOGO_HEIGHT_LABEL="Mobile Logo Height"
TPL_ASTROID_BASIC_MOBILE_LOGO_HEIGHT_DESC="Set max-height of Mobile Logo"
TPL_ASTROID_HEADER_STICKY_HEADER_LABEL="Sticky Header"
TPL_ASTROID_HEADER_STICKY_HEADER_DESC="Here you can select the type of the Sticky Header for desktop view, tablet view and mobile view."
TPL_ASTROID_BASIC_STICKY_HEADER_LOGO_LABEL="Sticky Header Logo"
TPL_ASTROID_BASIC_STICKY_HEADER_LOGO_DESC="Select an image for your sticky header logo."
TPL_ASTROID_BASIC_STICKY_LOGO_WIDTH_LABEL="Sticky Logo Width"
TPL_ASTROID_BASIC_STICKY_LOGO_WIDTH_DESC="Set max-width of Sticky Logo"
TPL_ASTROID_BASIC_STICKY_LOGO_HEIGHT_LABEL="Sticky Logo Height"
TPL_ASTROID_BASIC_STICKY_LOGO_HEIGHT_DESC="Set max-height of Sticky Logo"
TPL_ASTROID_BASIC_STICKY_HEADER_LOGO_DARK_LABEL="Sticky Header Logo (Dark Mode)"
TPL_ASTROID_BASIC_STICKY_HEADER_LOGO_DARK_DESC="Select an image for your sticky header logo in the dark mode."
TPL_ASTROID_HEADER_STICKY_HEADER_ENABLE_LABEL="Sticky Header"
Expand Down Expand Up @@ -662,7 +675,7 @@ ASTROID_COLUMN_TITLE_LABEL="Column Title"
ASTROID_COLUMN_SIZE_LABEL="Column Size"
ASTROID_COLUMN_BREAKPOINT="Column Breakpoint"
ASTROID_ELEMENT_CUSTOM_BACKGROUND_LABEL="Custom Background"
ASTROID_ELEMENT_CUSTOM_COLORS_LABEL="<h3>Custom Colors</h3>"
ASTROID_ELEMENT_CUSTOM_COLORS_LABEL="Custom Colors"
ASTROID_ELEMENT_LAYOUT_CUSTOM_CLASS_LABEL="Layout Custom Class"
ASTROID_ELEMENT_LAYOUT_SECTION_LAYOUT_LABEL="Section Layout"
ASTROID_CONTAINER="Container"
Expand Down Expand Up @@ -893,6 +906,14 @@ ASTROID_ADDTHIS_CODE_DESC="Paste your AddThis code to display sharing button on
ASTROID_SHARETHIS_LBL="ShareThis"
ASTROID_SHARETHIS_PID_LBL="Property ID"
ASTROID_SHARETHIS_PID_DESC="Paste your ShareThis Property ID to display sharing button on the articles"
ASTROID_SHARE_DEFAULT_LBL="Default"
ASTROID_SHARE_BUTTONS_LBL="Social Buttons"
ASTROID_SHARE_BUTTONS_DESC="Select social share buttons for your article"
ASTROID_SHARE_BUTTONS_PLACEHOLDER_LBL="Select Social Buttons"
ASTROID_SHARE_FACEBOOK_LBL="Facebook"
ASTROID_SHARE_X_LBL="X"
ASTROID_SHARE_LINKEDIN_LBL="LinkedIn"
ASTROID_SHARE_PINTEREST_LBL="Pinterest"

ASTROID_VIDEO_TYPE="Video Type"
ASTROID_VIDEO_TYPE_DESC="Select between YouTube and Vimeo to use video on an article."
Expand Down Expand Up @@ -1066,3 +1087,12 @@ ASTROID_TABS_FRONTEND_VISIBILTY="Frontend Visibility of Astroid tabs"

TPL_ASTROID_MINIFYJS_EXCLUDES_LABEL="Exclude JS Files"
TPL_ASTROID_MINIFYJS_EXCLUDES_DESC="Add comma separated filesnames to exclude files from JS minification. You can add filename directly or use available filename patterns: <br/> <code>*.min.js</code><br/> <code>jquery.*</code><br/> <code>*bootstrap*</code>"

; Widgets
ASTROID_WIDGET_HEADING_LABEL="Heading"
ASTROID_WIDGET_HEADING_DESC="Define different styles for headings"
ASTROID_WIDGET_STYLES_LABEL="Widget Styles"
ASTROID_WIDGET_HTML_ELEMENT_LABEL="HTML Element"
ASTROID_WIDGET_FONT_STYLES_LABEL="Font Styles"
ASTROID_WIDGET_HEADING_USE_LINK_LABEL="Use Link"
ASTROID_WIDGET_HEADING_USE_LINK_DESC="Add link to your heading"

0 comments on commit 2ee58ff

Please sign in to comment.